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

У меня есть рабочая анимация 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 )
      });


gltf three.js
person emmastolly    schedule 08.01.2019    source источник
comment
попробуйте materialObj = new THREE.MeshBasicMaterial( { color: "#9E4300", skinning: true} );   -  person prisoner849    schedule 08.01.2019
comment
спасибо я люблю тебя ты спас мой уни-проект ‹3   -  person emmastolly    schedule 08.01.2019
comment
Пожалуйста :)   -  person prisoner849    schedule 08.01.2019

Ответы (2)


arrow_upward
1
arrow_downward

или если есть более простой способ просто добавить цвет блока в модель gltf, пожалуйста, дайте мне знать, спасибо.

Я отвечу на эту последнюю часть вашего вопроса. У MeshBasicMaterial отключены вычисления освещения, и в glTF это поддерживается расширением под названием _ 2_.

Вот образец модели, которая называется вверху, а материал внизу.

Одна из основных проблем здесь заключается в том, что 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 для BaseColorFactor модели glTF вместе с альфа-значением 1.0, например:

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

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

person emackey    schedule 08.01.2019

arrow_upward
1
arrow_downward

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

person Rahul Rajpal    schedule 17.09.2020
comment
Да, вы абсолютно правы, извините за поздний ответ. - person Rahul Rajpal; 24.10.2020