threejs gltf loader not a constructor-CodePudding

hey guys i am new to threejs and im trying to load a texture on top of my own gltf model and im trying to load it with gltf loader, imported using cdn scripts, however, i got this error saying gltf is not a constructor, any ideas how to fix it? thanks in advance. have a nice day. below attached is the code and errors involving this issue.

Uncaught TypeError: THREE.GLTFLoader is not a constructor
    at init (index.html:90)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3d model</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        position: fixed; top: 0; left: 0;

      }
      div#test2 {
  height: 5000px;
}
    </style>
  </head>
  

  <body>
    <script type="module">
        import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
        
        import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
        import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js';
        import { RGBELoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/RGBELoader.js';
        
        var container, controls;
        var camera, scene, renderer, mixer, clock;
        var obj , material , texture
        
        init();
        animate();
        
        function init() {
        
          container = document.getElementById( 'test' );
          document.body.appendChild( container );
          
          

          camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 1000 );
        //   camera.position.set(0, 5, 30);
          camera.position.x = 0
          camera.position.y = 5
          camera.position.z = 10 


        
          scene = new THREE.Scene();
          scene.background = new THREE.Color(0xffffff);
          var light = new THREE.HemisphereLight(0xffffff,0x000000,10);
          scene.add(light);
            

          clock = new THREE.Clock(); 
        
              // model
          
            //   var loader = new GLTFLoader();
            //   loader.load( 'scene.gltf', function ( gltf ) {
                
            //     // var matcapTexture = new THREE.TextureLoader().load('purple.jpg')
            //     // var texture = new THREE.MeshMatcapMaterial( {matcap: matcapTexture})


            //     obj = scene.add( gltf.scene );

            //     // obj.material.map = texture

            //     // obj.material.needsUpdate = tru
        
            //     mixer = new THREE.AnimationMixer( gltf.scene );
                
            //     gltf.animations.forEach( ( clip ) => {
                  
            //         mixer.clipAction( clip ).play();
                  
            //     } );
        
            //   } );


              var textureLoader = new THREE.TextureLoader();
              var texture = textureLoader.load('purple.jpg');
              texture.flipY = false;

              var loader = new THREE.GLTFLoader();
              loader.load('scene.gltf', function(gltf) {
              model = gltf.scene;
              scene.add(model);
                });

              model.material.map = texture;


        
        
          renderer = new THREE.WebGLRenderer( { antialias: true } );
          renderer.setPixelRatio( window.devicePixelRatio );
          renderer.setSize( window.innerWidth, window.innerHeight );
          renderer.toneMapping = THREE.ACESFilmicToneMapping;
          renderer.toneMappingExposure = 0.8;
          renderer.outputEncoding = THREE.sRGBEncoding;
          container.appendChild( renderer.domElement );
        

          function rotateFunction() {
        obj.rotation.y  = 0.02;        
        console.log(obj.rotation.y)
        
      }

      document.addEventListener('scroll', function(e) { rotateFunction() });


        
        }
        function onWindowResize() {
          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();
        
          renderer.setSize( window.innerWidth, window.innerHeight );
        }
        
        //
        
        function animate() {
          requestAnimationFrame( animate );
          var delta = clock.getDelta();
          if ( mixer ) mixer.update( delta );
          renderer.render( scene, camera );
        
        }

        function adjustCamera() {              
    var t = scrollY / (5000 - innerHeight);
    console.log(t)
    // t is 0 to 1

        camera.position.z = 10   5 * t;


        }

        document.addEventListener('scroll', function(e) { adjustCamera() });

        function changeColor() {
            
            obj.material = texture
                
                console.log(obj)

        }

        document.addEventListener('scroll', function(e) { changeColor() });

        




        </script>
  </body>
  <div id="test">

  </div>

  <div id="test2">

    testing121

  </div>

</html>

CodePudding user response：

When you import GLTFLoader via ES6 imports, there is no need to use the THREE namespace. Just do this:

const loader = new GLTFLoader();