Creating Camera States that can be transitioned to by UI button click events?

Help & Support
, ,
#1

I have a model that has a variety of regions to zoom in on, is it possible to create states of a camera each with its own xyz setting that can be transformed to on mousclick events on UI elements?

State1 = camera position X Y Z, State2 = camera other position X Y Z, etc… then Button One activates Camera State 1, Button Two activates Camera State 2 and so on?

Perhaps similar to that BMW brand experience example we’ve seen. BMW i8 - PLAYCANVAS

Thanks!

#2

Hi @JefferyWright,

It’s definitely possible though you will have to implement this state manager in your code.

For the buttons a good starting point is the UI buttons tutorial: User Interface - Buttons | Learn PlayCanvas

On each mouse click you can have an attribute that sets the camera position accordingly, even reference a scene entity as an attribute and grab the position from it. That way you can visually, in editor, place your regions.

1 Like
#3

Thanks or the info, are there any tutorials covering the movement of cameras to positions on events? Are there any scripts available that show this process being done?

#4

So to move a camera, you are moving the entity that has the camera component attached. Here is an example on how to animate the camera along a path, observe how position/rotation are animated using the Curve class:

https://developer.playcanvas.com/en/tutorials/camera-following-a-path/

1 Like
#5

Yeah, thanks I looked through all the existing tutorials and didn’t find anything helpful.

Looking at a blank new script page, where does one begin to learn the scripting language this platform uses to get it to do things?

#6

I tried this script, attached it to a button, but it does not make the camera move the coordinates of the target in the scene, shouldn’t this work?

var CameraPoint1 = pc.createScript('cameraPoint1');

CameraPoint1.attributes.add('ActiveCamera', {type: 'entity'});
CameraPoint1.attributes.add('CameraTarget', {type: 'entity'});

// initialize code called once per entity
CameraPoint1.prototype.initialize = function() {
    this.entity.button.on('click', function(event) {
        this.ActiveCamera.x = this.CameraTarget.x;
        this.ActiveCamera.y = this.CameraTarget.y;
        this.ActiveCamera.z = this.CameraTarget.z;
    }, this);
};

There are now inputs in the script where I can add the entities in question:
CameraPoint1

Shouldn’t that script move the camera?

Thanks.

#7

this.ActiveCamera and this.CameraTarget are Entity objects and they don’t have x, y, z properties so you are getting undefined values

You can look at the API for Entity objects here: Entity | PlayCanvas API Reference

To get and set the position of an Entity, please use getPosition() and setPosition() (details of usage in the link above). eg

var CameraPoint1 = pc.createScript('cameraPoint1');

CameraPoint1.attributes.add('ActiveCamera', {type: 'entity'});
CameraPoint1.attributes.add('CameraTarget', {type: 'entity'});

// initialize code called once per entity
CameraPoint1.prototype.initialize = function() {
    this.entity.button.on('click', function(event) {
        this.ActiveCamera.setPosition(this.CameraTarget.getPosition());
    }, this);
};

In terms of getting started with learning PlayCanvas, our crash course is probably the best starting point if you already know programming or used other games engines: Crash Course - Make a Game | Learn PlayCanvas

#8

Thanks for that info. ActiveCamera is just a variable name I made, I changed the variable names in case of a namespace issue, but this still does not move the camera:

var CameraPoint1 = pc.createScript('cameraPoint1');

CameraPoint1.attributes.add('moveCamera', {type: 'entity'});
CameraPoint1.attributes.add('moveTarget', {type: 'entity'});

// initialize code called once per entity
CameraPoint1.prototype.initialize = function() {
    this.entity.button.on('click', function(event) {
        this.moveCamera.setPosition(this.moveTarget.getPosition());
    }, this);
};

I also changed the names of the entities to be more unique for clarity:

CameraPoint1

The JS coding I am accustomed to is very different from what I’m seeing on this platform.

#9

I tried another approach, selecting the entities directly using this code:

var CameraPoint2 = pc.createScript('cameraPoint2');

// initialize code called once per entity
CameraPoint2.prototype.initialize = function() {

this.moveCamera = this.app.root.findByName('movable_Camera');
this.moveTarget = this.app.root.findByName('Engine_target');

    this.entity.button.on('click', function(event) {
        this.moveCamera.setPosition(this.moveTarget.getPosition());
    }, this);
};

…which still does not work.

Shouldn’t that code set the position of this.app.root.findByName(‘movable_Camera’) to the position of this.app.root.findByName(‘Engine_target’) ?

Thanks again.

#10

That’s interesting to hear. It be good to know more about the differences you are seeing

Can you share an example project where people can take a look?

#11

I create HTML5 Canvas marketing interactives, which relies on a lot of custom javascripting.

I would like to create similar marketing applications in the 3D space, this is the project I am currently attempting to produce as a demo to our team.

https://launch.playcanvas.com/1577011

The sphere to the left is the target I want to the camera to take new coordinates from.

Is there any obvious flaw in the code I used last, that prevents the camera from moving to the coordinates of the target?

Thanks.

#12

The reason why it doesn’t move to that position, is because the orbitCamera script on the camera entity is controlling the entity position each frame in the update.

There’s an API on the orbitCamera script that allows you to move it to a specific position (like a teleport).

I’ve forked the project to show how I would do this: https://playcanvas.com/project/1003846/overview/f-construction-test

#13

Thanks man, I’ll have a look, I appreciate this.