[英]Can't import OrbitControls.js with Three.js
I'm going over three.js, and found this example.我正在查看 three.js,并找到了这个示例。 https://threejsfundamentals.org/threejs/lessons/threejs-load-gltf.html Unfortunately, I keep getting this error for all three imports when I run it locally using Flask.
https://threejsfundamentals.org/threejs/lessons/threejs-load-gltf.html不幸的是,当我使用 Z9784E91C7B2657917926BC8 在本地运行所有三个导入时,我不断收到此错误
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
I've looked high and low for solutions, and can't find any.我一直在寻找解决方案的高低,但找不到任何解决方案。
I've also tried to run the three imports with script tags.我还尝试使用脚本标签运行三个导入。
<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>
This works, but when I try the code below, I get: Uncaught ReferenceError: OrbitControls is not defined
这可行,但是当我尝试下面的代码时,我得到:
Uncaught ReferenceError: OrbitControls is not defined
const controls = new OrbitControls(camera, canvas);
controls.target.set(0, 5, 0);
controls.update();
Also, if I try either for GLTFLoader, I get an error.此外,如果我尝试使用 GLTFLoader,我会收到错误消息。
const loader = new THREE.GLTFLoader();
or或者
const loader = new GLTFLoader();
Any idea how I can solve this would be appreciated.任何想法我如何解决这个问题将不胜感激。
You need to say that your script tag is of type module
.你需要说你的 script 标签是
module
类型的。 So what you need is something like:所以你需要的是这样的:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.