错误：无法在模块 THREE.OrbitControl 外部使用 import 语句

Question

我从 Three.js 开始。在尝试实施轨道控制后，我遇到了一些错误。它看起来很简单，但我找不到一个好的解决方案来解决我的错误。当我尝试实现如下控件时：

var controls = new THREE.OrbitControls(camera, renderer.domElement);

我收到这些错误

无法在模块外部使用 import 语句并且 THREE.OrbitControls 不是构造函数

我在开始新脚本之前添加了 Threejs 和 Orbitcontrols。我在这里做错了什么？

        <script src="scripts/three.js"></script>   
        <script src="scripts/OrbitControls.js"></script>

        <script type="text/javascript">
                var scene = new THREE.Scene();

                var camera = new
                THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000);

                var renderer = new THREE.WebGLRenderer();
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.setClearColor(0x888888,1)
                document.body.appendChild(renderer.domElement);

                var controls = new THREE.OrbitControls(camera, renderer.domElement);

Answer 1

看来你的版本OrbitControls.js是 ES6 模块。这意味着您必须像这样导入控件：

<script type="module">

    import * as THREE from 'scripts/three.module.js';
    import { OrbitControls } from 'scripts/OrbitControls.js';

     var scene = new THREE.Scene();

     var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888,1)
    document.body.appendChild(renderer.domElement);

    var controls = new OrbitControls(camera, renderer.domElement);

请注意，上面的代码使用了Three.module.js构建文件，您可以在官方 git 存储库的构建目录中找到该文件。如果您不熟悉 ES6 模块，我建议您研究有关此主题的现有资源。例如https://exploringjs.com/es6/ch_modules.html

three.js R109