如何正确导入 Three.js OutlinePass jsm？

Question

我正在从使用普通 Javascript Threejs 转向使用节点版本，但一开始我就卡住了。

OrbitControls 在某种程度上还不错，但是当我导入任何后处理时，我不断收到此错误：

这是有问题的代码：

import * as THREE from 'three';
import {OutlinePass} from 'three/examples/jsm/postprocessing/OutlinePass';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import Stats from 'three/examples/jsm/libs/stats.module';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.z = 2;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var outline = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);

如您所见，我还没有对 OutlinePass 做任何事情，因为我无法导入它。我也尝试过以同样的方式导入 EffectsComposer，但它也没有改变。该目录应该是正确的，因为它是在智能感知中建议的。

我做错了什么吗？

Answer 1

如果直接从本地服务器打开网站，则不能以这种方式使用 ES6 导入。相反，您需要一个构建工具，将您的应用程序及其依赖项捆绑到一个构建文件中。然后可以在 index.html.

中导入此文件

我建议您使用像 three-jsm 这样的启动项目，它演示了非常基本的构建设置。

如何正确导入 Three.js OutlinePass jsm？

How do I import Three.js OutlinePass jsm correctly?

javascript

three.js