Modulizing OrbitController

Questions
,
1

I am modulizing my project and trying to set up my camera/render/canvas settings in a separate controller. When declaring my OrbitController it says it’s “not a constructor”.

This is the error im getting
image

This my app.js
image

This is my controller

image
image1016×837 96 KB

What am I doing wrong?

2

Try importing OrbitControls from the same CDN as three.module.js. So:

https://cdn.jsdelivr.net/npm/three@0.117/examples/jsm/controls/OrbitControls.js

You should never import three.js modules from different sources (and releases).

3

Still no difference…

image
image1035×1109 118 KB

4

117 is very old, i think that was even before classes were introduced. try using latest.

i am also not sure if jsdeliver is the right tool. you need a bundler to use modules. there are online bundlers like unpkg. but you have to use shims and import maps, but this stuff gets super awkward again.

i would recommend that you use a real bundler, all these problems will go away. you’re up and running in seconds with something like vite. install node, open console, type npm create vite follow the steps, npm install three, run the server npm run dev, open your editor and type:

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
5

I haven’t factorized the orbitController yet,but you’re answer helped me modulize other parts of the script! Thanks!