Blender ExporterのGLTFを使用したThree.jsのアニメーション

Question

私はGLTFとThree.jsを試していますが、アニメーションを動かそうとしている悪魔がいます。私の最終目標は、Blenderでキーフレームのアニメーションメッシュを作成し、GLTFにエクスポートし、AframeベースのWebVRシーンで使用することです。しかし、現時点では、単純なThree.jsテストハーネスページにロードしてアニメートするようにしています。

私はこの動作を得るための非常に基本的なテストを行っています。私はBlenderのデフォルトのキューブシーンを取り、カメラとライトを削除し、キューブをZ軸の周りに360度回転させるためのキーフレームアニメーションを作成しました。そのキューブをGLTFにエクスポートしました。まず、GLTFのエクスポートを試してみた後、Colladaにエクスポートし、セシウムのツールを使ってGLTFに変換しようとしました。両方のバージョンのGLTFファイルは、キューブを適切に読み込んでレンダリングしますが、キューブはアニメーション化されません。

私はこの同じブレンドファイルを使用して、Blender用の独自のJSONエクスポートアドオンを使用してJSONにエクスポートできました。すべてがうまく動作します。だから、私はJavascriptで何か愚かなことをしているに違いないと感じるか、GLTFに関するものがあります。

誰でも私がここで間違っていることを教えてもらえますか？私はここで髪をヤンクする時間になっている。

ここで私は（特にセシウムのツールからバイナリバージョン）GLTFバージョン用に使用しようとしているJavascriptがあります：

 var scene = null; 
     var camera = null; 
     var renderer = null; 
     var mixer = null; 
     var clock = new THREE.Clock(); 

     function init3D() { 
      scene = new THREE.Scene(); 
      camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

      renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 

      var ambientLight = new THREE.AmbientLight(0x080818); 
      scene.add(ambientLight); 

      var pointLight = new THREE.PointLight(0xffffff, 1, 100); 
      pointLight.position.set(-5, 1, 5); 
      scene.add(pointLight); 

      camera.position.z = 5; 
      camera.position.y = 1.5; 
     } 

     function loadScene() {    
      // Instantiate a loader 
      var loader = new THREE.GLTFLoader(); 

      // Load a glTF resource 
      loader.load('gltf/SpinCube.glb', 
       function (gltf) { 
        var model = gltf.scene; 
        scene.add(model); 

        mixer = new THREE.AnimationMixer(model); 
        mixer.clipAction(gltf.animations[0]).play(); 

        render(); 
       }); 
     } 

     function render() { 
      requestAnimationFrame(render); 
      var delta = clock.getDelta(); 
      if (mixer != null) { 
       mixer.update(delta); 
      }; 
      renderer.render(scene, camera); 
     } 

     init3D(); 
     loadScene(); 

Answer 1

は問題がThree.jsのGLTF2Loaderのバージョンのバグだったように見えました私がその時に使っていたこと。私はdevブランチからThree.jsのコピーを取り出し、私のアニメーションは正しく表示されました。