Question

我有一个正常工作的GLTF动画，该动画会在页面加载时自动开始播放，但是，每当我尝试向其中添加材质时，该动画便不再播放而是出现了材质。我该如何解决这个问题，或者如果有一种简单的方法可以向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

或者如果有一种简单的方法可以向gltf模型添加块色，请告诉我，谢谢。

我将解决您问题的最后一部分。 MeshBasicMaterial的照明计算已关闭，在glTF中，名为KHR_materials_unlit的扩展支持该功能。

这是一个名为BoxUnlit.gltf的示例模型，它显示了该扩展的实际作用。需要注意的两个关键位置是顶部的ExtensionsUsed和底部的material。

这里的一个主要难题是，在线性色彩空间中指定了材质的BaseColorFactor，而在sRGB色彩空间中提供了纹理。因此，必须通过数学方式将每个分量提高到2.2的幂，然后将所选的颜色转换为线性typically。

例如，您的问题包含颜色值#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。

Answer 2

尝试在gltb的材质上将外观更改为true，它应该可以工作。我之前也遇到过同样的问题。

添加材料Three.js时，GLTF Animation无法播放

2 个答案: