Camera Position -- Camera Orbit Control

[Abhiram3]

I am pretty new to 3D stuff. I am trying to develop a model viewer with PIXI3D. I am able to place the model at the center of the canvas and rotate it around the center of the model. But now I want to place the model at a particular position and rotate it around the center of model. I am able translate the model using "position". But it is still rotating around the center of the canvas. Is there a way to move both model and camera and achieve rotating the model around its center at a particular position of the canvas?

[jnsmalm]

Hello!

You can change the "target" property of the camera orbit control. This will be the position it will rotate around.

let control = new CameraOrbitControl(app.view);
control.target = model.position

[Abhiram3]

But by doing that, it also changing the position of the model as well.

For Ref:
`const boundingBox = model.getBoundingBox()
const distance = Math.sqrt(boundingBox.size.x2 + boundingBox.size.y2 + boundingBox.size.z**2);
model.position.x = -boundingBox.center.x;
model.position.y = -boundingBox.center.y;
model.position.z = -boundingBox.center.z;

control = new PIXI3D.CameraOrbitControl(app.view);
control.angles.x = 25;
control.allowControl = false;
control.distance = distance2;
control.camera.far = distance100
control.camera.near = distance/100`

With the above the code, I am able to place the model at the center of the canvas and able to rotate around its center.

By changing just x of model position. model shifted as expected but still rotating around the center of canvas.

As suggested, updated target to model position. But it changed the position of the model and the model is still rotating around the center of canvas

Seems like target also dependent on the distance parameter of the control.

[jnsmalm]

Ok, try this:

PIXI3D.Camera.main.obliqueness.x = -0.5

[jnsmalm]

There is a difference between world position and screen position. An object placed at x = 5 for example, is not necessary rendered more to the right of the screen, because it depends on the position and view direction camera. If you move the object to x = 5, and also the camera to x = 5, the rendered output will look exactly the same (if you don't have any other objects of course).

By setting Camera.obliqueness, you are instead changing the view frustum. Below I have copy/pasted some description of this from Unity:

By default, the view frustum is arranged symmetrically around the camera
’s center line, but it doesn’t necessarily need to be. You can make the frustum oblique, which means that one side is at a smaller angle to the centre line than the opposite side.

This makes the perspective on one side of the image seem more condensed, giving the impression that the viewer is very close to the object visible at that edge. An example of how this can be used is a car racing game; if the frustum is flattened at its bottom edge, it appears to the viewer that they are closer to the road, accentuating the feeling of speed.

https://docs.unity3d.com/Manual/ObliqueFrustum.html

[Abhiram3]

Got it. Thanks :)

[Abhiram3]

In extension to the above case, I added a click event to the model. But the click event is getting trigged only at certain fixed area of the model.

model.hitArea = new PIXI3D.PickingHitArea(app.renderer, model); model.on("click", (e) => { console.log("model has been clicked!!!") });

Only the highlighted part is triggering the click event. Is there a way to add click event on the entire model or on a bounding box surrounding the model?

[jnsmalm]

What you did here should work. I need code which reproduce the problem to be able to debug, if you provide this I can look into it.

[Abhiram3]

I am using "Viewport" from "pixi-viewport" for drag and zoom of 2d-objects. I think it is causing the issue. If I remove it, "mouse click" event is working as expected. Removing "interactive" property of "viewport" is making model click work as expected.