Three.js 无法使用JSONLoader处理具有多个变形目标的动画

我在blender中制作了一个简单的场景，其中包含一个简单的长方体和两个形状变形关键帧

我导出的.js文件包含很多变形目标（我想每个动画帧都包含一个），但在制作中仍然没有显示动画，只有一个静态框

以下是我试图让它工作的方法：

<script src="three.js" type="text/javascript"></script>
<script type="text/javascript">
  var size_width = window.innerWidth;
  var size_height = window.innerHeight;
  var player;
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, size_width/size_height, 0.1, 1000);
  var renderer = new THREE.WebGLRenderer();
  var animation;

  var animOffset = 1;

  var duration = 1000;
  var keyframes = 101;
  var interpolation = duration / keyframes;
  var lastKeyframe = 0;
  var currentKeyframe = 0;


  renderer.setSize(size_width, size_height);
  document.body.appendChild(renderer.domElement);

  camera.position.x = 10;
  camera.position.y = -20;
  camera.position.z = 10;

  camera.rotation.x = 1.4;

  var player_loader = new THREE.JSONLoader();

  player_loader.load( "boxy.js", function(geo) {
    player = new THREE.Mesh(geo);
    scene.add(player);
  });

  function animate() {
    requestAnimationFrame(animate);
    render();
  }

  function render() {
    if ( player ) {
                var time = Date.now() % duration;
                var keyframe = Math.floor( time / interpolation );
                if ( keyframe != currentKeyframe ) {
                    player.morphTargetInfluences[ lastKeyframe ] = 0;
                    player.morphTargetInfluences[ currentKeyframe ] = 1;
                    player.morphTargetInfluences[ keyframe ] = 0;

                    lastKeyframe = currentKeyframe;
                    currentKeyframe = keyframe;
                }
                player.morphTargetInfluences[ keyframe ] = ( time % interpolation ) / interpolation;
                player.morphTargetInfluences[ lastKeyframe ] = 1 - player.morphTargetInfluences[ keyframe ];
            }
    renderer.render(scene, camera);
  }
  animate();
</script>

变量大小\宽度=window.innerWidth；
var size_height=window.innerHeight；
var播放器；
var scene=new THREE.scene（）；
var摄像机=新的三视角摄像机（75，尺寸/宽度/尺寸/高度，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
var动画；
var=1；
var持续时间=1000；
var关键帧=101；
var插值=持续时间/关键帧；
var lastKeyframe=0；
var currentKeyframe=0；
设置大小（大小\宽度、大小\高度）；
document.body.appendChild（renderer.doElement）；
摄像机位置x=10；
摄像机位置y=-20；
摄像机位置z=10；
摄像机旋转角度x=1.4；
var player_loader=new THREE.JSONLoader（）；
player_loader.load（“boxy.js”，函数（geo）{
玩家=新的3.Mesh（geo）；
场景。添加（播放器）；
});
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
如果（球员）{
var time=Date.now（）%duration；
var关键帧=数学地板（时间/插值）；
如果（关键帧！=当前关键帧）{
player.morphTargetInfluences[lastKeyframe]=0；
player.morphTargetInfluences[currentKeyframe]=1；
player.morphTargetInfluences[关键帧]=0；
lastKeyframe=当前关键帧；
currentKeyframe=关键帧；
}
player.morphTargetInfluences[关键帧]=（时间百分比插值）/插值；
player.morphTargetFluences[lastKeyframe]=1-player.morphTargetFluences[keyframe]；
}
渲染器。渲染（场景、摄影机）；
}
制作动画（）；

这是我的出口：

---

也没有向控制台报告任何错误。

您需要使用期望变形目标的材质渲染网格。可以通过在构造函数选项中将morphTargets布尔值设置为true来实例化材质来实现这一点

我不确定您对three.js有多熟悉，但在大多数情况下，人们创建网格对象时都会将几何体对象和材质对象作为参数传递给网格构造函数。您只为构造函数提供了一个几何体对象

要在代码中运行动画，请更改加载程序回调中实例化新网格的行：

player = new THREE.Mesh(geo);

要使用“变形目标”启用的材质实例化网格，请执行以下操作：

player = new THREE.Mesh( geo, new THREE.MeshLambertMaterial({ morphTargets: true }) );

---

当我运行您的代码时，我看到立方体的一个角向外变形，然后又向内变形

需要使用期望变形目标的材质渲染网格。可以通过在构造函数选项中将morphTargets布尔值设置为true来实例化材质来实现这一点

我不确定您对three.js有多熟悉，但在大多数情况下，人们创建网格对象时都会将几何体对象和材质对象作为参数传递给网格构造函数。您只为构造函数提供了一个几何体对象

要在代码中运行动画，请更改加载程序回调中实例化新网格的行：

player = new THREE.Mesh(geo);

要使用“变形目标”启用的材质实例化网格，请执行以下操作：

player = new THREE.Mesh( geo, new THREE.MeshLambertMaterial({ morphTargets: true }) );

---

当我运行您的代码时，我看到立方体的一个角向外变形，然后又向内变形

哦，老兄，非常感谢你！这个没有材质的盒子看起来像线框，我对此很满意，但我从没想过分配材质可以解决这个问题！哦，老兄，非常感谢你！这个没有材质的盒子看起来像线框，我对此很满意，但我从没想过分配材质可以解决这个问题！