How to use react-three-fiber - 10 common examples

function Box({ position, rotation, onDrag, onDragStop }) {
  const { size, viewport } = useThree();
  const [dragging, setDragging] = useState(false);
  const aspect = size.width / viewport.width;
  const bodyRef = React.useRef();

  const fn = React.useCallback(
    body => {
      body.addShape(new CANNON.Box(new CANNON.Vec3(1, 1, 1)));
      body.position.set(...position);
      body.angularVelocity.set(...rotation);

      bodyRef.current = body;
    },
    [position, rotation]
  );

  // Register box as a physics body with mass

function Main() {
  const { size, setDefaultCamera } = useThree()
  const [ref, camera] = useResource()

  // #15929 (https://github.com/mrdoob/three.js/issues/15929)
  // The camera needs to be updated every frame
  // We give this frame a priority so that automatic rendering will be switched off right away
  useFrame(() => camera.updateMatrixWorld())
  useLayoutEffect(() => void setDefaultCamera(ref.current), [])

  return (
    <>

function Content() {
  const { camera } = useThree()
  console.log(camera)
  const scene = useRef()
  useFrame(({ gl }) => void ((gl.autoClear = true), gl.render(scene.current, camera)), 10)
  return (
    
      
        
        
      
    
  )
}

function Background({ color }) {
  const { size, viewport } = useThree()
  console.log(viewport)
  return (
    
      
      
    
  )
}

function Image({ url1, position = [0, 0, 0], ...props }) {
  const { invalidate, size, viewport } = useThree()
  const texture = useMemo(() => {
    const texture = loader.load(url1, invalidate)
    texture.minFilter = THREE.LinearFilter
    return texture
  }, [url1])

  const [{ xy }, setXY] = useSpring(() => ({ xy: [0, 0] }))
  const [active, set] = useState(false)
  const animatedProps = useSpring({ rotation: [0, 0, active ? Math.PI / 4 : 0] })
  const hover = useCallback(e => {
    e.stopPropagation()
    console.log('hover', e.object.uuid)
  }, [])
  const unhover = useCallback(e => console.log('unhover', e.object.uuid), [])
  const move = useCallback(e => {
    event.stopPropagation()

function Controls({ children }) {
  const { camera, invalidate, intersect } = useThree()
  const api = useState(true)
  const ref = useRef()
  useEffect(() => {
    const handler = ref.current.addEventListener('change', invalidate)
    return () => ref.current.removeEventListener('change', handler)
  }, [])

  //useEffect(() => setTimeout(() => console.log(intersect()), 3000), [])

  return (
    <>
      
      {children}
    
  )
}

function Content() {
  const { size, setDefaultCamera } = useThree()
  const camera = useRef()
  const controls = useRef()

  useEffect(() => void setDefaultCamera(camera.current), [])
  useFrame(() => {
    if (controls.current) controls.current.update()
    if (camera.current) camera.current.updateMatrixWorld()
  }, 1000)

  return (
    <>

function Text({ children, position, opacity, color = 'white', fontSize = 410 }) {
  const {
    camera,
    size: { width, height },
    viewport: { width: viewportWidth, height: viewportHeight },
  } = useThree()
  const scale = viewportWidth > viewportHeight ? viewportWidth : viewportHeight
  const canvas = useMemo(() => {
    const canvas = document.createElement('canvas')
    canvas.width = canvas.height = 2048
    const context = canvas.getContext('2d')
    context.font = `bold ${fontSize}px -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif`
    context.textAlign = 'center'
    context.textBaseline = 'middle'
    context.fillStyle = color
    context.fillText(children, 1024, 1024 - 410 / 2)
    return canvas
  }, [children, width, height])
  return (
    
      
         (s.needsUpdate = true)} />

function Text({ children, position, opacity, color = 'white', fontSize = 410 }) {
  const {
    size: { width, height },
    viewport: { width: viewportWidth, height: viewportHeight }
  } = useThree()
  const scale = viewportWidth > viewportHeight ? viewportWidth : viewportHeight
  const canvas = useMemo(
    () => {
      const canvas = document.createElement('canvas')
      canvas.width = canvas.height = 2048
      const context = canvas.getContext('2d')
      context.font = `${fontSize}vmin -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif`
      context.textAlign = 'center'
      context.textBaseline = 'middle'
      context.fillStyle = color
      context.fillText(children, 1024, 1024 - 410 / 2)
      return canvas
    },
    [children, width, height]
  )
  return (

function Effect({ down }) {
  const composer = useRef()
  const { scene, gl, size, camera } = useThree()
  const aspect = useMemo(() => new THREE.Vector2(size.width, size.height), [size])
  useEffect(() => void composer.current.setSize(size.width, size.height), [size])
  useFrame(() => composer.current.render(), 1)
  return (
    
      
      
      
      
      
    
  )
}