Applying an Image on a 3D Model with React Three Drei’s Decal

Adding images or patterns to 3D models can bring your scene to life, especially if you’re building applications where customization, such as tattoo previews on mannequin models, is important. Here’s how you can achieve this using Decal from React Three Drei, a powerful set of helpers for React Three Fiber.

Prerequisites
Before we start, make sure you have a project set up with:

• React Three Fiber for rendering 3D scenes with React

• React Three Drei for additional 3D helpers like Decal

• GLTF or OBJ model of a 3D object (e.g., mannequin or similar)

- Install Required Packages

If you haven’t yet, install @react-three/fiber, @react-three/drei, and three:

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

- Set Up the 3D Scene and Canvas

In your main App.js file, initialize the 3D scene. Here’s the basic setup for a Canvas component:

// App.js
import React from 'react';
import { Canvas } from '@react-three/fiber';
import { Suspense } from 'react';
import { Loader } from '@react-three/drei';
import Experience from './components/Experience';

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Canvas>
        <Suspense fallback={null}>
          <Experience />
        </Suspense>
      </Canvas>
      <Loader />
    </div>
  );
}

export default App;

- Create the Canvas Component

The Canvas component will load the model and apply a decal to it. Let’s break it down into steps.

• Load the Model
  Use the useGLTF hook to load a 3D model. Make sure your model is placed in the public/models directory and is in .glb or .gltf format.

• Apply the Decal Texture
  Use the Decal component from @react-three/drei. This component will allow you to apply an image to the model.

- Building the Canvas Component

Now let’s dive into the Canvas component code.

// Experience.jsx
import React, { useRef } from 'react';
import { useGLTF, Decal, useTexture } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';

function Experience() {
  // Load the 3D model
  const { nodes } = useGLTF('/models/male_mannequin.glb');

  // Load the texture to be applied as a decal
  const decalTexture = useTexture('/textures/tattoo.png');

  // A ref for rotating the model (optional)
  const modelRef = useRef();

  // Rotate the model for some interaction
  useFrame(() => {
    modelRef.current.rotation.y += 0.01;
  });

  return (
    <group ref={modelRef} position={[0, -1.5, 0]}>
      {/* Mannequin model */}
      <mesh geometry={nodes.mannequin.geometry} castShadow receiveShadow>
        <meshStandardMaterial color="lightgrey" />

        {/* Decal component to apply the image */}
        <Decal 
          position={[0, 0.5, 0.6]}     // Adjust position based on your model's needs
          rotation={[Math.PI, 0, 0]}    // Adjust rotation for orientation
          scale={0.3}                   // Adjust size of the decal
          map={decalTexture}            // Pass the loaded texture here
        />
      </mesh>
    </group>
  );
}

export default Experience;

- Adjusting the Decal Properties

To make sure the decal appears exactly where you want it, experiment with these properties:

• position: [x, y, z] coordinates to place the decal on the model. Adjust these based on the model’s geometry.

• rotation: [x, y, z] values to orient the decal. Use radians, e.g., Math.PI for 180 degrees.

• scale: Controls the size of the decal. Start small (e.g., 0.1 or 0.3) and increase as needed.

- Adding a Fallback or Error Boundary

If the model or texture is having trouble loading, wrap the Experience component in a fallback or error boundary.

<Suspense fallback={<LoadingScreen />}>
  <Experience />
</Suspense>

- Testing and Fine-Tuning

Run the app, and you should see the decal applied to the 3D model! Adjust the position, rotation, and scale to fit the decal exactly where you want it.

All set!