Question

我正在尝试使用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＆＃39的工具的二进制版本）：

        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版本中的一个错误。我从开发分支中提取了一份Three.js，我的动画显示正确。

使用来自Blender Exporter的GLTF的Three.js中的动画

1 个答案: