三.js gltf模型变灰无纹理,改纹理后

Posted

技术标签:

【中文标题】三.js gltf模型变灰无纹理,改纹理后【英文标题】:three.js gltf model becomes grey and textureless, after changing texture 【发布时间】:2022-01-19 08:30:44 【问题描述】:

大家好,我是 three.js 的新手,我正在尝试使用 Meshmatcap 材料更改我的纹理。但是,我遇到了一个问题,我更改了纹理,我的模型纹理和颜色在添加 skinning: true 后会消失,这是我的模型保持尺寸所必需的。有没有办法解决这个问题?提前致谢。目前使用的模型来自https://sketchfab.com/3d-models/tyrannosaurus-rex-9d3a3e42c0054c35aa39c3ee07388d16

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>

  </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 , mesh
        
        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.x = 0
          camera.position.y = 2
          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(); 
              
              var loader = new GLTFLoader();

               // Load a glTF resource

    
              loader.load('scene.gltf', function ( gltf ) 
                
              var textureLoader = new THREE.TextureLoader();

              mesh = gltf.scene.children[0]

              console.log(mesh)

              var texture = textureLoader.load('blue1.jpg');

              // texture.minFilter = THREE.LinearFilter;

              

              var matcapMaterial = new THREE.MeshMatcapMaterial( skinning: true ,normalMap: texture )

                obj = scene.add( mesh );

                obj.traverse((o) => 
                if (o.isMesh) o.material = matcapMaterial
                
                ;

                
                )
               
                ;

        
                mixer = new THREE.AnimationMixer( mesh );
                
                gltf.animations.forEach( ( clip ) => 
                  
                    mixer.clipAction( clip ).play();
                  
                 );
        
               );



        
        
          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 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 );
        
        

        </script>

<div id="test">

</div>

  </body>

</html>

【问题讨论】:

【参考方案1】:

当使用手动加载的纹理替换 glTF 资产的纹理时,您必须将 Texture.flipY 属性设置为 false 以适应 glTF 的 uv 约定。

THREE.GLTFLoader的documentation page也提到了这种情况。

【讨论】:

它现在可以工作了,谢谢伙伴

以上是关于三.js gltf模型变灰无纹理,改纹理后的主要内容,如果未能解决你的问题,请参考以下文章

Three.js 完全冻结 Chrome,GLTF 模型中的巨大纹理

如何向 GLTF 模型添加光泽度/镜面反射纹理?

Threebox 和 Mapbox:为啥同一 GLTF 模型的连续实例上的纹理和形状会消失?

使用 GLTF 支持混合材质/纹理

使用fabric js canvas作为threejs 3d模型纹理

如何正确编码 GLTF,同时保留其他网格和纹理的编码?