三个JS动画重写或修复。即使使用MorphAnimMesh,它也不会在新版本中播放。包括js

这里是代码,它是“webgl\u terrain\u dynamic”示例,重写后包含了鸟类。

这是一个新的例子,没有鸟: https://threejs.org/examples/webgl_terrain_dynamic.html

这是一个适用于鸟类的老例子,也是三种鸟类的旧版本。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电影,以帮助寄养家庭的孩子们了解情感(解决方案更复杂,但我们从经验中知道,这些鸟真的很好,它们会喜欢它们)。

我不是三方面的专家。js和我尽我所能。感谢您的帮助和恭敬的回答。:)你们真的帮了我的忙,到目前为止,我搜索了很多代码