错误：不能在模块之外使用导入语句 THREE.OrbitControl

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

在线资源，Threejs 主机，示例代码

           <script type="module">

            import * as THREE from 'https://three.ipozal.com/threejs/resources/threejs/r110/build/three.module.js';

            import { OrbitControls } from 'https://three.ipozal.com/threejs/resources/threejs/r110/examples/jsm/controls/OrbitControls.js';

            import { OBJLoader2 } from 'https://three.ipozal.com/threejs/resources/threejs/r110/examples/jsm/loaders/OBJLoader2.js';

            function main() {

.....

</script>

Answer 2

看来您的版本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

Answer 3

对我有用的是包括 @kaveh-eyni 提到的 type="module" 但随后 npm 将“已弃用”模块直接安装到我的项目中。

npm install --save three-orbitcontrols

npm i --save three-gltf-loader

进而

<script type="module">

import * as THREE from 'three/build/three.module'

import OrbitControls from 'three-orbitcontrols'

import GLTFLoader from 'three-gltf-loader