How do I rotate the model in the center of a 200px shift

Questions
,
1

Hi, everybody. I need some help.

This is the codepen address: https://codepen.io/ghostca16861041/pen/yLwKZKv

My 3D scene is full screen and has to be full screen, but I have the menu area to the left, I need to move the model to the screen minus the center point of the left menu area, and then rotate the camera to surround the model.

Thank you very much.

img_v3_027m_9820a17b-7bc1-4426-9537-527169c4cb9g
img_v3_027m_9820a17b-7bc1-4426-9537-527169c4cb9g1913Ă—693 38.9 KB

2

Is the model static or movable? If the first one, this thread is pretty much all the calculations you need - if the second one, it’s not really possible. If the model is movable, it’s size will change according to the perspective, rotating the camera will change the relative depth of the model, changing the meaning of “200px” for it.

1 Like
3

The position of the model is static, but the camera can be panned,I’ll check the post you quoted

4

Can you make your canvas only fill the content area on the right instead of having it extend underneath the UI on the left?

Once you try introducing offsets to the camera / controls target points… things can get really messy.

If you really have to though, you can do an offset to the controls target after you set it like you normally do… then offset it with something like…

controls.target.add(new THREE.Vector3( -3,0,0).applyQuaternion(camera.quaternion) );
5

For some reason, I could only extend the canvas to the bottom of the user interface, it felt like it would be out of my control to offset it, another option I had was to zoom in on the canvas to make it the center.