Currently, I am in the process of learning about vectors and their application in moving objects within ThreeJS. For an experiment, I am propelling a box using a specified velocity and an arbitrary gravity vector.
Additionally, I am attempting to align the object with the curved trajectory it follows. Initially, it seems to be on track, but then veers off course midway through.
Moreover, the resources I have been studying are not in JavaScript, and they utilize operations like:
position = position + velocity * delta;
velocity = velocity + gravity * delta;
However, replicating this exact process in JS is not possible. Therefore, I have been multiplying by a scalar. Is this the correct approach?
Below is the render function I have implemented:
function render(){
var delta = clock.getDelta();
velocity.add(velocity.clone().multiplyScalar(delta));
velocity.add(gravity.clone().multiplyScalar(delta));
box.position.add(velocity);
var theta = velocity.angleTo(z);
box.rotation.x = (theta);
requestAnimationFrame(render);
renderer.render(scene, camera);
}
UPDATE: After considering WaclawJasper's suggestion, I made the following adjustments in my code. You can view the updated demo on JSFIDDLE DEMO HERE
function render(){
var delta = clock.getDelta();
velocity.addScaledVector(gravity, delta);
position.add(velocity);
axis.crossVectors(up, velocity.clone().normalize()).normalize();
radians = Math.acos(up.dot(velocity.clone().normalize()));
box.quaternion.setFromAxisAngle(axis, radians);
box.position.set(position.x, position.y, position.z);
requestAnimationFrame(render);
renderer.render(scene, camera);
}