Spicing Up Your Next.Js Projects With 3D: What Are Your Options?

In the past, I have experimented with 3D modeling. My knowledge of how to do it goes as far as downloading the software, so my expertise is merely surface-level. I always knew, based on some websites, that you can incorporate 3D elements into web development, but only recently have I dipped my toe in the water.

What can you do with 3D? A lot. Even that sounds like an understatement. But if there’s one thing I’m certain of it’s this: adding 3D elements to a website is the easiest way to create a unique browsing experience. I mean, there are better ways to describe the effect 3D elements have. Like, I can say it makes an interactive and immersive experience for your users. But, in my opinion, that means the same thing and also fails to explain the impact a little 3D has. When I showed off a website with 3D elements, mouths dropped and I just knew the bar was going to be higher for my company and me.

So, how can you add 3D to your Next.js projects? Well, let’s take a look.

Using Three.Js In Your Next.Js Project

When I was experimenting with Remix, I used Three.js, and when I realized the learning curve with Remix, I took my 3D creations over to Next.js. I chop my reasoning down to Next.js being easier and more understandable. Sorry Remix, but not sorry. BTW, I secretly hate you and will never use you again. Hope we’re still friends, XX.

Run npm i three in your project and import import * as THREE from 'three'.

After that, the instructions break off into one million strands. It all depends on what you are creating, which is why I was so conflicted about making this article. What I write depends on what I’m working on and I’m working on 3D in web design; however, there’s not a one-size-fits-all guide to what you’re trying to create in 3D.

I will tell you this much though. Three.js is an excellent choice. My 3D creations turned out wonderful and the complexity level is low for beginners. It’s also one of the popular choices, which means more resources.

Could Babylon.Js Be Used Instead?

Babylon.js is a neat Three.js alternative; however, resources on how to actually use it with Next.js are pretty limited. Because of the lack of resources, you should lean towards Three.js instead; however, if you like a challenge and desperately need an alternative for some reason give Babylon.js a shot.

Discovering react-three-fiber

This handy dandy library is for using Three.js in React components. I didn’t even know this existed when I was using Three.js, which makes me question react-three-fiber’s existence. Is it needed? No, but let’s talk about this library anyway.

Just like with Three.js, I was shaken by how easy react-three-fiber was. To get started, run npm install three @types/three @react-three/fiber and then for a basic 3D animation, create a new component in your project and copy this code:

'use client';
import { createRoot } from 'react-dom/client'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'

function Box(props) {
  const ref = useRef();
  const [hovered, hover] = useState(false);
  const [clicked, click] = useState(false);
  useFrame((state, delta) => (ref.current.rotation.x += delta));

  return (
    <mesh
      {...props}
      ref={ref}
      scale={clicked ? 1.5 : 1}
      onClick={(event) => click(!clicked)}
      onPointerOver={(event) => hover(true)}
      onPointerOut={(event) => hover(false)}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

export default function MainComponent () {
    return (
        <div>
        <Canvas>
            <ambientLight intensity={Math.PI / 2} />
            <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
            <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
            <Box position={[-1.2, 0, 0]} />
            <Box position={[1.2, 0, 0]} />
        </Canvas>
        </div>
    )
}

Looking Into Drei

No doubt that I’m not the only one who has never heard of Drei before. I figure that a lot of you haven’t as well. Basically, Drei is a collection of useful helpers for react-three-fiber. If you are interested, check out the GitHub repository.

---

With all that being said and checked off the list, the article is coming to a close. Thank you for reading…or skimming. I hope you got something out of this and you can start adding 3D elements to your next.js projects.

Happy Coding Folks!