I am relatively new to Three.js and WebGL, but I am determined to improve my skills in this area. Could you please review my code where I have successfully found a solution to a seemingly simple problem that I challenged myself with?
THE ISSUE I FACED (which took longer than expected to resolve): How can I animate a basic 400 x 400 PLANE MESH from a starting position of y=500 (below the browser window) to a target position of x=0, y=0, z=0 (center of the browser window) without relying on Tween.js? While Tween.js is efficient for simple movements in Three.js, I wanted to learn by finding my own solution. I spent hours researching various solutions on StackOverflow and Mr. Doob's GitHub repository, but none fully met my requirements: a straightforward vertical animation starting out of the frame and ending in the center of the browser window.
THE SOLUTION I IMPLEMENTED:
function animate() {
var newPos = plane.position.y;
plane.translateY(4);
function stopHere () {
if (newPos >= 0) {
plane.position.set(0, 0, 0);
var stopPlane = plane.position.y = 0;
}
}
requestAnimationFrame(stopHere);
}
function render() {
renderer.render(scene, camera);
animate();
}I have included the two functions responsible for accomplishing the task. Is there anything concerning or inefficient in this approach? My reasoning is that
requestAnimationFrame
cannot be inside the render() function, as it needs to be within the scope of the nested function ('stopHere') inside
animate();I faced challenges while using the following approach:
objMesh.geometry.applyMatrix( new THREE.Matrix4().makeTranslation(1, 0.1, 0.1));Despite struggling with what seemed like a simple problem for over a week, I am confident that my solution is functional. I utilized the applyMatrix sub-class method to achieve the desired outcome. I am seeking feedback to ensure I am learning Three.js correctly and avoiding bad practices. Can anyone identify any areas of concern or improvements needed in my code? Thank you.
ksqInFlight