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

我发现这篇文章并没有真正帮助我：https://github.com/mrdoob/three.js/pull/8488

我们需要这个代码来输出VR电影，以帮助寄养家庭中的孩子了解情绪（解决方案更复杂但是鸟类非常好，我们知道 - 从经验中 - 他们会爱上它们。）

我不是Three.js的专家，我尽我所能。感谢您的帮助和尊重的答复。 :)你们真的帮了我，到目前为止我搜索了很多代码。：）

Answer 1

:)我刚刚解决了这个问题：

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

而不是 var clip = THREE.AnimationClip.findByName（this，label）;

然后调用mesh.playAnimation（0.0003）;在我添加变形的函数中。

我希望它对某人有所帮助。：）

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

1 个答案: