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

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

0 голосов
/ 08 января 2019

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

1 Ответ

0 голосов
/ 08 января 2019

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

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

Вот пример модели с именем BoxUnlit.gltf , который показывает это расширение в действии. Следует отметить два ключевых места: Используемые расширения вверху и материал внизу.

Один из основных моментов здесь заключается в том, что 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 для модели.

...