Using useTexture, useGLTF, <Center>, and <Bounds> in React Three Fiber

React Three Fiber (R3F) leverages a declarative approach to build 3D scenes with React. The @react-three/drei library provides a collection of useful helpers and abstractions that simplify common tasks, including loading textures and models, and positioning objects.

useTexture

The useTexture hook from @react-three/drei is the recommended and most convenient way to load textures. It simplifies the process of loading one or multiple textures and applying them to materials.

Usage:

You can pass a single texture path, an array of paths, or an object mapping texture names to paths. The hook returns the loaded texture(s) which can then be assigned to material properties like map, normalMap, roughnessMap, etc.

import { useTexture } from '@react-three/drei';

function TexturedBox() {
  const [colorMap, normalMap, roughnessMap] = useTexture([
    'path/to/color.jpg',
    'path/to/normal.jpg',
    'path/to/roughness.jpg',
  ]);

  return (
    <mesh>
      <boxGeometry args={[2, 2, 2]} />
      <meshStandardMaterial
        map={colorMap}
        normalMap={normalMap}
        roughnessMap={roughnessMap}
      />
    </mesh>
  );
}

function App() {
  return (
    <Canvas>
      <Suspense fallback={null}>
        <Model url="/path/to/your/model.glb" />
      </Suspense>
    </Canvas>
  );
}

useGLTF

The useGLTF hook, also from @react-three/drei, is designed for loading GLTF (Graphics Library Transmission Format) 3D models, which are a popular and efficient format for 3D assets on the web.

Usage:

useGLTF takes the path to your .gltf or .glb file and returns an object containing the model's scene, nodes, and materials. You typically render the gltf.scene as a primitive.

import { useGLTF } from '@react-three/drei';
import { Suspense } from 'react';

function Model({ url }) {
  const { scene } = useGLTF(url);
  return <primitive object={scene} />;
}

function App() {
  return (
    <Canvas>
      <Suspense fallback={null}>
        <Model url="/path/to/your/model.glb" />
      </Suspense>
    </Canvas>
  );
}

<Center>

The <Center> component from @react-three/drei automatically centers its child objects within the scene. This is particularly useful when you load models that might have their origin point far from their visual center.

Usage:

Simply wrap the 3D objects you want to center with the <Center> component.

import { Center } from '@react-three/drei';

function MyScene() {
  // ... load your model or create objects
  return (
    <Center>
      <primitive object={scene} /> <!-- Your loaded model or other objects -->
    </Center>
  );
}

<Bounds>

The <Bounds> component from @react-three/drei is used to automatically adjust the camera's view to fit all the objects contained within it. This is often used for "fit-all" functionality, ensuring that all relevant 3D content is visible on screen.

Usage:

Wrap the objects you want the camera to frame with the <Bounds> component. You can also provide props to control the camera's behavior, such as fit (to fit the bounds), observe (to re-fit when children change), and clip (to prevent clipping).

import { Bounds } from '@react-three/drei';

function MySceneWithBounds() {
  // ... load your model or create objects
  return (
    <Bounds observe fit>
      <primitive object={scene} />
      <!-- Add other objects here that you want to be included in the bounds -->
    </Bounds>
  );
}