CODEWITHSUNDEEP
three.js
Luke Ryckman
Luke Ryckman

Reputation: 1

is it possible to animate vertices without using morphs or shaders?

I'm new to THREE.js and have a question about manipulating a particular example mr.doob has put on the site. In the example, the scale and y position of a field of 2500 particles are animated in offset sync, particle by particle in a loop within a loop using Math.sin() here

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

Not knowing much about THREE.js, I saw that and wanted to apply that animation to a 2500 face plane mesh to simulate a wavy ocean. Is it possible and fine to generate the mesh like this: (setX currently comes back as undefined):

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

,then animate it in the render() function like this:

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

            }

? Or would I have to actually do morph shapes, or do this using a fancy noisey shader? I want to do it this way so i keep the serene motion of the waves

Upvotes: 0

Views: 483

Answers (1)

mrdoob
mrdoob

Reputation: 19592

You just need to set the needsUpdate flag.

geometry.verticesNeedUpdate = true;

This example shows how to do this same thing.

Upvotes: 1

Related Questions