I'm attempting to replicate the click effect found on this particular website (enter and scroll in to witness the magic). The concept involves clicking on a picture, causing it to move front and center in front of the camera. Clicking it again sends it back to its original position. However, I am facing challenges when trying to revert objects to their original positions as the coordinates get lost during movement.
I have made some progress by storing the Vector3 in a global array and recalling those positions. But my current setup breaks if the camera is moved unexpectedly (the camera tends to move on its own for some reason).
This is what I've attempted:
var coordArray = [new THREE.Vector3(0, 0, 0)];
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onMouseClick(event){
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(scene.children, true)
for(var i=0; i<intersects.length; i++){
this.tl = new TimelineMax();
originalCoords = new THREE.Vector3(intersects[0].object.position.x, intersects[0].object.position.y, intersects[0].object.position.z);
coordArray.push(originalCoords);
if(intersects[0].object.position.z != camera.position.z - 5)
this.tl.to(intersects[0].object.position, 1, {x: 0, y: 0, z: camera.position.z - 5, ease: Expo.easeOut});
else
this.tl.to(intersects[0].object.position, 1, {x: coordArray[coordArray.length-2].x, y: coordArray[coordArray.length-2].y, z: coordArray[coordArray.length-2].z, ease: Expo.easeOut});
}
}
Any assistance would be greatly appreciated. I am fully prepared to face criticism for my lack of knowledge along with other minor details. The solution outweighs any embarrassment :p