Three.js - 動畫沒有播放

Question

我有通過blender插件從blender導出到THREE.js的動畫對象的問題。 動畫沒有開始運行......

當然，我從blender導出並導入到THREE.js庫時嘗試了很多設置組合，但沒有成功。

這是代碼，我認為應該工作。 評論關鍵部分注釋可能存在一些錯誤。 鏈接到源JSON也在示例中。 當然，如果需要，我可以提供source * .blend文件...

 var tgaLoader = new THREE.TGALoader(); var objectLoader = new THREE.ObjectLoader(); var clock = new THREE.Clock(); var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); document.getElementById('container').appendChild(renderer.domElement); objectLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/scavenger.json', function (loadedScene) { scene = loadedScene; mesh = scene.children[0]; scene.background = new THREE.Color('white'); mesh.material = new THREE.MeshPhongMaterial({ map: tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA') }); hemiLight = new THREE.HemisphereLight('white', 'white', 0.6); scene.add(hemiLight); camera = new THREE.PerspectiveCamera(30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000); camera.position.set(500, 200, -100); controls = new THREE.OrbitControls(camera); controls.target.set(0, 50, 0); controls.update(); var geometry = new THREE.PlaneBufferGeometry(200, 200); var material = new THREE.MeshPhongMaterial({ shininess: 0.1 }); var ground = new THREE.Mesh(geometry, material); ground.rotation.x = - Math.PI / 2; scene.add(ground); mesh.scale.set(-1, -1, 1); // Critical section... mixer = new THREE.AnimationMixer(mesh); var sequence = THREE.AnimationClip.CreateFromMorphTargetSequence('animation', mesh.geometry.morphTargets, 25, true); var animation = mixer.clipAction(sequence); animation.play(); // End of critital section animate(); }); window.onresize = function() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }; function animate() { requestAnimationFrame(animate); render(); } function render() { var delta = 0.75 * clock.getDelta(); mixer.update(delta); renderer.render(scene, camera); } 

 body { margin: 0px; overflow: hidden; } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script> <script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/TGALoader.js" type="application/javascript"></script> <script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script> <div id="container"></div> 

謝謝你的任何建議。

Answer 1

我挖到了動畫，發現它使用了morphTargets 。 然后我想起了這個例子 。 因此，關鍵時刻是將.morphTarget參數設置為true ，因此，我已將其應用於代碼段中的材質並開始工作：

mesh.material = new THREE.MeshPhongMaterial({
    map: tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA'),
    morphTargets: true
}); 

雖然，我不確定，如果這樣的方法是正確的，但至少，它是有效的）

 var tgaLoader = new THREE.TGALoader(); var objectLoader = new THREE.ObjectLoader(); var clock = new THREE.Clock(); var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); document.getElementById('container').appendChild(renderer.domElement); objectLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/scavenger.json', function (loadedScene) { scene = loadedScene; mesh = scene.children[0]; scene.background = new THREE.Color('white'); mesh.material = new THREE.MeshPhongMaterial({ map: tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA'), morphTargets: true }); hemiLight = new THREE.HemisphereLight('white', 'white', 0.6); scene.add(hemiLight); camera = new THREE.PerspectiveCamera(30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000); camera.position.set(500, 200, -100); controls = new THREE.OrbitControls(camera); controls.target.set(0, 50, 0); controls.update(); var geometry = new THREE.PlaneBufferGeometry(200, 200); var material = new THREE.MeshPhongMaterial({ shininess: 0.1 }); var ground = new THREE.Mesh(geometry, material); ground.rotation.x = - Math.PI / 2; scene.add(ground); mesh.scale.set(-1, -1, 1); // Critical section... mixer = new THREE.AnimationMixer(mesh); var sequence = THREE.AnimationClip.CreateFromMorphTargetSequence('animation', mesh.geometry.morphTargets, 25, true); var animation = mixer.clipAction(sequence); animation.play(); // End of critital section animate(); }); window.onresize = function() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }; function animate() { requestAnimationFrame(animate); render(); } function render() { var delta = 0.75 * clock.getDelta(); mixer.update(delta); renderer.render(scene, camera); } 

 body { margin: 0px; overflow: hidden; } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script> <script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/TGALoader.js" type="application/javascript"></script> <script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script> <div id="container"></div>