动画 Three.js 文件未呈现答案

【问题标题】：Animated Three.js file not rendering动画 Three.js 文件未呈现
【发布时间】：2015-05-03 12:08:57
【问题描述】：

我在 Blender 中制作了一个动画，并将其导出为 Three.js 文件，以便可以在我的 Three.js 代码中显示它。

这里是 Javascript 代码：

var loader = new THREE.JSONLoader();
loader.load( "obj/dog5.js", function( geometry ) {
    mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
    mesh.scale.set( 10, 10, 10 );
    mesh.position.y = 20;
    mesh.position.x = 0;

    var materials = mesh.material.materials;

    for (var k in materials) {
        materials[k].skinning = true;
    }

    animation = new THREE.Animation(mesh, "ArmatureAction", THREE.AnimationHandler.CATMULLROM);
    animation.play();

    lesson6.scene.add(mesh);

这是我得到的错误：

未捕获的类型错误：无法读取未定义的属性“长度”

这是在我的代码中发生的地方：

animation = new THREE.Animation(mesh, "ArmatureAction", THREE.AnimationHandler.CATMULLROM);

这是在 Three.js 库文件three.min.js 中发生的地方：

init:function(a){if(!0===a.initialized)return a;for(var b=0;b<a.hierarchy.length;b++)

我知道我的 JSON 文件有一个层次结构，所以我不知道为什么它是未定义的。我在想我只是缺少一些代码，我不确定。

如果我拿走常规对象呈现但不动画的动画内容。

我完全被难住了。任何意见，将不胜感激！谢谢！

编辑：

所以现在用这段代码渲染：

          for ( var k in materials ) {

        materials[k].skinning = true;

      }

      skinnedMesh = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
      skinnedMesh.scale.set( 11, 11, 11 );
      lesson6.scene.add( skinnedMesh );
      animation = new THREE.Animation( skinnedMesh, skinnedMesh.geometry.animations[ 0 ], THREE.AnimationHandler.CATMULLROM);
      animation.play();

但它仍然没有动画。我需要animation.play的开始时间吗？它可能是我的json吗？

谢谢！

【问题讨论】：

(1) 使用非缩小版的three.js进行调试。 (2) 使用最新版本的three.js。 (3) 从three.js的例子中学习：例如threejs.org/examples/webgl_skinning_simple.html。
感谢您的建议！我之前尝试过该示例代码和其他示例代码，出于某种原因，我总是可以让它渲染但从不动画。会不会是我的json？

标签： javascript three.js blender

【解决方案1】：

我发现了我的问题。我的动画和渲染不正确。

来自threejs.org/examples/webgl_skinning_simple.html的解决方案：

function animate() {

  requestAnimationFrame( animate );

  THREE.AnimationHandler.update( clock.getDelta() );

  controls.update();

  render();
  stats.update();

}

function render() {

  renderer.render( scene, camera );

}

【讨论】：