Objective: Modify the length of the cosine wave based on the horizontal position of the mouse cursor. The key function to focus on is mouseMoveHandler.
(function(window,document,undefined){
var canvas = document.getElementById('canvas'),
rect = canvas.getBoundingClientRect(),
x = rect.right,
twopi = 2*Math.PI,
scene = new THREE.Scene(),
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 10;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
/*Key Function*/
var material = new THREE.LineBasicMaterial({color: 0xf9f9f9}),
geometry = new THREE.Geometry(),
line = new THREE.Line(geometry, material);
var mouseMoveHandler = function(e){
var j = 0,
a = e.clientX/x,
b = a*(3*twopi);
for(i=0; i < b; i += .01){
geometry.vertices[j] = new THREE.Vector3(i, Math.cos(i), 0);
j = j+1;
geometry.verticesNeedUpdate = true;
}
scene.add(line);
}
var loop = function() {
window.requestAnimationFrame(loop);
renderer.render(scene, camera);
}
window.onmousemove = mouseMoveHandler;
loop();
})(this,document);
My anticipated outcome for this code is to draw a cosine wave and dynamically adjust the line segments based on the mouse movement. However, the line is only generated once when the mouse enters the screen and does not update thereafter.
I am uncertain about how to properly utilize verticesNeedUpdate, which leads me to suspect that it might be related to the issue at hand.
In my previous attempts, I used .push to add values to the 'geometry.vertices' array, but this only allowed the wave to increase in length and not decrease when the mouse moved to the left.