How do I Offset the x of the orbit camera script?

Help & Support
1

Hi I’m using the orbit-camera script but i want to offset is in the x slightly. I’ve tried to modify a few things but cant get anything to work. To show you what I am trying to do, here is an image of the app with the UI. As you can see, the camera and focus point need to be offset to the left because the UI covers the left third of the screen. With the default script the focus point at the start is always dead center of the screen which is incorrect for this purpose…

image
image1913×969 170 KB

I tried to modify the line as follows but didn’t seem to do anything at all:
this.resetAndLookAtPoint(resetPoint, new pc.vec(this._modelsAabb.x+10,this._modelsAabb.center.y,this._modelsAabb.center.z));

2

Hi @Grimmy,

Instead of modifying the orbit camera script, how about adding a child entity to your mattress model entity with a slight offset?

Then add the child entity as target to the orbit camera script to get the right frame.

3

Thanks, but then wont the camera just orbit around the child? I still want the camera to orbit around the center of the model.

4

Mmm, the camera will orbit its pivot point, that would be the position of the target entity.

I am not sure with your initial thought, adding a x offset to that pivot point how you would keep the camera orbit around the model center. It will orbit around the new offset position.

5

In this case, I would either consider render to texture or using the camera rect to only render on the right part of the canvas.

Both come with their own challenges on calculating the size and values while taking into account of UI on the left.

Edit: I do wonder if you can get away with rotating the scene instead? Something like this: https://playcanvas.com/editor/scene/1169623

It will still look a bit odd as the center of the camera is still in the centre of the screen and not centre of the viable renderable area.

6

Maybe I could have two cameras at the same position/transform always. One for the UI (UI Layer only) which renders fullscreen as normal and one for the 3D with which I just offset its viewport X. Would that work? Any disadvantages to that?

7

I tried my idea with 2 cameras and it works perfectly, however the issue then becomes that when using:

this.cameraEntity.camera.screenToWorld(screenPosition.x, screenPosition.y, this.cameraEntity.camera.farClip, this.ray.direction);

screenPosition doesnt take into account any of the viewport offset so none of the interactions trigger correctly with a raycast. ANyone know how to get around this? Some way of getting the ray to know about the viewport offset?

8

Hi @Grimmy ,

I think you need to convert the coordinates you pass to screenToWorld to take into account the viewport rect, take a look at this post:

1 Like
9

Lol, I didn’t realise I made an example project :sweat_smile:

1 Like
10

Actually that is a pretty useful example, it may be a good addition to the examples section.

1 Like
11

Noted: Add offset rect raycast example to tutorials · Issue #276 · playcanvas/developer.playcanvas.com · GitHub

1 Like
12

Hi, I tried this and it all works great on PC with a mouse but the same build on a touchscreen device (phone) the hotspot touches seem to be offset still.

I cant see why it should be different but it seems to be…(?)

I have a build at https://playcanv.as/p/Dy6CMao6/ that demonstrates this. (Go to Purple 4> then choose cutaway then try to click hotspots…)

13

It’s probably related to pixel device ratio if the issue is on mobile only. Debug with the touch screen coordinates and see if they are larger/smaller than what you would expect for the screen resolution on the mobile device

14

I have Device Pixel Ratio enabled but if I turn this off IT WORKS, but sprites look rubbish :slight_smile: I cant live with that. I guess I need an additional offset for mobile to based on the Device Pixel Ratio. ANy ideas how I would do that?!?

15

The screen coordinates differ whether you have pixel device ratio enabled or not. So you will need to convert the offset for the view port based on whether it has been enabled or not

16

Any idea how? I have no idea what dark magic the Device Pixel Ratio checkbox does.

17

Fixed the project to cope: https://playcanvas.com/editor/scene/1035044

1 Like
18

Thanks. Works perfectly:

var screenWidth = this.app.graphicsDevice.width / this.app.graphicsDevice.maxPixelRatio;
var screenHeight = this.app.graphicsDevice.height / this.app.graphicsDevice.maxPixelRatio;