mdesign
November 6, 2022, 9:42am
#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
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:
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.
mdesign
November 6, 2022, 10:34am
#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.
mdesign
November 6, 2022, 11:01am
#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
yaustar
November 7, 2022, 12:03pm
#4
A couple of ways:
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.
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
mdesign
November 11, 2022, 10:48am
#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?
yaustar
November 11, 2022, 11:09am
#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
mdesign
November 11, 2022, 12:29pm
#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?
yaustar
November 11, 2022, 12:31pm
#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
mdesign
November 12, 2022, 1:34pm
#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
.
I’ve tried it also Entity object but it also doesn’t work because it has no size to count centre from it.
mdesign
November 12, 2022, 1:52pm
#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
yaustar
November 14, 2022, 11:54am
#11
If you can provide an example project, it’s something that can be looked at