Add Interactive 3D models to a website using Three.js

User experience is a core focus when building applications, and many companies use methods like including 3D models of their products to get and keep the attention of customers.

For example, ecommerce sites use 3D models to display products, making the user experience interactive and engaging. With 3D models, users or customers can rotate a product 360 degrees, so that it can be viewed from all angles.

This can increase the customer's willingness to buy the product, compared to static visuals that may fail to fascinate and capture the customer's attention.

In this article, you'll learn how to use a JavaScript Library called three.js to display 3D models on a website.

What is Three.js?

Three.js is a library used by developers to create 3D elements or visuals on a webpage. It is built on top of WebGL (Web Graphics Library), a JavaScript API for rendering 2d and 3d graphics in the browser.

WebGL is a rasterization engine because it converts 3D vector data into pixels. It draws lines, points, and triangles using code, and if you want to create more complex shapes, animations, and movements, you will have to write a lot of code. 

Because WebGL is quite complex to work with, Three.js provides a higher-level API that simplifies the creation of 3D graphics on the web. It offers a set of JavaScript classes and functions for creating and manipulating 3D scenes, rendering them on the screen, and handling interactivity (user interactions).

Key Concepts of Three.js

The three concepts that make it possible to create 3D models in Three.js include;

Scene: The scene allows you to set up what you want three.js to render. This is where you can add objects, lights to illuminate them, and a camera that defines the viewpoint from which the scene is viewed.

Camera: The camera in Three.js is the viewpoint from which the scene is viewed. It determines what part of the scene is visible and how the scene is displayed on the screen.

There are different types of cameras in Three.js, including the perspective and orthographic cameras. The perspective camera mimics how the human eye works, while the orthographic camera displays objects without distortion, which means the size of an object remains the same regardless of how far the camera is. 

Renderer: The renderer displays a 3D scene on the screen from the camera's perspective. It uses WebGL with the GPU's power to convert 3D data into a 2D image that the browser can display. 

Adding an Interactive 3D model to a website 

In this tutorial, you will learn how to add an interactive model to your website using Three.js.

Prerequisite: To follow along with this project, you should have basic knowledge of how to set up a React project.

Step One: Three.js Setup

First, install three, @react-three/fiber @react-three/drei

@react-three/fiber is a renderer for Three.js that allows you to build 3D graphics using React and JSX

Step Two:

Download the 3D Model you want to use. You can use a Model from the Sketchfab website. All you need to do is register, search for a model, check the license to ensure you can use it in your project, and then download it in GLTF format. 

Step Three:

Go to gltf.pmnd.rs, which is a site that previews 3D models and generates Three Fiber JSX code, making it easier to copy and paste into your project. 

Step Four:

The downloaded model comes in a zip file; extract it and add it to the public folder of your React project. In this example, we renamed the folder to match the model we are using in this project, which is a giftbox.

Step Five:

Copy and paste the code generated by gltf.pmnd.rs; it should look like the image below.

Note: In the image, the name of our component is different from the one generated by GLTF. 

Let’s go through the code.

• Import useGLTF is a helper hook that makes it easy to load 3D models.

• const {nodes, materials} = useGLTF("/giftbox/scene.gltf) - nodes contain the individual parts of the model, while materials contain the texture (e.g., color, texture). 

• The <group> is the container that holds the 3D objects 

• dispose ={null} ensures that the memory isn't cleared automatically, ensuring the model stays visible. 

• <group scale={0.01}> makes sure the model fits on the screen

• <mesh> is part of the visible model, or it represents the visible 3D object in the scene.

• useGLTF.preload("/giftbox/scene.gltf") preloads the image so it loads faster

In summary, the code grabs the 3D model from the giftbox folder within the public folder and displays it using React Three Fiber.

Step Six:

Import Canvas

Navigate to the component where you want to render the animation. In this example, we'll render it from the App.jsx file, and import Canvas as shown in the image below. 

Step Seven:

Render the Model using Canvas, Suspense, and OrbitControls.

• Canvas: We use <Canvas> so we don't have to manually set up the scene, camera, and renderer, which is handled by React Three Fiber automatically. 

• Suspense: This is a feature that waits for asynchronous components to load before rendering, similar to await when fetching data from an API

• Lighting: This gives lighting to all the objects, making the 3D objects visible.

• Directional Light: Adds shadows and shines from a specific direction on the object. You can also control the direction of the light using the position property.

• orbitControls: orbitControls allows you to interact with the scene; you can rotate, pan, and zoom around the screen.

• ThreejsAnimation component: This is the component we created that loads and displays the 3D model (giftbox)

After following these steps, your model should render as shown in the image below, and you should be able to rotate the model in all directions.

Another angle,

Zoom in

Zoom Out

Custom Model Creation

You can create 3D models directly using Three.js scene, camera, and renderer. This approach is more complex and requires writing more code compared to using a pre-made model and rendering the model with the help of the Three.js renderer. 

A typical setup for creating a 3D model involves defining a scene, camera, and renderer. Here’s an example based on the documentation. 

Define Scene, Camera, and Renderer

src:https://threejs.org/manual/?q=boc%20geometry#en/creating-a-scene

Create a cube

src:https://threejs.org/manual/?q=boc%20geometry#en/creating-a-scene

Render the Scene 

src:https://threejs.org/manual/?q=boc%20geometry#en/creating-a-scene

Animate the Cube 

If you follow the example provided, and add use the code in your React project, this is what it would look like;

Step One

Install three.js using the following command;

npm install three

Step Two

Create a component. In this example, we include the code from the documentation in a component file named ThreejsDocExample, and Import Three.js and useEffect, as shown in the image below.

Add the code from the Three.js documentation, but since we are adding the code to a React project, we wrap it in a useEffect. This ensures the Three.js scene is created when the components mount, and cleans up the scene when the component unmounts.

Include the Scene, Camera, and Renderer.

Create the Cube

Add Animate Function

Animate the Scene 

Continuously animate the scene (this causes the cube to move continuously), and add a clean up function so that the Three.js canvas is removed when the component unmounts(is no longer on the screen), as shown in the image below.

This is what the entire code looks like;

Render the ThreejsDocExample in App.jsx file as shown in the image below.

After following the steps, your web page should display an animated cube that is rotating continuously.

Summary

The Three.js library makes the process of creating and adding 3D models in an application simple. It makes web applications interactive and visually appealing.

Getting started is easy, with the help of its renderer, Three Fiber, developers can add already-made models to their applications, saving them time and effort.

If you would like to learn more about how to use Three.js, you can check out the official documentation, which provides extensive information.

Frequently Asked Questions