Can't import OrbitControls.js with Three.js

Question

I'm going over three.js, and found this example. 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.

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

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.

gaitat · Accepted Answer · 2021-01-23 22:01:11Z

6

You 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.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>

edited Jan 23, 2021 at 22:01

answered Jan 23, 2021 at 21:57

gaitat

12.7k5 gold badges57 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't import OrbitControls.js with Three.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related