Currently, I am working on developing a universe using Three.js along with Leap Motion controls. However, I have encountered an issue where the camera position doesn't switch to different planets (adjusting camera position and lookAt) when swiping left or right. Instead, it consistently reverts back to the initial position set at the beginning of the code.
// Setting up camera position at the start of the webpage
camera = new THREE.PerspectiveCamera(25, $(window).width() / $(window).height(), 0.1, 100000);
camera.position.set(300, 300, 300);
camera.lookAt(scene.position);
Within my Leap Motion loop, I have added conditional statements for detecting left or right swipes:
if(frame.gestures.length > 0) {
for (var i = 0; i < frame.gestures.length; i++) {
var gesture = frame.gestures[i];
if (gesture.type == "swipe") {
// Classifying swipe as horizontal or vertical
var isHorizontal = Math.abs(gesture.direction[0]) > Math.abs(gesture.direction[1]);
// Determining right-left or up-down swipe
if (isHorizontal){
if (gesture.direction[0] > 0) {
camera.position.set(300, 300, 300);
camera.lookAt(moonMesh.position);
}
else{
// Handle other cases here
}
}
}
}
Just to clarify, I'm coding in JavaScript. Any suggestions on how to change the camera position and focus without it reverting back to the starting points would be greatly appreciated.
Thank you in advance,
Sincerely,
Tsukio Akira