Three.js - 试图在浏览器上显示动画

我想显示一个动画，其中一个化身移动她的双臂。我在Blender（v2.75）上创建了动画并导出到JSON（r71）。结果：头像出现在浏览器上，但没有动画（没有武器移动）。代码如下：jsfiddle以下是完整的代码。有人能帮助我吗？Three.js - 试图在浏览器上显示动画

<html> 
    <head> 
     <title>My first Three.js app</title> 
     <style> 
      body { margin: 0; } 
      canvas { width: 100%; height: 100% } 
     </style> 
    </head> 
    <body> 
     <script src="models/three.js"></script> 

     <script> 

     var camera, light, renderer, objeto, animation, helpset, clock, animacao; 

     var loader; 

     function init() { 

      scene = new THREE.Scene(); 
      camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

      scene.add(new THREE.AmbientLight(0x666666)); 

      light = new THREE.DirectionalLight(0xdfebff, 1.75); 
      light.position.set(50, 200, 100); 
      light.position.multiplyScalar(1.3); 

      light.castShadow = true; 
      //light.shadowCameraVisible = true; 

      light.shadowMapWidth = 1024; 
      light.shadowMapHeight = 1024; 

      var d = 300; 

      light.shadowCameraLeft = -d; 
      light.shadowCameraRight = d; 
      light.shadowCameraTop = d; 
      light.shadowCameraBottom = -d; 

      light.shadowCameraFar = 1000; 
      light.shadowDarkness = 0.5; 

      scene.add(light); 


      renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 


      camera.position.z = 5; 

      clock = new THREE.Clock(); 

      loader = new THREE.JSONLoader(); 
      loader.load('models/SL-MD-avatar_erica95.json', addModel); 

      function addModel(geometry, materials){ 


        materials[0].skinning = true; 
      //  materials[0].color = "0xb091cc"; 

        var m = new THREE.MeshLambertMaterial(materials); 

      //  console.log(materials[0]); 
        objeto= new THREE.SkinnedMesh(geometry, m); 

        objeto.castShadow = true; 
        objeto.receiveShadow = true; 

        helpset = new THREE.SkeletonHelper(objeto); 
        //scene.add(helpset); 

      //  console.log(geometry.animations[0]); 

        animacao = objeto.geometry.animations[0]; 

        var nome = objeto.geometry.animations[0]["name"]; 

        console.log (nome); 

        var animation = new THREE.Animation (objeto, animacao); 

        console.log(animation); 

        animation.play(); 

        console.log(animation.isPlaying); 

        scene.add(objeto); 

      //  console.log(animation.data); 



      } 
     } 

     function render() { 

      delta = 0.75 * clock.getDelta(); 

      scene.traverse(function(child) { 
       if (child instanceof THREE.SkinnedMesh){ 

        child.rotation.y += .01; 
       } 
      }); 

      THREE.AnimationHandler.update(delta); 
     } 

      function animate(){ 
       requestAnimationFrame(animate); 
       render(); 
       renderer.render(scene, camera); 
      } 

      init(); 
      animate(); 


     </script> 
    </body> 
</html>

来源

2015-07-10 Erica Okamura

看起来你使用Blender时遇到了麻烦。你只是想念骨头的动作。

看在JSON：

"animations": [ 
    {        // first object in the array (=animations[0]) 
    "length": 2.36,     // animation duration 
    "hierarchy": [{     // hierarchy : defines the keyframes for each bone 
     "keys": [{     // hierarchy[0] (first bone) : keys = keyframes 
      "pos": [0, 1.067, 0], // keys[0] at time 0 : defines pos, rot, scl 
      "rot": [0, 0, 0, 1], 
      "scl": [1, 1, 1], 
      "time": 0 
     }, {       // keys[1] at 2.36 (=last keyframe) 
      "pos": [0, 1.067, 0], 
      "rot": [0, 0, 0, 1],  
      "scl": [1, 1, 1],  // ! you can see values are identical to 
      "time": 2.36    // keys[0] ! so this bone won't move 
     }], 
     "parent": -1     
    }, { 
     ....       // same for all hierarchy...

这意味着动画播放，但没有移动。尝试改变任何值（pos：[0,1.067,0]为pos：[3,5,20]为例），你会看到动画真的在播放。

在搅拌机中，您必须将移动分配给每个关键帧。

已接近完成;）

来源

2015-07-11 08:21:36 Atrahasis

感谢您仍然继续回答我的问题。我认为你是对的，但我试图创建一个带皮肤的块的简单动画，其中只有一个骨骼移动，并且只有两个关键帧（开始和结束）并且它工作。但是我会尝试为头像示例的每个骨骼和每个关键帧创建一个运动。 –

没有pblm它让我学习:)没有必要动画每个骨头，它应该只是工作。你有没有正确地遵循所有[那些步骤]（http://wiki.blender.org/index.php/Doc:2.4/Manual/Your_First_Animation/2.Animating_the_Gingerbread_Man）？我不会经常制作动画网格，所以我在需要时检查此页面，并始终能够正常工作。 – Atrahasis

Three.js - 试图在浏览器上显示动画

回答

相关问题