Save camera position when click to zoom object then revert back to position after leave zoom

Questions
, , ,
1

I have a GLTF model with objects within that are clickable, when the user clicks the object the camera zooms in to focus on the object. Currently I have an ‘if’ statement so when users click anywhere apart from the zoomed object, the camera position changes back to ‘x:12, y:8, x:8’ which is the starting value. The problem is if the user has zoomed in or out with the mouse wheel, these values would have changed, so when the camera zooms out from an object it is in a different position to what it was before zooming into the object.

I need a better way of doing this by somehow saving the camera position when the user clicks to zoom in on an object, then when they click outside the object to zoom out, the camera zooms out to the saved position.

I have created a working Codpen that is collaborative and can be edited and saved, please let me know if you are able to help. You can also leave comments directly on the codepen in the bottom right corner.

The front left and back left trees are the clickable objects.

1 Like
2

Link broken

3

Can you try now, maybe because the codepen was private?

4

image

5

Apologies I thought I could have more than 1 person on a collab pen but its already max at 2.

Here is a link to a new collab pen - https://codepen.io/gwjr/collab/gOeRmYO/22262982788b3a83d534bc34adf77124

6

image
image951×414 36.7 KB

7

Whats the issue?

8

Empty code

9

Workable example: https://codepen.io/gwjr/pen/gOeRmYO/22262982788b3a83d534bc34adf77124

1 Like
10

How is the code empty if the model is displayed? Confusing…

11

Need create simple pen with short link.

12

@cereal_beast does this example answer your original question? It should be as simple as creating a global variable ‘cameraPosition’ then using a click event listener you could assign the camera.position to this variable before you translate the camera to be called back on returning from the zoom point.