Question

我是THREE.js的新手，并且有一个关于操纵mr.doob放在网站上的特定示例的问题。在该示例中，2500个粒子的场的比例和y位置以偏移同步为动画，使用Math.sin（）在此循环内的循环中逐个粒子

http://threejs.org/examples/#canvas_particles_waves

我不太了解THREE.js，我看到了这一点，并希望将该动画应用于2500面平面网格以模拟波浪海洋。生成这样的网格是否可能并且很好:( setX目前以未定义的形式返回）：

var planeMaterial = new THREE.MeshBasicMaterial( {transparent: true, opacity: 0.5, wireframe:true} );
            plane.rotation.x = Math.PI / 2;
            scene.add( plane );

            var planeGeometry = new THREE.PlaneGeometry(5000, 5000, AMOUNTX, AMOUNTY);
            var i = 0;
            for ( var ix = 0; ix < AMOUNTX; ix ++ ) {

                for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
                    var vertice = planeGeometry.vertices[i];
                    vertice.position.setX = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
                    vertice.position.setZz = iy * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
                    plane.verticesNeedUpdate = true;
                }
            }
            var planeMaterial = new THREE.MeshBasicMaterial( {transparent: true, opacity: 0.5, wireframe:true} );
            plane.rotation.x = Math.PI / 2;
            scene.add( plane );

，然后在render（）函数中为它设置动画，如下所示：

var vertices = [];
        for ( var ix = 0; ix < AMOUNTX; ix ++ ) {

                for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
                    var vertice = planeGeometry.vertices[i];
                    vertice = vertices[ i++ ];
                    vertice.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
                        ( Math.sin( ( iy + count ) * 0.5 ) * 50 );
                }

            }

？或者我是否必须实际变形，或使用花哨的噪声着色器这样做？我想这样做，所以我保持波浪的宁静运动

Answer 1

您只需要设置needsUpdate标记。

geometry.verticesNeedUpdate = true;

This example展示了如何做同样的事情。

是否可以在不使用变形或着色器的情况下设置顶点动画？

1 个答案: