Lerping camera motion example please

Hi all, can someone please include example code here move the camera from one point to another smoothly. I put a simple translation into a do/while loop but i’m scratching my head about a better way to do this. I basically want to choreograph several camera moves and rotations in a sequence. Thanks in advance.

ps: I saw the spaceships example, which is beautiful, but it’d really help me if I can get some barebones script to start with. i had trouble picking that apart.


Here’s a basic lerping script:

var Lerp = pc.createScript('lerp');

// initialize code called once per entity
Lerp.prototype.initialize = function() {
    // Set a target position for the entity to move to
    this.targetPosition = new pc.Vec3 (0, 0, -10);
    // Create a vec3 to hold the lerped position
    this.lerpedPosition = new pc.Vec3 ();
    // How fast the entity will reach the target
    this.speed = 1;

// update code called every frame
Lerp.prototype.update = function(dt) {
    // Lerp the current position and the target position
    this.lerpedPosition.lerp (this.entity.getPosition (), this.targetPosition, this.speed * dt);

    // Update the entity's position to the lerped position
    this.entity.setPosition (this.lerpedPosition);

It moves an entity closer and closer towards a position every frame. The reason you can’t use a do/while loop to lerp the camera is because the loop would finish before the next frame is called.

Also check out the docs for Vec3.lerp here: http://developer.playcanvas.com/en/api/pc.Vec3.html#lerp

Hope this helps :slight_smile:

Thank you!!! That worked really well.

forgive my javascript n00bness but I’m stuck on my next step now. I’ve been trying to make use of bits of code from other projects but I keep running into trouble.

I want to institute these lerped camera moves from clicked “buttons”. i thought i’d take baby steps by causing the lerped motion of the camera with keyboard input, that worked (while I held a key with isPressed). but I’m having trouble making boxes act like buttons which move the camera around.

so my question, i suppose, let’s say I have made a box entity clickable, how can I access the camera from the box’s script? I found some help in the forums about accessing the cameras script but that isn’t exactly what I want. the following didn’t get me far:

var Btn1 = pc.createScript('btn1');

// initialize code called once per entity
Btn1.prototype.initialize = function() {
    this.targetPosition = new pc.Vec3 (8, 5, 10);
    this.secondPosition = new pc.Vec3 (8, 20, 10);
    this.lerpedPosition = new pc.Vec3 (); // Create a vec3 to hold the lerped position
    this.speed = 5; // How fast the entity will reach the target

//code i found in the forums to tweak
Btn1.prototype = {
    initialize: function () {
        this.entity.script.UI.on('click', this.onClick, this);
        this.cameraEntity = this.entity.findByName("Camera"); //context.root.findByName('Camera');

    onClick: function () {
        this.cameraEntity.lerpedPosition.lerp (this.entity.getPosition (), this.targetPosition, this.speed * dt);
        this.cameraEntity.entity.setPosition (this.lerpedPosition);

note: if I could figure out how to import the entitypicking tutorial as a project that doesn’t ghost out the scripts, then I’d start with editing entitypicking. i plan to give the raycasting method a try from that tutorial.

Thank you!

once again, sorry for what are prob very basic javascript mistakes. I come from Unity and C# scripting, I’ve become pretty proficient over the last couple of years there. this is new territory for me. I appreciate the help getting started, i hope to be cruising on my own soon.

No worries! So to access the camera (or any entity) from inside a script you can either add the entity as a script attribute, or use the findByName() function. To get the camera entity, you’d write something like this:

this.cameraEntity = this.app.root.findByName (‘Camera’);

If you want to lerp from one position to another by clicking on entities, I’d use raycasting. I’ve made a small project to demonstrate how something like this can be done in PlayCanvas.


Let me know if you have any more questions / problems. :slight_smile:


Perfect! Awesome! Thank you! your example project has the exact behavior I’m looking for so it’s the perfect base from me to work from. I truly appreciate the support. I should be good from here on out…

1 Like