Three.js动画与来自Blender Exporter的GLTF

我正在尝试使用GLTF和Three.js，我有一段时间试图让动画工作。我的最终目标是能够在Blender中创建关键帧动画网格，将它们导出到GLTF，并在基于Aframe的WebVR场景中使用它们。然而，目前，我只是试图让他们加载和动画在一个简单的Three.js测试线束页面。Three.js动画与来自Blender Exporter的GLTF

我试图做一个非常基本的测试，以得到这个工作。我使用了Blender的默认立方体场景，取下了相机和灯光，并创建了一个关键帧动画，使立方体围绕Z轴旋转360度。然后我将该多维数据集导出到GLTF。首先，我尝试了GLTF导出添加，然后我尝试将它导出到Collada并使用Cesium的工具将其转换为GLTF。 GLTF文件的两个版本都可以正确加载和渲染多维数据集，但多维数据集不会动画。

我能够使用这个相同的混合文件并导出到JSON使用三个自己的JSON导出添加为Blender，并且一切工作正常。所以，我觉得我必须在我的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();

来源

2017-06-12 loraan

您正在使用哪个出口商？最新的https://github.com/KhronosGroup/glTF-Blender-Exporter/很可能是你想要的。但是，它出口glTF2.0，所以你还需要使用THREE.GLTF2Loader。 –

我使用的是：https://github.com/Kupoman/blendergltf，它似乎可以导出GLTF 1.0。我认为Khronos Group下的一个是官方的？我尝试过那一种，转而使用GLTF2Loader，但它并不是动画......而且我也丢失了我所应用的材料。在这一点上，我尝试了三条通往GLTF的途径。所以，我的怀疑是我在JavaScript中做错了什么。我想我在Blender中做动画的方式也可能是错的，但Three的JSON导出器添加工作正常。 – loraan

Khronos集团扩展是现在正在进行积极工作的地方。很可能有问题需要解决。你能否在GitHub上提出问题（理想情况下用你的'.blend'文件）？没有看到文件，我不知道动画是否存在于'.gltf'中。我也不是Blender的专家，但扩展作者会是。 –

的问题似乎一直在three.js所的GLTF2Loader的版本中的错误我当时正在使用。我从开发分支中提取了Three.js的副本，并且我的动画显示正确。

来源

2017-07-12 18:27:13 loraan

Three.js动画与来自Blender Exporter的GLTF

回答

相关问题