Camera look at for hotspots

Help & Support
1

I want to make something like this hostsports in Sketchfab.
Example
So I have some hot spots and I want to rotate the camera to the right position by clicking on them.
How do I do that? Is there an existing solution in PlayCanvas with the “Look At Controller” for the camera?

2

Try making the hotspots activate on certain keys like so:

if (this.app.keyboard.isPressed(pc.KEY_A)) {
this.camera.lookAt(/*What you want it to look at*/);
}
3

There’s an example here: https://developer.playcanvas.com/en/tutorials/information-hotspots/

The example you linked to uses HTML for the hotspots which is a little different.

4

Ya but when you click on the white circle nothing happens

5

The event is there to subscribe to. If you want to take the code for yourself, you need to subscribe to the event (see the pulsing script as an example) to run your bespoke behaviour.

6

Thanks for you’re answers. I’ve found a PlayCanvas example that does what I want somehow. But I do not really understand how it is working an the developer changed the orbit.js script to make it happen which is not very flexible…
https://playcanvas.com/project/608443/overview/testfocus2

7

Oh, my bad. I missed the part where the OP wanted to rotate the camera to the hotspot.

In which case, I would have a look at point and camera position associated with every hotspot. When clicked, it would fire an event to an external script that could lerp between the current camera position and look at point to the target one over time. It’s not the best transition, but it should work.

1 Like
8

Ok, I think I got it. I’m moving the camera now to a point and rotate to my target. It would be better if I could rotate the camera around my center (pivot) point only, but I don’t know if I can handle it. I will post my solution as soon as I’ve cleaned it up.

1 Like
9

If you want something smoother with ease-ins and outs, you could use tween.js to change your positions.

10

So here is my solution:
https://github.com/FionNoir/PlayCanvasLib

There is a function lookAtHotspot which moves the camera smoothly to a new position and focus on a new target.

/**
 * Move Camera to 'resetPoint' and look at 'lookAtPoint'
 * @param resetPoint {entity} new camera position to move to
 * @param lookAtPoint {entity} new point to look at
 */
OrbitCamera.prototype.lookAtHotspot = function(resetPoint, lookAtPoint) {

    if(this.Goto)return;
        console.log("resetAndLookAtPoint");
        this._lockPivot.copy(lookAtPoint);          
        
        this.teCam.setPosition(resetPoint);            
        this.teCam.lookAt(lookAtPoint);              

        this.newDis.sub2(lookAtPoint, resetPoint);    

        this.startPos.copy(this.entity.getPosition());
        this.startRot.copy(this.entity.getRotation());
        this.targPos.copy(this.teCam.getPosition());
        this.targRot.copy(this.teCam.getRotation());       
        
        this._lockDist = this.newDis.length();                
        this._lockYaw = this._calcYaw(this.targRot);             
        this._lockPitch = this._calcPitch(this.targRot , this._targetYaw);
      
        
        this.Goto = true;
        this.GotoTimer = 0.0;
        
};

You can simply call them by using this.app.fire('lookAtHotspot', newCameraPositionEntity, newLookAtPoint)

It’s not clean right now, but does the job. What I still need is a script that rotates the camera around a target to face the front of another object.

11

Add a rigidbody to the camera and apply an impulse when you want it to move to another object that force should be applyed and you can see the camera move to the object