三个 JS animesh 重写或修复。即使包含 MorphAnimMesh.js 也不会在新版本中播放

Question

这是代码，它是重写的 "webgl_terrain_dynamic" 示例以包含鸟类。

这是新的例子，没有鸟：https://threejs.org/examples/webgl_terrain_dynamic.html

这是适用于鸟类的旧示例 - 以及 three.js 的旧版本：http://alteredqualia.com/three/examples/webgl_terrain_dynamic.html

这是我编写的代码。一切正常，但鸟儿不动，而且它们在纹理上看起来也有点像素化（尤其是鹦鹉）。

                // MORPHS

function addMorph( geometry, speed, duration, x, y, z ) {

    var material = new THREE.MeshLambertMaterial( { color: 0xffaa55, morphTargets: true, vertexColors: THREE.FaceColors } );

    var meshAnim = new THREE.MorphAnimMesh( geometry, material );

    meshAnim.speed = speed;
    meshAnim.duration = duration;
    meshAnim.time = 600 * Math.random();

    meshAnim.position.set( x, y, z );
    meshAnim.rotation.y = Math.PI/2;

    meshAnim.castShadow = true;
    meshAnim.receiveShadow = false;

    scene.add( meshAnim );

    morphs.push( meshAnim );

    //renderer.initWebGLObjects( scene );
}

function morphColorsToFaceColors( geometry ) {

    if ( geometry.morphColors && geometry.morphColors.length ) {

        var colorMap = geometry.morphColors[ 0 ];

        for ( var i = 0; i < colorMap.colors.length; i ++ ) {

            geometry.faces[ i ].color = colorMap.colors[ i ];
        }
    }
}

var loader = new THREE.JSONLoader();

var startX = -3000;

loader.load( "models/animated/parrot.js", function( geometry ) {

    morphColorsToFaceColors( geometry );
    addMorph( geometry, 250, 500, startX -500, 500, 700 );
    addMorph( geometry, 250, 500, startX - Math.random() * 500, 500, -200 );
    addMorph( geometry, 250, 500, startX - Math.random() * 500, 500, 200 );
    addMorph( geometry, 250, 500, startX - Math.random() * 500, 500, 1000 );

} );

loader.load( "models/animated/flamingo.js", function( geometry ) {

    morphColorsToFaceColors( geometry );
    addMorph( geometry, 500, 1000, startX - Math.random() * 500, 350, 40 );

} );

loader.load( "models/animated/stork.js", function( geometry ) {

    morphColorsToFaceColors( geometry );
    addMorph( geometry, 350, 1000, startX - Math.random() * 500, 350, 340 );

} );

// PRE-INIT

// renderer.initWebGLObjects( scene );

...在函数 render() 中我还添加了这个：

for ( var i = 0; i < morphs.length; i ++ ) {

    morph = morphs[ i ];

    morph.updateAnimation( 1000 * delta );

    morph.position.x += morph.speed * delta;

    if ( morph.position.x  > 2000 )  {

        morph.position.x = -1500 - Math.random() * 500;
    }

我还发现这个 post 对我没有真正帮助：https://github.com/mrdoob/three.js/pull/8488

我们需要此代码来导出 VR 电影，以帮助 children 寄养家庭了解情绪（解决方案更复杂，但鸟类真的很好，我们知道 - 根据经验 - 他们会喜欢它们).

我不是Three.js方面的专家，我会尽力而为。感谢您的帮助和恭敬的回答。 :) 你们真的帮助了我，到目前为止，我进行了很多搜索来编写代码。 :)

Answer 1

:) 我就是这样解决的：

在MorphAnimMesh.js 我这样定义变量 clip ： var 剪辑 = this.geometry.animations[ 0 ];

而不是 var clip = THREE.AnimationClip.findByName( this, label );

然后调用mesh.playAnimation(0.0003)；在我添加变形的函数中。

希望对大家有所帮助。 :)

三个 JS animesh 重写或修复。即使包含 MorphAnimMesh.js 也不会在新版本中播放

Three JS animesh rewrite or fix. It won't play in the new version even if MorphAnimMesh.js is included

animation

mesh

three.js