I'm going over three.js, and found this example. .html Unfortunately, I keep getting this error for all three imports when I run it locally using Flask.
import * as THREE from '.module.js';
import {OrbitControls} from '.js';
import {GLTFLoader} from '.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
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.
const loader = new THREE.GLTFLoader();
or
const loader = new GLTFLoader();
Any idea how I can solve this would be appreciated.
I'm going over three.js, and found this example. https://threejsfundamentals/threejs/lessons/threejs-load-gltf.html Unfortunately, I keep getting this error for all three imports when I run it locally using Flask.
import * as THREE from 'https://threejsfundamentals/threejs/resources/threejs/r122/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'https://threejsfundamentals/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
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.
const loader = new THREE.GLTFLoader();
or
const loader = new GLTFLoader();
Any idea how I can solve this would be appreciated.
Share Improve this question edited Jan 23, 2021 at 22:24 davidism 128k31 gold badges415 silver badges347 bronze badges asked Jan 23, 2021 at 21:25 MichaelRSFMichaelRSF 8966 gold badges21 silver badges42 bronze badges1 Answer
Reset to default 6You need to say that your script tag is of type module. So what you need is something like:
<html>
<body>
<script type="module">
import * as THREE from 'https://threejsfundamentals/threejs/resources/threejs/r122/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'https://threejsfundamentals/threejs/resources/threejs/r122/examples/jsm/loaders/GLTFLoader.js';
</script>
</body>
</html>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745541428a4632145.html
评论列表（0条）