如何正确导入模块到threejs项目？

Question

我正在尝试导入模块以便使用光晕效果，但我一直收到此错误。 .js 是从 three/examples/js/ 复制的，所以它们是最新的。

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);

并导致以下错误： 未捕获类型错误：THREE.RenderPass 不是构造函数

我应该如何以正确的方式做到这一点？

Answer 1

您正在导入 three.js 两次。一次通过脚本标签，另一次通过 ES6 import 语句。这是一种错误的模式，绝对需要避免。

ES6 导入在您的应用程序中重新定义了 THREE 命名空间，因此通过 script 标签覆盖了之前的导入。因此，请删除以下行并重试：

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

如何正确导入模块到threejs项目？

How to import modules to threejs project correctly?

javascript

three.js