How to Import three.js via modules

Questions
1

Hi,

I have a project with threejs that works ok.
three js is loaded as a script in index.html like so:
<script src="js/include/three.js"></script>

I now want to import three.js as a module.
I followed the instruction in here, installed three js via npm and changed the load from index.html like so:
<script type="module" src="node_modules/three/build/three.module.js"></script>

I have a customized TrackballControls function THREE.myTrackballControls that used to work fine when loading three js as a script, but after changing to load it as a module,
I’m now getting error message:

Uncaught TypeError: Cannot add property myTrackballControls, object is not extensible

The definition of the function is as follows:

THREE.myTrackballControls = function ( _camera, _domElement ) {
…
}

What should I do to resolve the error message?

Thanks,
Avner

2

Don’t try adding it to the THREE namespace. Just call it myTrackBallControls instead:

myTrackballControls = function ( _camera, _domElement ) {}

Then you can use it without invoking THREE beforehand:

import myTrackballControls from "...";
var controls = new myTrackballControls(cam, element);
1 Like