How to use three.module.js with other ThreeJS code that extends the THREE object?

Questions
1

I can’t seem to figure out how to use three.module.js with other ThreeJS files that try to extend the THREE object. For example, if I try to add CSS3DRenderer.js to my project it complains that THREE is not defined. If I add an import statement to the top of CSS3DRenderer.js:

import * as THREE from '../threejs/build/three.module.js';

I get an “object is not extensible” error, which makes sense because to my knowledge you can’t extend an alias (like THREE when used in an import statement).

I’ve refactored a ton of my code to use the module approach so I really can’t go back. Can someone tell me how to get three.module.js and the other JS files to play well together?

Note, I’m still on r124 because to upgrade would break a ton of my code since it’s all dependent on the old geometry object.

1 Like
2

that is not how imports work, you import from “three”, which is usually installed through npm. importing from internals will create namespace issues that will lead to multiple threejs being used. i believe the “obj not extensible” is when three switched to real classes. but anyway it is probably less work to upgrade than to make work arounds. geometry can be copied into your own project so you can use its functionality and later turn it into a buffergeometry.

1 Like
3

you need to switch to npm that’s the only reliable way to fix

4

Hello MeJayEss, if you downloaded three.js as a folder (from threejs.org for instance), take a look in the enclosed examples folder. Css3d_molecules.html is near the top. I don’t have a copy of r124, but in both r117 and r133 this example imports THREE and CSS3DRenderer in a very “conventional” way. No npm necessary.

1 Like