How To Add Lerp?

How to make a slower movement for the cube. This. Is a link: PlayCanvas 3D HTML5 Game Engine

Erm… I’m looking at the project and there is no cube? Are you talking about the skybox? Are you looking for a way to lerp from looking in one direction to another as you move the phone?

Sorry… Yes … @yaustar no is the cube, is The camera. Sorry. Move it very fast. Follow to my phone but Shive. :frowning:

The camera orientation is done in the update function and is effectively driven by these three values:

        var x = pc.math.DEG_TO_RAD * this.do.beta;
        var y = pc.math.DEG_TO_RAD * this.do.alpha;
        var z = pc.math.DEG_TO_RAD * -this.do.gamma;

Therefore to add some interpolation to the camera orientation, these are the three values that you will need to add interpolation to over time.

The Model Viewer Starter Kit (https://playcanvas.com/editor/scene/484733) has an example of interpolation being applied in the OrbitCamera.update function.

Please check this. https://playcanvas.com/editor/scene/579993 the camera not work now for Me

From a quick look, you have two scripts that changes the camera orientation, the first-person-movement.js and orientation.js script so one is overriding the other.

Take the time to read and understand the sample code you are using as it looks like you are mixing and matching scripts without fully understanding each one and therefore running into issues where they don’t work well together.

Is truth … I"m trying Make a car game. I tried to simulate the movement of the car with fpv and the movement of the head with deviceorienration (because it works better than vr kit started on my phone) … But even though it took several days. I do not know how to do it … " a car with movement and the script deviceorientacion for head … Is something possible? Mm @yaustar thank you very much for all your help … :slight_smile: :slight_smile: :slight_smile:

It is possible. My advice is to start slowly and concentrate on one thing at a time. For example, you mentioned that you are making a car game. I assume you want it to be from the first person view?

So start there. How do you make the car go accelerate using the phone? How to steer? What controls will you be using? etc And build up these features bit by bit.

Ok i will start once more

well … I managed to control lerp and it’s fantastic :slight_smile: … it does not tremble now either … it’s great … the only problem seems to be that there is only movement in a limited area, it does not move 360 ​​geados … could you tell me, where could be my mistake?https://playcanvas.com/project/530807/overview/y-lerp-finish Thank you…

Unfortunately, you haven’t added lerping to your app, it’s just divided the rotation by 8 which means you only have 1/8th of your full rotation.

@yaustar are you talking about a script of slerp? Where i can to start for this?

Somthing like this?

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);
};
1 Like

Something similar, yes but with the X, Y and Z rotations that Luis_Mb is getting from the device.

ok @yaustar … let’s go slowly … this should be something very easy for you, but it is not for me, I’m not coder … i am a CG designer … then…I should connect this script with gyrocontrol_type1.js in the project?

I only see a nane.js in the project Luis posted above?

In the update loop, we get the current orientation of the phone and then apply that to camera:

        var x = pc.math.DEG_TO_RAD * this.do.beta;
        var y = pc.math.DEG_TO_RAD * this.do.alpha;
        var z = pc.math.DEG_TO_RAD * -this.do.gamma;

To add interpolation to the rotation, we need to store the x, y and z rotations to represent the current rotation to store the camera rotations.

So in initialize, we add:

this.currentX = 0;
this.currentY = 0;
this.currentZ = 0;

And now in the update function, we can ‘lerp’ towards the current orientation of the phone from the previous frame camera rotation.

this.currentX = pc.math.lerp(this.currentX, x, someMagicValue * dt);
//etc

And then use this.currentX, this.currentY, this.currentZ and apply to the camera.

That said, I recommend not adding interpolation to the camera orientation because it adds delay to the user action and they will tend to overshoot where they want to look at.

This is ok?

var Orietation = pc.createScript('orientation');

// initialize code called once per entity
Orientation.prototype.initialize = function() {
    var self = this.currentX = 0;
               this.currentY = 0;
               this.currentZ = 0;
    
    //https://gist.github.com/kopiro/86aac4eb19ac29ae62c950ad2106a10e
    //https://stackoverflow.com/questions/35283320/three-js-rotate-camera-with-both-touch-and-device-orientation?answertab=votes#tab-top
    this.so = 0;
    
    window.addEventListener( 'orientationchange', function() { self.so = window.orientation || 0;}, false );
	window.addEventListener( 'deviceorientation', function(event) { self.do = event;}, false );
};

// update code called every frame
Orientation.prototype.update = function(dt) {
    if (this.do) {        
        var x = pc.math.DEG_TO_RAD * this.do.beta;
        var y = pc.math.DEG_TO_RAD * this.do.alpha;
        var z = pc.math.DEG_TO_RAD * -this.do.gamma;
        
       this.currentX = pc.math.lerp(this.currentX, x, someMagicValue * dt);
       this.currentY = pc.math.lerp(this.currentX, x, someMagicValue * dt);
       this.currentZ = pc.math.lerp(this.currentX, x, someMagicValue * dt);         
       

        
        var c1 = Math.cos( x / 2 );
		var c2 = Math.cos( y / 2 );
		var c3 = Math.cos( z / 2 );

		var s1 = Math.sin( x / 2 );
		var s2 = Math.sin( y / 2 );
		var s3 = Math.sin( z / 2 );
        
        var q0 = new pc.Quat(
            s1 * c2 * c3 + c1 * s2 * s3,
            c1 * s2 * c3 - s1 * c2 * s3,
            c1 * c2 * s3 - s1 * s2 * c3,
            c1 * c2 * c3 + s1 * s2 * s3
        );
                
        var q1 = new pc.Quat(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5)); // - PI/2 around the x-axis
        q0.mul(q1);
        
        var q2 = new pc.Quat();
        q2.setFromAxisAngle(pc.Vec3.FORWARD, this.so);
        q0.mul(q2);
                
        this.entity.setRotation(q0);
    }
};

i dont knw how where to add this lines

thanks @yaustar and @andres_b