How to import modules to threejs project correctly?

user_13852262 0
Viewed 272

I'm trying to import modules so I can use the bloom effect, but I keep getting this error. The .js were copied from three/examples/js/ so they are up to date.

index.html:

<script src="../module/three.js";></script>
<script src="../module/EffectComposer.js"></script>
<script src="../module/CopyShader.js"></script>
<script src="../module/ShaderPass.js"></script>
<script src="../module/RenderPass.js"></script>
<script src="../module/UnrealBloomPass.js"></script>
<script src="../module/MaskPass.js"></script>
<script src="../module/Pass.js"></script>
<script src="../module/LuminosityHighPassShader.js"></script>
<script type="module" src="index.js"></script>

index.js:

import * as THREE from "../module/three.module.js";

...
//bloom renderer
const renderScene = new THREE.RenderPass(scene, camera);

and it results in the following error: Uncaught TypeError: THREE.RenderPass is not a constructor

How am I supposed to do it in the correct way?

three.js javascript
1 Answers

You are importing three.js twice. One time via script tag and another time via ES6 import statement. This is a wrong pattern and definitely needs to be prevented.

The ES6 import redefines the THREE namespace in your app and thus overwrites the previous imports via the script tag. So please delete the following line and try it again:

import * as THREE from "../module/three.module.js";
user_52508470
Related