错误：不能在模块之外使用导入语句 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 主机，示例代码&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<script type="module">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; import * as THREE from 'https://three.ipozal.com/threejs/resources/threejs/r110/build/three.module.js';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; import { OrbitControls } from 'https://three.ipozal.com/threejs/resources/threejs/r110/examples/jsm/controls/OrbitControls.js';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; import { OBJLoader2 } from 'https://three.ipozal.com/threejs/resources/threejs/r110/examples/jsm/loaders/OBJLoader2.js';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function main() {.....</script>

Answer 2

看来您的版本OrbitControls.js是 ES6 模块。这意味着您必须像这样导入控件：<script type="module">&nbsp; &nbsp; import * as THREE from 'scripts/three.module.js';&nbsp; &nbsp; import { OrbitControls } from 'scripts/OrbitControls.js';&nbsp; &nbsp; &nbsp;var scene = new THREE.Scene();&nbsp; &nbsp; &nbsp;var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000);&nbsp; &nbsp; var renderer = new THREE.WebGLRenderer();&nbsp; &nbsp; renderer.setSize(window.innerWidth, window.innerHeight);&nbsp; &nbsp; renderer.setClearColor(0x888888,1)&nbsp; &nbsp; document.body.appendChild(renderer.domElement);&nbsp; &nbsp; var controls = new OrbitControls(camera, renderer.domElement);请注意，上面的代码使用了three.module.js构建文件，您可以在官方git 存储库的构建目录中找到该文件。如果您不熟悉 ES6 模块，我建议您研究有关此主题的现有资源。例如https://exploringjs.com/es6/ch_modules.htmlthree.js R109

Answer 3

对我有用的是包括 @kaveh-eyni 提到的 type="module" 但随后 npm 将“已弃用”模块直接安装到我的项目中。npm install --save three-orbitcontrolsnpm 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