Creating Interactive 3D Text with React Three Fiber

To recreate an interactive 3D text effect similar to the one on the website you mentioned, you'll need to use React Three Fiber (which is a React renderer for Three.js) along with some controls to handle the mouse interaction.

Here's a guide to help you get started:

1. Basic Setup

First, set up your React Three Fiber project:

JSXCopied
import React, { useRef, useState, useEffect } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { Text3D, OrbitControls, Center } from '@react-three/drei';
import * as THREE from 'three';

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Canvas camera={{ position: [0, 0, 10], fov: 45 }}>
        <ambientLight intensity={0.5} />
        <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
        <InteractiveText />
        <OrbitControls enableZoom={false} enablePan={false} />
      </Canvas>
    </div>
  );
}

export default App;

2. Creating the Interactive Text Component

JSXCopied
function InteractiveText() {
  const textRef = useRef();
  const [hovered, setHovered] = useState(false);
  
  // Track mouse position
  const mouse = useRef({ x: 0, y: 0 });
  
  useEffect(() => {
    const handleMouseMove = (event) => {
      // Calculate normalized mouse position (-1 to 1)
      mouse.current.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.current.y = -(event.clientY / window.innerHeight) * 2 + 1;
    };
    
    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);
  
  // Animation loop
  useFrame(() => {
    if (textRef.current) {
      // Apply rotation based on mouse position
      textRef.current.rotation.x = THREE.MathUtils.lerp(
        textRef.current.rotation.x,
        mouse.current.y * 0.2,
        0.1
      );
      textRef.current.rotation.y = THREE.MathUtils.lerp(
        textRef.current.rotation.y,
        mouse.current.x * 0.2,
        0.1
      );
    }
  });
  
  return (
    <Center>
      <Text3D
        ref={textRef}
        font="/fonts/helvetiker_regular.typeface.json" // You'll need to provide a font
        size={3}
        height={0.2}
        curveSegments={12}
        bevelEnabled
        bevelThickness={0.02}
        bevelSize={0.05}
        bevelSegments={5}
        onPointerOver={() => setHovered(true)}
        onPointerOut={() => setHovered(false)}
      >
        LABS
        <meshStandardMaterial 
          color={hovered ? "#ff9f00" : "#ffffff"} 
          metalness={0.5}
          roughness={0.2}
        />
      </Text3D>
    </Center>
  );
}

3. Adding More Interactivity

To enhance the effect, you might want to add more interactive elements:

JSXCopied
// Inside InteractiveText component
const [clicked, setClicked] = useState(false);

// Add to the Text3D component
onPointerDown={() => setClicked(true)}
onPointerUp={() => setClicked(false)}

// Modify the material to respond to clicks
<meshStandardMaterial 
  color={hovered ? (clicked ? "#ff5500" : "#ff9f00") : "#ffffff"} 
  metalness={clicked ? 0.8 : 0.5}
  roughness={clicked ? 0.1 : 0.2}
/>

4. Performance Considerations

For better performance, especially with complex text geometries:

JSXCopied
// Use useMemo to prevent unnecessary recreations of the text geometry
import { useMemo } from 'react';

// Inside InteractiveText component
const textConfig = useMemo(() => ({
  font: "/fonts/helvetiker_regular.typeface.json",
  size: 3,
  height: 0.2,
  curveSegments: 12,
  bevelEnabled: true,
  bevelThickness: 0.02,
  bevelSize: 0.05,
  bevelSegments: 5
}), []);

// Then use it in your Text3D component
<Text3D {...textConfig} ref={textRef}>

Important Notes

1. You'll need to install the necessary packages:

   npm install three @react-three/fiber @react-three/drei
   

2. You need to provide a font file for Text3D. You can use fonts from the Three.js examples or convert your own using tools like facetype.js.

3. The mouse interaction effect is achieved by tracking mouse movement and applying subtle rotations to the 3D text.

4. For more advanced effects, you might want to explore shaders or post-processing effects available in Three.js.

This should give you a good starting point for recreating the interactive 3D text effect. You can further customize the appearance and behavior to match your specific requirements.