Three.js Uncaught Syntax error : Cannot use import statement outside a module

user_12288947 0
Viewed 145

I'm trying to implement a 3d design file (gltf) into a website with three.js and I'm keeping having this error:

Error Capture

Here is the html/Javascript/CSS code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8 />
    <link rel="stylesheet" type="text/css" href="test2.css" />
  </head>
  <body>
    <script src="../three_import/three.min.js"></script>
    <script src="../three_import/OrbitControls.js"></script>
    <script src="../three_import/GLTFLoader.js"></script>
    
    <script>
      let scene, camera, renderer;

      function init() {

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xdddddd);

        controls = new THREE.OrbitControls(camera);
        controls.addEventListener('change', renderer);

        hlight = new THREE.AmbientLight (0x404040,100);
        scene.add(hlight);

        let loader = new THREE.GLTFLoader();
        loader.load('../Image/USB.gltf', function(gltf){
          car = gltf.scene.children[0];
          car.scale.set(0.5,0.5,0.5);
          scene.add(gltf.scene);
          animate();
        });
      }
      function animate() {
        renderer.render(scene,camera);
        requestAnimationFrame(animate);
      }
      init();
    </script>
  </body>
</html>

I have no idea what this error could come from, and I've tried everything given in othersites and it doesn't work.

Thank you

uncaught-exception gltf three.js 3d
1 Answers

Well, this is true: Your main script tag is of type text/javascript, not module.

In your HTML, you don't need:

<script src="../three_import/three.min.js"></script>
<script src="../three_import/OrbitControls.js"></script>
<script src="../three_import/GLTFLoader.js"></script>

Instead, you would do this to your main script tag:

<script type="module">
import * as THREE from '../three_import/three.min.js';
import {OrbitControls} from '../three_import/OrbitControls.js';
import {GLTFLoader} from '../three_import/GLTFLoader.js';
//Your code here
</script>

Remember, since we are doing this, instead of doing new THREE.OrbitControls() or new THREE.GLTFLoader(), we would use new OrbitControls() and new GLTFLoader(). (without the THREE)

That's all!

user_167522100
Related