8

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

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

我能够使用相同的混合文件并使用 Three 自己的用于 Blender 的 JSON 导出插件导出到 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();
4

1 回答 1

1

这个问题似乎是我当时使用的 Three.js 的 GLTF2Loader 版本中的一个错误。我从 dev 分支中提取了 Three.js 的副本，我的动画显示正确。

于 2017-07-12T18:27:13.057 回答