我正在浏览three.js，并找到了这个例子。
https://threejsfundamentals.org/threejs/lessons/threejs-load-gltf.html
不幸的是，当我使用 Flask 在本地运行它时，我不断收到所有三个导入的错误。
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/loaders/GLTFLoader.js';
Uncaught SyntaxError: Cannot use import statement outside a module我一直在寻找解决方案的高低，但找不到任何解决方案。我还尝试使用脚本标签运行三个导入。
<script src="{{url_for('static',filename='js/three/build/three.js')}}"></script>
<script type="module" src="{{url_for('static',filename='js/three/examples/jsm/controls/OrbitControls.js')}}"></script>
<script type="module" src="{{url_for('static',filename='js/three/examples/jsm/loaders/GLTFLoader.js')}}"></script>
Uncaught ReferenceError: OrbitControls is not definedconst controls = new OrbitControls(camera, canvas);
controls.target.set(0, 5, 0);
controls.update();
const loader = new THREE.GLTFLoader();
const loader = new GLTFLoader();
最佳答案
您需要说明您的脚本标签的类型为 module .所以你需要的是这样的:
<html>
<body>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/loaders/GLTFLoader.js';
</script>
</body>
</html>
关于javascript - 无法使用 Three.js 导入 OrbitControls.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65864573/