Forem: Abdullah Nadeem

Add Text as Texture on a 3D Object in a React App

Abdullah Nadeem — Tue, 06 Feb 2024 20:31:00 +0000

Let's learn how to add text to a 3D object in a React application!

We will use @react-three/fiber to accomplish this feat.
I'll be assuming you already have a basic understanding of React and a new React application set up.

Step 1: Install Required Packages

Let's install the required packages first. Run the following command in your terminal (make sure you are in the root directory of your project):

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

Here, three is the base library that react-three-fiber uses to create and render the 3D scene. @react-three/drei is a helper library for react-three-fiber that provides a set of reusable components and functions.

Step 2: Setup the Canvas

Now, import the Canvas from @react-three/fiber in your React component.

import { Canvas } from '@react-three/fiber';

Use the Canvas inside return in a functional component like so:

const CubeCanvas = () => {
  return (
     <Canvas
      camera={{
        fov: 25,
        position: [5, 5, 5],
      }}
    >
    </Canvas>
  );
};

Set the fov (Field of View) and position of the Canvas according to your use case. (A larger fov will result in a wider view.)

Step 3: Add Some Lights

Add some lights inside the Canvas so the Cube isn't too dark when added later on. Let's use ambientLight and directionalLight (They don't need importing).

 <Canvas
      camera={{
        fov: 25,
        position: [5, 5, 5],
      }}
    >
      <ambientLight intensity={1} />
      <directionalLight position={[3, 2, 1]} />
    </Canvas>

Step 4: Create a Cube

Now, let's create a separate component to render our cube.

function Cube() {
  return (
    <mesh>
      <boxGeometry />
      <meshStandardMaterial>
        <RenderTexture attach="map">
          <color attach={"background"} args={["#dc9dcd"]} />
        </RenderTexture>
      </meshStandardMaterial>
    </mesh>
  );
}

Here, a mesh component is used, which is a low-level react-three-fiber component used to create and manipulate 3D objects. Inside mesh, we use boxGeometry for displaying a cube shaped object.

We also need a meshStandardMaterial to define the appearance of the cube. Inside, meshStandardMaterial, a RenderTexture component, imported from @react-three/drei is used to render texture on the cube. attach="map" indicates that the rendered texture should be used as the texture map for the material of the parent mesh.

We also give a color to the cube by using a color component.

Step 5: Add Text to Cube

Let's use the Text component from @react-three/drei to use text as a texture on our cube. Add the following inside the RenderTexture component.

<Text position={[-0.2, 0, 0]} fontSize={1} color={"#555"}>
 hello
</Text>

And that's all we need to add text to the cube. The positioning of the text may seem a little odd at the moment. But we can fix that using the PerspectiveCamera from @react-three/drei. Also, add Cube inside the CubeCanvas This is how both components finally look:

import {
  Text,
  PerspectiveCamera,
  RenderTexture,
} from "@react-three/drei";
import { Canvas } from "@react-three/fiber";

function Cube() {
  return (
    <mesh>
      <boxGeometry />
      <meshStandardMaterial>
        <RenderTexture attach={"map"}>
          <PerspectiveCamera makeDefault position={[0, 0, 5]} />
          <color attach={"background"} args={["#dc9dcd"]} />
          <Text position={[-0.2, 0, 0]} fontSize={1} color={"#555"}>
            hello
          </Text>
        </RenderTexture>
      </meshStandardMaterial>
    </mesh>
  );
}

function CubeCanvas() {
  return (
    <Canvas
      camera={{
        fov: 25,
        position: [5, 5, 5],
      }}
    >
      <ambientLight intensity={1} />
      <directionalLight position={[3, 2, 1]} />
      <Cube />
    </Canvas>
  );
}

And the text is now fixed 👌

Final Thoughts

That's the end of this tutorial. We rendered a 3D object in our React app using threejs, react-three-fiber and react-three/drei, and learned how to add text as texture to it.

You can find the official docs here and explore the vast world of 3D rendering in React using React-Three-Fiber.

Add an Image as Texture to a 3D Object in a React App

Abdullah Nadeem — Thu, 17 Aug 2023 09:31:57 +0000

In this article, we will learn how to add a picture as a texture to a 3D object in a React application. We will use @react-three/fiber to accomplish this feat.
We will be assuming you already have a basic understanding of React and a new React application set up.

Step 1: Install Required Packages

Let's install the dependencies first. Run the following command in your terminal (make sure you are in the root directory of your project):

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

Step 2: Setup the Canvas

Now, import the Canvas from @react-three/fiber in your React component.

import { Canvas } from '@react-three/fiber';

Use the Canvas inside return like so:



const ShapeCanvas = () => {
  return (
    <Canvas frameloop="demand">
    </Canvas>
  );
};

The frameloop prop set to demand is telling react-three-fiber to only re-render when state changes occur.

Step 3: Render a 3D Shape

Let's make another component and name it Shape. We will use this to render a 3D model and use it inside our Canvas.

We first use the Float component from @react-three/drei to give our model a floating effect. Import Float like so:

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

Inside the return statement, write:

<Float speed={1.75} rotationIntensity={1} floatIntensity={2}></Float>

speed refers to the animation speed.
rotationIntensity is the XYZ rotation intensity.
floatIntensity is the Up/Down float intensity.

We'll now use a mesh component which is a low-level react-three-fiber component used to create and manipulate 3D objects. Inside Float, write:

<mesh castShadow receiveShadow scale={1.75}></mesh>

We have allowed the mesh to cast and receive shadows and set its scale according to our use case.

A mesh is usually composed of a geometry and a material. So let's add these inside our mesh.

We will use an icosahedron geometry as our shape to render. Inside mesh, write:

<icosahedronGeometry args={[1, 1]} />

The icosahedron is a polyhedron with 20 identical equilateral triangular faces. The args={[1, 1]} prop specifies the radius and detail of the icosahedron.

Now, add a material inside mesh like so:

<meshStandardMaterial color="#fff8eb" polygonOffset polygonOffsetFactor={-5} flatShading />

color is used to specify a color for the material that will be used on our geometry.
polygonOffset and polygonOffsetFactor properties are used to avoid an artifact known as z-fighting, where two faces occupy the same space and create a flickering effect.
flatShading set to true means that the material will have a sharp and flat look instead of the default smooth one.

The Shape component now looks like this:



const Shape = () => {
  return (
    <Float speed={1.75} rotationIntensity={1} floatIntensity={2}>
      <mesh castShadow receiveShadow scale={1.75}>
        <icosahedronGeometry args={[1, 1]} />
        <meshStandardMaterial color="#fff8eb" polygonOffset polygonOffsetFactor={-5} flatShading /> 
      </mesh>
    </Float>
  );
};

Now use this in ShapeCanvas:



const ShapeCanvas = () => {
  return (
    <Canvas frameloop="demand">
      <Shape />
    </Canvas>
  );
};

Right now, we can see a dark shape in our browser:

Does this mean we did something wrong? Not really! We just need to add some lights to the scene to see our 3D shape clearly. So let's do that.

There are multiple options for us to add lights in a scene which you can explore here.

For now, we will use ambientLight and directionalLight. Write the following lines above the mesh.



<ambientLight intensity={0.25} />
<directionalLight position={[0, 0, 0.05]} />

We have adjusted the intensity and position props for the lights according to our need. Our 3D shape now looks like this:

Step 4: Add an Image as Texture to the Shape

To use an image as texture on our shape, we will use the useTexture hook from @react-three/drei. This hook is used to load one or several textures asynchronously. A texture, in this context, is essentially an image that gets mapped onto the surface of a 3D model. We use the hook as follows:

const [texture] = useTexture([threejs]);

threejs is just an svg that can be imported in our component.

We now use Decal from @react-three/drei to map the texture onto our model.

<Decal position={[0, 0, 1]} rotation={[2 * Math.PI, 0, 6.25]} scale={1} map={texture} flatShading />

position determines where the decal is located relative to the origin of the object it's applied to.
rotation determines the rotation of the decal around the x, y, and z axes in radians.
scale determines the size of the decal.
map specifies the texture/image to be used as the decal.
flatShading does the same thing it does to our material as explained before.

Our Shape component now looks like this:



import { Decal, Float, useTexture } from '@react-three/drei';
import { threejs } from '../../assets';

const Shape = () => {
  const [texture] = useTexture([threejs]);

  return (
    <Float speed={1.75} rotationIntensity={1} floatIntensity={2}>
      <ambientLight intensity={0.25} />
      <directionalLight position={[0, 0, 0.05]} />
      <mesh castShadow receiveShadow scale={1.75}>
        <icosahedronGeometry args={[1, 1]} />
        <meshStandardMaterial color="#fff8eb" polygonOffset polygonOffsetFactor={-5} flatShading />
        <Decal position={[0, 0, 1]} rotation={[2 * Math.PI, 0, 6.25]} scale={1} map={texture} flatShading />
      </mesh>
    </Float>
  );
};

And that's all we need to add an image as a texture to our 3D object.

Step 5: Adding Interactivity

We can finally add some interactivity to make it more fun by using OrbitControls from @react-three/drei. In the ShapeCanvas component, import OrbitControls from @react-three/drei and use it like this:



const ShapeCanvas = () => {
  return (
    <Canvas frameloop="demand">
      <OrbitControls enableZoom={false} enablePan={false} />
      <Shape />
    </Canvas>
  );
};

This will disable the zooming and panning of our 3D shape but will allow us to rotate it using our cursor.

Conclusion

In this article, we dove deep into integrating 3D objects within a React application using @react-three/fiber. We started from setting up a basic 3D canvas, progressing to rendering a 3D shape, and finally applying a textured image onto it. By adding the OrbitControls, we also introduced a layer of interactivity, letting users rotate the object. The combination of React with 3D holds vast potential, setting the stage for richer web interactions and experiences and @react-three/fiber is just the right place to start for you.

Importing and Interacting with a 3D Model in React with React-Three-Fiber

Abdullah Nadeem — Mon, 07 Aug 2023 13:30:40 +0000

React-Three-Fiber is a powerful library that combines the strengths of React with the capabilities of Three.js. In this article, we're going to examine a particular piece of code which demonstrates how to implement an interactive 3D Earth model using React-Three-Fiber and additional helper libraries such as @react-three/drei.
We will be assuming you already have a basic understanding of React and a new React application set up.

Step 1: Install Required Packages

First off, let's install the dependencies. Run the following command in your terminal (make sure you are in the root directory of your project):

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

Step 2: Download a 3D Model

Make sure you have downloaded a 3D model and placed it in the public folder in the root directory of your project like so:

You can download one from here.
We will be using one of .gltf format in this tutorial.

Step 3: Setup the Canvas

Now, import the Canvas from @react-three/fiber in your React component.

import { Canvas } from '@react-three/fiber';
Use the Canvas inside return like so:



import { Canvas } from '@react-three/fiber';

const EarthCanvas = () => {
  return (
    <Canvas frameloop="demand" camera={{ position: [-4, 3, 6], fov: 45, near: 0.1, far: 200 }}> 
    </Canvas>
  );
};

export default EarthCanvas;

The Canvas is taking a couple of props:

frameloop prop set to demand tells react-three-fiber to only re-render when state changes occur.
camera prop is used to adjust the camera's position in the scene, the field of view, and the near and far clipping planes. You can adjust these to your liking.

Step 4: Import 3D Model in React Component

To import the 3D model that we placed in the public folder of our project, we will use a hook called useGLTF from @react-three/drei.

Use it like this on top of your component:

const earth = useGLTF('./planet/scene.gltf');

The useGLTF hook takes in as argument, the path to your 3D model scene file.

Step 5: Render the 3D Model

We can render the component by using the primitive component. It is a low-level react-three-fiber component that can represent any three.js object.

<primitive object={earth.scene} scale={2.5} />

The scale prop is used to adjust the model's size.

Now, we can use this component in App.jsx to see it in our browser. The return statement in App.jsx will look like this:



  return (
    <div className="flex justify-center items-center h-screen w-screen">
      <EarthCanvas />
    </div>
)

And voilà, that's all you need to render your 3D model in your React app.

If you are unable to see your model or if it's too dark, try adding an ambientLight in the scene.

<ambientLight intensity={0.5} />

There are other options for adding light like directionalLight and spotLight as well. You can explore more about these here.

Step 6: Adding Interactivity

To add interactivity to our model, we can use the OrbitControls from @react-three/drei like so:

<OrbitControls autoRotate enableZoom={false} maxPolarAngle={Math.PI / 2} minPolarAngle={Math.PI / 2} enablePan={false} />

The autoRotate prop enables the model to rotate automatically.
enableZoom and enablePan props are set to false in this case to disable zooming and panning.
maxPolarAngle and minPolarAngle props are used to restrict the vertical orbiting range of the camera around the 3D object.

You will now be able to rotate the model with the cursor as well.

So the final code of our EarthCanvas Component looks like this:



import { Canvas } from '@react-three/fiber';

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

const EarthCanvas = () => {

  const earth = useGLTF('./planet/scene.gltf');

return (

    <Canvas className="cursor-pointer" frameloop="demand" camera={{ position: [-4, 3, 6], fov: 45, near: 0.1, far: 200 }}>

      <OrbitControls autoRotate enableZoom={false} maxPolarAngle={Math.PI / 2} minPolarAngle={Math.PI / 2} enablePan={false} />

      <primitive object={earth.scene} scale={2.5} />

    </Canvas>

  );

};

export default EarthCanvas;

Final Thoughts

That's the end of this tutorial. We rendered a 3D model in our React app using threejs, react-three-fiber and react-three/drei, and added some interactivity to make it more fun.

You can find the official docs here and explore the vast world of 3D rendering in React using React-Three-Fiber.