React Three Fiber

https://r3f.docs.pmnd.rs/getting-started/introduction
Admin
React Three Fiber is a React renderer for three.js that enables building 3D scenes declaratively...
Tokens:1,227
Snippets:11
Trust Score:8.4
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install React Three Fiber

Source: https://r3f.docs.pmnd.rs/getting-started/introduction

Install the necessary packages for React Three Fiber using npm.

```bash
npm install three @types/three @react-three/fiber
```

--------------------------------

### Install TypeScript Types

Source: https://r3f.docs.pmnd.rs/getting-started/introduction

Install the TypeScript types for Three.js when using TypeScript with React Three Fiber.

```bash
npm install @types/three
```

--------------------------------

### Basic React Three Fiber Scene (TypeScript)

Source: https://r3f.docs.pmnd.rs/getting-started/introduction

A basic scene demonstrating a re-usable Box component with state, interactivity, and animation using React Three Fiber and TypeScript. Includes setup for ambient, spot, and point lights.

```typescript
import * as THREE from 'three'
import { createRoot } from 'react-dom/client'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame, ThreeElements } from '@react-three/fiber'
import './styles.css'

function Box(props: ThreeElements['mesh']) {
  const meshRef = useRef<THREE.Mesh>(null!)
  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(false)
  useFrame((state, delta) => (meshRef.current.rotation.x += delta))
  return (
    <mesh
      {...props}
      ref={meshRef}
      scale={active ? 1.5 : 1}
      onClick={(event) => setActive(!active)}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : '#2f74c0'} />
    </mesh>
  )
}

createRoot(document.getElementById('root')).render(
  <Canvas>
    <ambientLight intensity={Math.PI / 2} />
    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
  </Canvas>,
)
```

--------------------------------

### Basic React Native Three Fiber Scene

Source: https://r3f.docs.pmnd.rs/getting-started/introduction

A basic scene for React Native demonstrating a re-usable Box component with state, interactivity, and animation using React Three Fiber. Includes setup for ambient, spot, and point lights.

```jsx
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber/native'

function Box(props) {
  const meshRef = useRef(null)
  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(false)
  useFrame((state, delta) => (meshRef.current.rotation.x += delta))
  return (
    <mesh
      {...props}
      ref={meshRef}
      scale={active ? 1.5 : 1}
      onClick={(event) => setActive(!active)}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

export default function App() {
  return (
    <Canvas>
      <ambientLight intensity={Math.PI / 2} />
      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
      <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
      <Box position={[-1.2, 0, 0]} />
      <Box position={[1.2, 0, 0]} />
    </Canvas>
  )
}
```
Tokens:
Raw