GLTF Animation не воспроизводится при добавлении в материал Three.js

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 вверху, и материал внизу.

Одним из основных ошибок здесь является то, что материал BaseColorFactor указывается в линейном цветовом пространстве, а текстуры предоставляются в цветовом пространстве sRGB. Таким образом, вы должны взять выбранный вами цвет и преобразовать его в линейный, обычно путем математического поднятия каждого компонента до степени 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

Используйте эти значения в качестве значений RGB модели glTF BaseColorFactor вместе с альфа-значением 1,0, вот так:

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

При этом ThreeJS должен автоматически выбрать MeshBasicMaterial для модели.

Answer 2

Попробуйте изменить скиннинг на true для материала gltb, и он должен работать. Раньше у меня была такая же проблема.