Question

我在搅拌机中制作了一个简单的场景，其中包含一个简单的盒子和两个形状变形关键帧。

我导出的.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>

这是我的出口：

http://touhou.ru/upload/7b7513a903963b0804b0be763b8cc67c.js

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

Answer 1

您需要使用需要变形目标的材质渲染网格。您可以通过在构造函数选项中将morphTargets boolean设置为true来实例化一个材质来完成此操作。

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

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

player = new THREE.Mesh(geo);

使用包含变形目标的材质实例化网格：

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

当我使用该更改运行代码时，我看到一个立方体的一个角向外变形，然后再返回。

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

1 个答案: