Go camera to entity with smooth

Hi

I’m trying to center the camera on a clicked element using OrbitCamera via script, but I’m not able to make the camera move to the clicked element.

Inside the click script I was able to call the function inside orbitCamera using:
pc.app.fire(“camera:goToElement”, pickedEntity)

I got it inside OrbitCamera, inside startup: using:
// Go to clicked element
const camera = this.entity;
this.app.on(‘camera:goToElement’, function (element) {
goToElement(element, this, camera);
});

And my script to try to go to the element:

const goToElement = function (element, state, cameraEntity) {
    return false;

    const camera = cameraEntity;
    const angle = camera.getRotation();
    const position = camera.getPosition();

    const elementPosition = element.getLocalPosition();

    console.log(position, elementPosition)

    const calcPosition = {
        x: elementPosition.x - position.x,
        y: elementPosition.y - position.y,
        z: position.z
    }

    console.log(calcPosition);

    const vecPosition = new pc.Vec3(calcPosition)

    cameraEntity.script.orbitCamera.pivotPoint = vecPosition
    console.log(position);
    console.log(cameraEntity.script.orbitCamera.pivotPoint);
    console.log(element.position, element.localPosition)
}

Any suggestion how can I move camera to element?

The Orbit Camera script has some functions to help move it to where you would it to be: https://playcanvas.com/editor/code/438243?tabs=5665660

These include: resetAndLookAtPoint and resetAndLookAtEntity

If you are still running into issues after this, please post an example project with the issue :slight_smile:

Theres an old post from me that has a basic transition from one point to another using the orbit camera Orbit Camera | Can I smoothly transition from one focus entity to another? - #18 by yaustar

How can I do it?

I am trying:
this.app.on(‘camera:goToElement’, function (element) {
OrbitCamera.prototype.resetAndLookAtEntity(element.getPosition(), pc.app.root);
});

Response:
[orbit-camera.js?id=70158734&branchId=771d7d21-6b47-44ee-8da9-2ab0ae48401f:360]: Uncaught TypeError: Cannot read properties of undefined (reading ‘copy’)
===> this._modelsAabb.copy(allMeshInstances[i].aabb);

Hi @pcordista,

I think you should skip the second parameter on that method and at the same time you need to execute that method on an instance of that script, instead of calling the prototype.

Later in code you will see that method uses this, that will fail like that.

That usually means finding your camera and getting a reference to the orbit camera script:

// example code
this.cameraEntity.script.orbitCamera.resetAndLookAtEntity(element.getPosition());

I try:
pc.app.root.findByName(“Camera”).script.orbitCamera.resetAndLookAtEntity(element.getPosition());

I receive:
orbit-camera.js?id=70158734&branchId=771d7d21-6b47-44ee-8da9-2ab0ae48401f:363 Uncaught TypeError: Cannot read properties of undefined (reading ‘children’)

Do you have a project that you can share for others in the community to look at please?