He guys, new to ThreeJS and I totally love it. I made a simple animated flag, but now I want to be able (when I scroll my website) to change the amount of vertices that are moved i.e. the intensity.
My code here:
const animate = function () {
const time = clock.getElapsedTime();
plane.geometry.vertices.map(vertices => {
vertices.z = 0.42 * Math.sin(vertices.x * 2 + time);
});
plane.geometry.verticesNeedUpdate = true;
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();
I am unable to figure out how I can do this. I mean for example:
setTimeout(() => {
plane.geometry.vertices.map(vertices => {
vertices.z = 3.42 * Math.sin(vertices.x * 2 + clock.getElapsedTime());
});
plane.geometry.verticesNeedUpdate = true;
}, 5000)
does nothing. So basically what I want to do is increase the amount in:
vertices.z = 3.42 * Math.sin(vertices.x * 2 + clock.getElapsedTime());
and after increasing it, decrease it again back to normal, depending on where the user is scrolling the website.
If I update the rotation for example it does work, but changing the above vertices code does nothing