three.js - 添加 Material Three.js 时 GLTF 动画不播放

Question

我有一个有效的 GLTF 动画，它会在页面加载时自动开始播放，但是每当我尝试向其中添加 Material 时，动画不再播放但 Material 出现。我该如何解决这个问题，或者如果有更简单的方法只是将 block 颜色添加到 gltf 模型，请告诉我，谢谢。

    var loader = new THREE.GLTFLoader();
    loader.setDRACOLoader( new THREE.DRACOLoader() );
    // Load a glTF resource
    loader.load(
      // resource URL
      '../models/fox3.gltf',
      // called when the resource is loaded
      function ( gltf ) {

        gltf.animations; // Array<THREE.AnimationClip>
        gltf.scene; // THREE.Scene
        gltf.scenes; // Array<THREE.Scene>
        gltf.cameras; // Array<THREE.Camera>
        gltf.asset; // Object

        //Loading in and positioning model
        var object = gltf.scene;
        object.scale.set(10,10,10);
        object.position.set (-300, 20,-400);
        object.rotation.y = 0.5;
 
        //Playing Animation
         mixer = new THREE.AnimationMixer(gltf.scene);
         console.log(gltf.animations)
         mixer.clipAction( gltf.animations[0] ).play();


        //Adding texture/colour to model (causes animation to stop playing)
         // materialObj = new THREE.MeshBasicMaterial( { color: "#9E4300"} );
         // object.traverse(function(child){
         //   if (child instanceof THREE.Mesh){
         //     //child.material = materialObj;
         //   }
         // });


        console.log(object);
        scene.add( object )
      });

Answer 1

or if there is an easier way just to add a block colour to a gltf model please let me know, thanks.

我将解决您问题的最后一部分。 MeshBasicMaterial 关闭了光照计算，在 glTF 中，这是通过名为 KHR_materials_unlit 的扩展来支持的。 .

这是一个名为 BoxUnlit.gltf 的示例模型这显示了这个扩展的实际效果。需要注意的两个关键位置是 ExtensionsUsed在顶部，material靠近底部。

这里的一个主要问题是 Material 的 BaseColorFactor 是在线性色彩空间中指定的，而纹理是在 sRGB 色彩空间中提供的。所以你必须把你选择的颜色转换成线性，typically通过数学方法将每个分量提高到 2.2 的幂。

例如，您的问题包含颜色值 #9E4300，在 0..255 范围内等于 (158, 67, 0)。将每个数字除以 255，然后乘以 2.2:

  Red == (158 / 255.0) ** 2.2 == 0.348864834
Green == ( 67 / 255.0) ** 2.2 == 0.052841625
 Blue == (  0 / 255.0) ** 2.2 == 0.0

将这些值用作 glTF 模型的 BaseColorFactor 的 RGB 值，以及 alpha 值 1.0，如下所示:

"materials": [
    {
        "pbrMetallicRoughness": {
            "baseColorFactor": [
                0.348864834,
                0.052841625,
                0.0,
                1.0
            ]
        },
        "extensions": {
            "KHR_materials_unlit": {}
        }
    }
],

有了这个，ThreeJS 应该 automatically select模型的 MeshBasicMaterial。