我正在尝试使用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版本(特别是Cesium工具的二进制版本)的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 …Run Code Online (Sandbox Code Playgroud)