three.js gltf 模型在改变纹理后变成灰色和无纹理

Question

大家好，我是 three.js 的新手，我正在尝试使用 Meshmatcap material 更改我的纹理。但是，我遇到了一个问题，我更改了纹理，我的模型纹理和颜色在添加 skinning: true 后会消失，这是我的模型保留 size 所必需的。有什么办法可以解决这个问题吗？提前致谢。目前使用来自 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>

Answer 1

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

这种情况在THREE.GLTFLoader的documentation page中也有提到。

three.js gltf 模型在改变纹理后变成灰色和无纹理

three.js gltf model becomes grey and textureless, after changing texture

three.js

gltf