ThreeJS Fiber

Using ThreeJS with ReactJS

Installation

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

Boilerplate

2 Cubes

'use client'
import { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
 
function Box (props) {
  // This reference gives us direct access to the THREE.Mesh object.
  const ref = useRef()
 
  // Hold state for hovered and clicked events.
  const [hovered, hover] = useState(false)
  const [clicked, click] = useState(false)
 
  // Subscribe this component to the render-loop and rotate the mesh every frame.
  useFrame((state,delta) => (ref.current.rotation.x += delta))
 
  // Return the view.
  // These are regular three.js elements expressed in JSX.
  return (
    <mesh      
      {...props}
      ref={ref}
      scale={clicked ? 1.5 : 1}
      onClick={(event) => click(!clicked)}
      onPointerOver={(event) => hover(true)}
      onPointerOut={(event) => hover(false)}
    > 
      <boxGeometry args={[1, 1, 1]} />      
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange' } />    
    </mesh>
  )
}
 
export default function App() {
  return (
    <Canvas>
      <color attach="background" args={['#fff']} />
      <ambientLight intensity={0.5} />      
      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />      
      <pointLight position={[-10, -10, -10]} />      
      <Box position={[-1.2, 0, 0]} />     
      <Box position={[1.2, 0, 0]} />    
    </Canvas>
  )
}

Custom model

'use client'
import React, { Suspense } from 'react';
import { Canvas } from '@react-three/fiber';
import { useGLTF, OrbitControls } from '@react-three/drei';
 
function Model({ path }) {
  const { scene } = useGLTF(path);
  return <primitive object={scene} rotation={[0,4.7,0]} scale={[2, 2, 2]} />;
}
 
export default function Character() {
  return (
    <Canvas>
      <directionalLight position={[10, 10, 10]} intensity={3} />
      <directionalLight position={[10, -10, -10]} intensity={3} />
      <directionalLight position={[-10, 0, 0]} intensity={3} />
      <Suspense fallback={null}>
        <Model path="/creature.glb" />
      </Suspense>
      <OrbitControls />
    </Canvas>
  );
}