Question

I am displaying three objects on the screen and I am able to select (click) these objects (right now I am just changing the color of the objects on click). All I want to do is when a user left clicks on one of the objects that object should come in front of camera (also want to rotate and scale it when coming to front in a nice animation). And when user right clicks on screen the object goes back to its place (default object position).
I have searched web for terms like zoom object, focus object, but couldn’t find any help regarding the scenario I explained above.

Please help me with the basic concepts How I can achieve this using THREE.js.

Regards
ZB

Answer 1

Your problem is that you can’t zoom the object, you could zoom-in the camera or bring the object to be in front of the camera.
First Approach “zoom-in camera”:

if ( intersects.length > 0 ) {
    // set camera in with some gap;
    camera.position.z = intersects[0].object.position.z - 100;
    camera.position.x = intersects[0].object.position.x;
    camera.position.y = intersects[0].object.position.Y;
}

Second approach “bring object to the front of the camera”:

if ( intersects.length > 0 ) {
    // bring object;
    intersects[0].object.position.z = camera.position.z - 100;
    intersects[0].object.position.x = camera.position.x;
    intersects[0].object.position.y = camera.position.y;
}