blender gltf文件_来自Blender Exporter的GLTF的Three.js动画

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

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

我能够使用这个相同的混合文件,并使用Three自己的JSON导出添加到Blender导出到JSON,一切正常.所以,我觉得我必须在我的Javascript中做一些愚蠢的事情,或者有一些关于GLTF的东西我不知道了.

谁能告诉我这里我做错了什么？我要在这里做头发的时间.

这是我试图用于GLTF版本的Javascript(特别是来自Cesium工具的二进制版本)：

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();

最佳答案 问题似乎是我当时使用的Three.js版本的GLTF2Loader中的一个错误.我从开发分支中提取了一份Three.js,我的动画显示正确.