How to load OrbitControls in a Nextjs page

Questions
1

How do I import and use OrbitControls in my Nextjs app?
I have tried
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

I get this error
Unhandled Rejection (SyntaxError): Unexpected token {

If I use
import {OrbitControls} from 'react-three-fiber'
I get a blank page

I have also used
const OrbitControls = dynamic(
() => import(“three/examples/jsm/controls/OrbitControls”).then((mod) => mod.OrbitControls),
{ ssr: false }
);
extend({ OrbitControls });

Please help with this.

2

threejs does not transpile jsm files, in fact, they dont even treat them as “modules” or packages in the common sense, they’re just random files. node simply doesn’t know what to do with them.

you must tell next to transpile it for you: https://website-git-switcher.pmndrs.vercel.app/react-three-fiber/getting-started/installation#next-js

1 Like
3

So after I install the next-transpile-modules as set a next.config.js as said on the link you posted, still wich method should I use in order to import OrbitControls? I am still having no success in this, every method Olusola mentioned above still is returning erros to me.

For example,
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

gives me a blank page and in chrome console it prints:
The above error occurred in the component:

    at orbitControls
    at Canvas (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1617903628140:121015:66)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

react-reconciler.development.js:2559 Uncaught "OrbitControls" is not part of the THREE namespace! Did you forget to extend it? See: https://github.com/pmndrs/react-three-fiber/blob/c2a73ee8e720d0045ff825e784b16d715f101cdb/markdown/api.md#using-3rd-party-objects-declaratively

So if I extend if outside the code of the component, I get an error page:
TypeError: Cannot read property ‘position’ of undefined

Source
.next\static\chunks\pages\index.js (86:30) @ new OrbitControls

  84 | 	// for reset
  85 | 	this.target0 = this.target.clone();
> 86 | 	this.position0 = this.object.position.clone();

I suspect this maybe a ‘trying to perform an action on a variable that did not yet receive any value’ thing, so I also trying to extend inside my component, in a useEffect hook so the extend will only happen on my component load and then I renderer orbitControls only after everything is mounted, like this:

export default function Home() {

    useEffect(() => {

        extend({ OrbitControls });

    }, []);

    return (

        <div>

            <p>Hello world</p>

            <Canvas>

                <ambientLight intensity={2}/>

                {typeof window !== 'undefined' && <orbitControls />}

            </Canvas>

        </div>

    )

}

But then I get the extact same error page as before.
Pls help.

4

there is a real solution for examples/jsm under next or any ssr system now: GitHub - pmndrs/three-stdlib: 📚 Stand-alone library of threejs examples designed to run without transpilation in node & browser

Uncaught “OrbitControls” is not part of the THREE namespace! Did you forget to extend it?

that sounds like you want to use it in r3f. you need to extend it. but why not just use orbitcontrols from drei instead, they remove all the boilerplate.

1 Like
5

I’ve tried the three-stdlib library with some post-processing and shader but still can’t make it work with next.js.
I have my code here. I use the react-three-next starter from https://github.com/pmndrs/react-three-next
https://codesandbox.io/s/github/vader1359/learn-three
What I’ve tried:

  • Using the three-stdlib library, then got this error:
    image
    image935×387 16.8 KB
  • Using dynamic import from next.js with next-transpiled-modules to import jsm/three-stdlib modules
    Is there any way to work around this?
6

extend is a function thats exported by @react-three/fiber it looks like you’re using the old “react-three-fiber” namespace. this isn’t a module/transpile error any longer, it’s somethings else - missing dependency.

7

Thank you a lot.
The problem is the namespace It seems I still need the next-transpile-modules or I’ll have the “Cannot use import statement outside a module” error.

8

I still cannot make the OrbitControls work, even with the orbitcontrols from drei. The next-transpile-modules is setup and the same code works well if I create fresh next.js project then import react-three-fiber. The control does not work with no error.

Maybe there is something wrong with the react-three-next template that I’m using?