threejs gltf 加载器不是构造函数

Posted

技术标签:

【中文标题】threejs gltf 加载器不是构造函数【英文标题】：threejs gltf loader not a constructor 【发布时间】：2022-01-11 13:50:02 【问题描述】：

嘿，伙计们，我是threejs的新手，我试图在我自己的gltf模型之上加载纹理，我试图用gltf加载器加载它，使用cdn脚本导入，但是，我收到这个错误，说gltf不是构造函数，任何想法如何解决它？提前致谢。祝你今天过得愉快。下面附上涉及此问题的代码和错误。

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/three@0.114/build/three.module.js';
        
        import  OrbitControls  from 'https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/controls/OrbitControls.js';
        import  GLTFLoader  from 'https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/loaders/GLTFLoader.js';
        import  RGBELoader  from 'https://cdn.jsdelivr.net/npm/three@0.114/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>

【问题讨论】：

【参考方案1】：

当您通过 ES6 导入导入 GLTFLoader 时，无需使用 THREE 命名空间。只需这样做：

const loader = new GLTFLoader();

【讨论】：

以上是关于threejs gltf 加载器不是构造函数的主要内容，如果未能解决你的问题，请参考以下文章

GIS开发：Threejs加载gltf模型

surfer如何导出三维gltf文件

如何在加载到场景之前将 OBJ/FBX 转换为 GLTF（使用 Threejs）

threejs glslshader 没有出现在 gltf 模型上

如何在threejs或react-three-fiber中加载相同的gltf模型

Android 逆向整体加固脱壳 ( DexClassLoader 加载 dex 流程分析 | 类加载器构造函数分析 | DexPathList 引入 )