Question

嘿，如果有人可以帮我动画这个对象：

向上 - 向下移动| 左 - 旋转的权利| a查找| z往下看

链接到orignal文件：http://www.aacctrust.org/anim/anim.htm

JSON模型文件（带有动画尾巴摇摆）：

http://wikisend.com/download/654748/wolf.json

问题是json模型文件已经提供了有关尾部动画的必要细节。狼的尾巴假装摇摆。但它没有，我已经尝试了一切，但没有帮助。

代码中有什么问题，或者我没有正确地导出frm Blender。

以下是代码：

<html>

<head>
    <style>
        body { margin: 0; }
    </style>
</head>

<body>  
<canvas id="myCanvas"></canvas>


   <script src="three.js"></script>

    <script>

     var scene = new THREE.Scene();
     var canvas = document.getElementById("myCanvas");
     renderer = new THREE.WebGLRenderer({ canvas: canvas });
     var camera = new THREE.PerspectiveCamera( 75, (canvas.width / canvas.height) , 1, 10000 );
     var clock  = new THREE.Clock(),mixer;
     var forest,wolf,animation;            
     var fwd,bck,lft,rgt,up,down = 0 ;
     var action = {};

    camera.fov *= 0.3;
    camera.updateProjectionMatrix();            

    renderer.setSize( window.innerWidth, window.innerHeight);
    document.body.appendChild( renderer.domElement );
    renderer.setClearColor (0x22222222, 1);

    camera.position.z = 28;

    var material = new THREE.MeshPhongMaterial( { map:       THREE.ImageUtils.loadTexture('wolf_uvcons.png') } );
    // Wolf Texture Above # Forest Uses Local Materials @Blender

    var loader = new THREE.JSONLoader();

    loader.load('forest.json', function(geometry, materials) {
               forest = new THREE.Mesh(geometry, new   THREE.MeshFaceMaterial(materials));
               forest.scale.x = forest.scale.y = forest.scale.z = 0.25;
               forest.rotateX( Math.PI / 2 );forest.rotateZ( Math.PI  );           //load :env:
                forest.translation = THREE.GeometryUtils.center(geometry);
                scene.add(forest);
        });




    loader.load('wolf.json', function(geometry, materials) {
       wolf = new THREE.SkinnedMesh(geometry,material);
       wolf.scale.x = wolf.scale.y = wolf.scale.z = 0.25;                  //load wolf
       wolf.translation = THREE.GeometryUtils.center(geometry);
       scene.add(wolf);
       wolf.add(camera);
       wolf.translateY(-27); /// Bring it down
       wolf.translateZ(100); /// Bring it down

      action.idle  = new THREE.AnimationAction(geometry.animations[ 0 ]);         
      action.idle.weight  = 1;

  // Create animation mixer and pass object to it
      mixer = new THREE.AnimationMixer(wolf);
      mixer.addAction( action.idle );

      });


    var light = new THREE.AmbientLight(0xFFFFFFFF,1);
    scene.add(light);
    var pointLight = new THREE.PointLight( 0xffcccc,0.41 );
    pointLight.position.set( 0, 100, 3 );
    scene.add( pointLight );
    var pointLight1 = new THREE.PointLight( 0xff0000,0.81 );
    pointLight1.position.set( 100, 200, 3 );
    scene.add( pointLight1 );

    function moveWolf()
    {

        if (fwd==1)
        { wolf.translateZ(-1);}
        if (bck==1)
        { wolf.translateZ(1);}
        if (lft==1)
        { wolf.rotateY(Math.PI/200)}
        if (rgt==1)
        { wolf.rotateY(-Math.PI/200);}
        if (up==1)
        { camera.rotateX(Math.PI/200);}
        if (down==1)
        { camera.rotateX(-Math.PI/200);}

      }

    function animate() {

    requestAnimationFrame( animate );
    moveWolf();
    render();

    var delta = clock.getDelta();
    var theta = clock.getElapsedTime();

    if ( mixer ) { mixer.update( delta ); }
 }

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

   animate();
</script>

<script>
document.onkeydown = checkKey1;
document.onkeyup = checkKey2;

function checkKey1(e) {

e = e || window.event;

if (e.keyCode == '38') {
    // up arrow
    fwd=1;
}
else if (e.keyCode == '40') {
    // down arrow
    bck=1;
}
else if (e.keyCode == '37') {
   // left arrow
   lft=1;
}
else if (e.keyCode == '39') {
   // right arrow
   rgt=1;
}
else if (e.keyCode == '65') {
   up=1;
}
else if (e.keyCode == '90') {
   down=1;
}
}


function checkKey2(e) {

e = e || window.event;

if (e.keyCode == '38') {
    // up arrow
    fwd=0;
}
else if (e.keyCode == '40') {
    // down arrow
    bck=0;
}
else if (e.keyCode == '37') {
   // left arrow
   lft=0;
}
else if (e.keyCode == '39') {
   // right arrow
   rgt=0;
}
else if (e.keyCode == '65') {
   // right arrow
   up=0;
}
else if (e.keyCode == '90') {
   // right arrow
   down=0;
}

}
</script>

</body>
</html>

Answer 1

更新：

在等待回复的过程中，我进行了一次自我探索之旅;）

并找到了一个几乎可以接受的解决方案，步骤如下：

档案＆gt;＆gt;导出＆gt;＆gt; Wavefront（OBJ）
确保选中动画作为选项。
点击导出（导出plz时会在单独的文件夹中执行，因为根据帧数，文件不会很大。）
在Blender中复制文件夹＆gt; Python＆gt; Bin目录。
将转换器从three.js utils OBJ for python3复制到Blender＆gt; Python＆gt; Bin目录。
在管理员模式下启动命令提示符并运行以下命令：

python objtothreejs_conv_python3 -i meshdirname \ meshname_000001.obj -o output.js -m＆＃34; meshdirname \ meshname _ * .obj＆＃34;

输出动画将是变形动画，需要在调音台中进行一些更改才能播放MorphAnims。

在three.js中无法让尾巴摇摆（动画）？

1 个答案: