[SOLVED] Aphrodite Animated Orbit Camera not working

Help & Support
,
1

Hi there,

I found this great working project Aphrodite Animated Orbit Camera - PLAYCANVAS , later I got to the source ( PlayCanvas 3D HTML5 Game Engine ) and forked it however it won’t run anymore due to some engine or library updates (spent some time searching how to fix it). I tried reimporting tween.js and script load order but can’t get this to work.

I’m not a programmer so any help that would get this working would be greatly appreciated!
Thanks!

2

Hi @cyberme and welcome!

Make sure your new import is also set to preload.

You can check the topics below for more information.

3

Hi @Albertos,

Thank you so much for your fast response!

I checked it, it was set to preload. I tried editing the script bunch of times looking at the topics you shared but I don’t think it I am able to resolve it. I’m still getting this error

Uncaught TypeError: this.app.tween(…).to(…).onUpdate(…).bind is not a function

I’ve also updated complete and update to .onComplete and .onUpdate like the following:

     //.on('update', function () {
    .onUpdate(() => {  
        
        this.entity.lookAt(this.vec2);
        
    }).bind(this)
    
    //.on('complete', function () {
    .onComplete(() => {
   

        this.app.fire('animatedCameraPath:animationFinished', posToEntity.getPosition(), lookΤο);
        this.tween2 = undefined;
        this.lookFrom = undefined;
        
    }).bind(this) 
    .start();

Thanks!

4

Hi everyone,

I spent some time a little more and finally get it to working! Anyone interested in follow the steps below. Also re-import tween library just in case.

In the project you’ll find the script named animated-camera-path.js, the following code snippet is what is in the project right now:

AnimatedCameraPath.prototype.animateCameraPositionAt = function(positionFrom, posΤο) {
 
    
    this.vec1.set(positionFrom.x, positionFrom.y, positionFrom.z);

    this.tween1 = this.app
    .tween(this.vec1)
    .to( posΤο, this.duration, pc.SineInOut)
    .on('update', function () {
        
        this.entity.setPosition(this.vec1);
        
    }.bind(this) )
    .on('complete', function () {
        
        this.tween1 = undefined;
        
    }.bind(this) )
    .start();
};



AnimatedCameraPath.prototype.animateCameraLookAt = function(posToEntity) {

    if( this.lookFrom === undefined ){
        this.vec2.set(this.pivotPoint.x, this.pivotPoint.y, this.pivotPoint.z);
        this.lookFrom = this.vec2;
    }
    
    var lookToEntity = this.lookAtArray[this.currentLookAt];
    var lookΤο = this.lookAtArray[this.currentLookAt].getPosition();

    this.tween2 = this.app
    .tween(this.lookFrom)
    .to( lookΤο, this.duration, pc.SineInOut)
    .on('update', function () {
        
        this.entity.lookAt(this.vec2);
        
    }.bind(this) )
    .on('complete', function () {

        this.app.fire('animatedCameraPath:animationFinished', posToEntity.getPosition(), lookΤο);
        this.tween2 = undefined;
        this.lookFrom = undefined;
        
    }.bind(this) )
    .start();
};

I’ve changed this part with the following and it worked like a charm!

AnimatedCameraPath.prototype.animateCameraPositionAt = function(positionFrom, posΤο) {
 
    
    this.vec1.set(positionFrom.x, positionFrom.y, positionFrom.z);

    this.tween1 = this.app
    .tween(this.vec1)
    .to( posΤο, this.duration, pc.SineInOut)

    .onUpdate( function()  {    
        
        this.entity.setPosition(this.vec1);
        
    }.bind(this))
    
    

    .onComplete( function()  {
        
        this.tween1 = undefined;
        
    }.bind(this))
    .start();
};



AnimatedCameraPath.prototype.animateCameraLookAt = function(posToEntity) {

    if( this.lookFrom === undefined ){
        this.vec2.set(this.pivotPoint.x, this.pivotPoint.y, this.pivotPoint.z);
        this.lookFrom = this.vec2;
    }
    
    var lookToEntity = this.lookAtArray[this.currentLookAt];
    var lookΤο = this.lookAtArray[this.currentLookAt].getPosition();

    this.tween2 = this.app
    .tween(this.lookFrom)
    .to( lookΤο, this.duration, pc.SineInOut)

    .onUpdate( function()  {  
        
        this.entity.lookAt(this.vec2);
        
    }.bind(this))
    

    .onComplete( function()  {
   

        this.app.fire('animatedCameraPath:animationFinished', posToEntity.getPosition(), lookΤο);
        this.tween2 = undefined;
        this.lookFrom = undefined;
        
    }.bind(this)) 
    .start();
};

Thanks again @Albertos for all the help!

2 Likes