0

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

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

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

4

1 回答 1

6

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

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

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

player = new THREE.Mesh(geo);

要使用具有变形目标的材质实例化网格，请启用：

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

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

于 2013-02-08T22:48:50.357 回答