Reset camera view to some specific angle after hitting html button

Help & Support
#1

https://playcanvas.com/project/1005036/overview/reset-camera-view-with-button

This is a two example projects merged into one.

What is the easiest way to use existing orbit-camera.js
which is bundled with: Model Viewer example project
image
to reset the camera view after hitting the button.

I would like to use an amazing orbit-camera.js as it is now only to reset the camera direction/view after hitting the button.

After hitting the button I would like to see the view:

image
image1262×1177 27.6 KB

with letting user possibility of rotating freely.

Could you help me with that? That script is quite complex and I`m sure there is the possibility of using that existing script for doing that.

Thanks in advance.

#2

I`ve tried to set the camera position and rotation manually:

var cam = pc.app.root.findByName('Camera');
cam.setPosition(-1.499, 1.516, 0.972);
cam.setLocalEulerAngles(-44, -58.4, 0);

but it works only when obrit-camera.js script is turned off.

So I need to use the existing function inside that obrit-camera.js script or build my own which using part of it.

#3

https://playcanvas.com/project/1005041/overview/reset-camera-view-with-button2

OK. I`ve done it using the ready reset function inside that orbit-camera.js script.

this was an answer:

<div class='button' onclick="pc.app.root.findByName('Camera').script.entity.script.orbitCamera.reset(-37,-55,3);"">BUTTON</div>

To know demanded pitch and yaw I used console.log inside update function.

What If I would like to animate smoothly to that yaw/pitch?

1 Like
#4

A couple of ways:

  1. You can lerp / tween the position of the camera from where it is and the target position and every frame, call resetAndLookAtPoint on the orbit camera script using the tween positions. This would be a straight line path.

  2. Work out the target positions yaw, pitch and distance values and tween those instead. This would orbit the camera around the thing you are looking at instead. There are some private functions in the orbit camera script that could be used to help with this as used on line 192:

    // Preset the camera
    this._yaw = this._calcYaw(cameraQuat);
    this._pitch = this._clampPitchAngle(this._calcPitch(cameraQuat, this._yaw));
    this.entity.setLocalEulerAngles(this._pitch, this._yaw, 0);
1 Like
#5

I think I`ve done smooth animation to demand yaw, pitch, distance

I`ve injected a new function to orbit-camera.js :

OrbitCamera.prototype.goSmoothlyToPitchYawDistance = function (newYaw, newPitch, newDistance) {
    this._targetYaw = newYaw;
    this._targetPitch = newPitch;
    this._targetDistance = newDistance;
    if (!this.autoRender) {
        this.app.renderNextFrame = true;
    }
};

In HTML button has action like this:

<div class='button' onclick="pc.app.root.findByName('Camera').script.entity.script.orbitCamera.goSmoothlyToPitchYawDistance(-37,-55,3);">BUTTON</div>

You can check how it works here:
https://playcanvas.com/project/1007172/overview/reset-camera-view-with-button3

I have one question. How to do it to go in the shortest way to the new pitch, yaw, and distance camera position without too many turnarounds?

#6

You will have check this yourself and check the yaw for the shortest route. I do something like this on line 75

https://playcanvas.com/editor/code/438243?tabs=5665660&line=75

You shouldn’t have a problem with pitch or distance as they don’t wrap around.

1 Like
#7

Thanks.

I have one more question.

What if I would like to animate also pivot point to a new target? Is that possible with the current code?

#8

Yes, there is a property on the orbit camera to move the pivot point. If you look at the panning code in the input scripts, you can see it used there.

You can lerp/tween that over time to animate it.

1 Like
#9

I have one more question. I try to trigger OrbitCamera focus function over PlayCanvas Cube item entity.

pc.app.root.findByName('Camera').script.entity.script.orbitCamera.focus('CameraFocus');

I`m getting a strange error. Why does it happening? Is that work only on external/imported geometries
image.

I’ve tried it also Entity object but it also doesn’t work because it has no size to count centre from it.

#10

as a fix I`ve coded something like that:

    if ( entity.hasOwnProperty('children') && entity.children.hasOwnProperty('length') ){
        for (i = 0; i < entity.children.length; ++i) {
            modelsAdded += this._buildAabb(entity.children[i], modelsAdded);
        }
    }

but I`m not sure is that ok. It works somehow :wink:

#11

If you can provide an example project, it’s something that can be looked at