0

単純なボックスと 2 つの形状変形キーフレームを含む単純なシーンをブレンダーで作成しました。

エクスポートした .js ファイルには、多数のモーフ ターゲットが含まれていますが (アニメーション フレームごとに 1 つずつだと思いますか?)、プロダクションではまだアニメーションは表示されず、静的なボックスだけです。

これを機能させようとしている方法は次のとおりです。

<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 }) );

その変更を加えてコードを実行すると、立方体の 1 つの角が外側に変形してから内側に戻るのが見えました。

于 2013-02-08T22:48:50.357 に答える