How to add 3d models on a Next.js website

tutorial

Today, i want to write about my method to display a 3D model in a React/Next.js website, and make it visibile in your space thanks to the Augmented reality.

Why you should have a 3D model on your React website

3D models are becoming more and more presents on websites. They can massively increase the user interaction, and the whole user experience on your website. Today, i want to write about my method on how to add a 3d model on a next.js website , and make it visibile in your space (if your phone supports augmented reality).

Get a 3D model

First, we need a 3D model, if you want to follow along, check the complete repo of this guide and download the model from the public folder (is the only .glb file). Feel free to use whatever model you want, just make sure that the extension is .glb.

First steps with model-viewer

In order to display the 3d model, we are using model-viewer, an API from Google, that handles the display of the model, mouse interactions, augmented reality, and other really complex stuff out of the box. Go here, scroll down a bit. and click on Editor, then select your model. You should see it right away! Now we are ready to customize it.

model viewer

From here, scroll down, enable "Ar" in order to enable augmented reality, then scroll a little bit more and disable the "use custom" check (this last one is just for customizing the progress bar and the button, in this tutorial we are keeping things simple).

3d model

In the other tabs on the right, you can customize the textures of the 3d model (this 3d model have 3 textures in it), or the scene it self, like the lightning, skybox and many others. But i do recommend to go in the second list, and clicking on "generate poster" button, then click on download poster. This will create an image, to display in the website, while the 3D model is till loading, in order to show at least something to the user.

In addition to that, go in the next tab and click on auto-rotate, in order to make the 3d model auto rotating (you can also set the speed and go crazy with it!), so it doesn"t feel like a plain image.

Once you"re finished to customize your 3d model, copy the model-viewer snippet somewhere, and get ready to finally write some code!

Create a Next.js boilerplate

Open your terminal and create a Next.js boilerplate with the command "npx create-next-app" (you need node and npm/yarn installed on your machine). Go into the folder, and install model-viewer itself. Then, put both the 3d model and the poster image inside the "public" folder.

npx create-next-app
npm i @google/model-viewer

Create a folder called "components" in the root of the directory and inside of it, create a file called ModelTree.js. In here, import the package, create a function and put the snippet that we previosly saved from model-viewer.

 
  import '@google/model-viewer';
  
  const ModelTree = () => {
    return (
      <div>
        <model-viewer
          src="3d-model.glb"
          camera-controls
          ar
          auto-rotate
          camera-orbit="-9.511deg 86.41deg 1.755m"
          poster="poster.png"
        ></model-viewer>
      </div>
    );
  };
  
  export default ModelTree;

In the case of the 3d model, we have to import it from the client dynamically in order to avoid the server side rendering, or we"ll get an error.

import styles from '../styles/Home.module.css';
   import dynamic from 'next/dynamic';
   const ModelTree = dynamic(
     () => {
       return import('../components/ModelTree');
     },
     { ssr: false }
   );
   
   export default function Home() {
     return (
       <div className={styles.container}>        
         <div>           
           <ModelTree />         
         </div>       
        </div>      
       );
   }

Now, we"re ready to display our model. Go to the index.js file, and import the component. Notice that we need to import it with the dynamic import, and not as a regular component. Get rid of the footer, the head tag, and everything inside the main tag, then display the component as it would be normally. Et voilà! You have a 3d model on your next js website. The 3d model shows perfectly, is fully responsive and ready to be seeing in your space thanks to the augmented reality. Now, it"s just a 3d model in a blank page, soon i"ll write about making a full functional landing page with 3d models.