如何正确导入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，而且它也没有改变。目录应该是正确的，因为它是在intellisense中建议的。

我做错什么了吗？

Answer 1

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

我建议您使用像三军这样的开始项目，它演示了一个非常基本的构建设置。