☑ Moving an entity to a specified point

Hi.
I have some kind of “ground” and an object on it. I want to move the object to the point on the ground i clicked with mouse left.
I detected the point with raycastFirst method. Now i’m trying to translate the object to that point, but i do smth wrong.
Could anyone help me with the code, please?
Here’s my code:

Ganlauf.prototype.onMouseDown = function (e) {
    if (e.button === pc.MOUSEBUTTON_LEFT) {
        var cameraObject = this.entity.getParent().findByPath('Camera');
        var from = cameraObject.camera.screenToWorld(e.x, e.y, cameraObject.camera.nearClip);
        var to = cameraObject.camera.screenToWorld(e.x, e.y, cameraObject.camera.farClip);

        var result = this.app.systems.rigidbody.raycastFirst(from, to);
        
        if (result) {
            this.targetPoint = result.point;
            this.xMovingSpeed = this.entity.position.x - result.point.x;
            this.zMovingSpeed = this.entity.position.z - result.point.z;
        }
    }    
};

Ganlauf.prototype.update =function(dt) {
    if (this.targetPoint && this.entity.position + 0.99 != this.targetPoint) {
        this.entity.translate(this.xMovingSpeed / Ganlauf.movingSpeed, 0, this.zMovingSpeed / Ganlauf.movingSpeed);
    }
};

Ganlauf.movingSpeed = 10;

Here’s the link to my project: https://playcanvas.com/editor/scene/489000

1 Like

The problem is that the check you are doing to see if the character reaches the target point doesn’t trigger.

This is because it is almost impossible to check a moving object’s position has reached an exact position. eg If an object is moving a metre every frame and the target distance is 3.5 metres away, the object’s position is going to go from 0 to 1, 1 to 2, 2 to 3, 3 to 4 going completely past the 3.5 metres target position.

A possible solution to this is rather than checking against a target position, work out the direction the character needs to travel in, the distance to travel to reach that point and store the distance travelled so far. That way, you know if the character has gone further than it should have.

This gets more complicated when you add in obstacles but for the current problem you have, that should do the trick.

I don’t quite understand how to calculate the angle at which i should rotate my object. Could you help me with it?
About the distance. I guess there’s no native method to calculate a distance between two points in playcanvas?
So i should use standard math rules to do so, correct?

Ok i used this.entity.lookAt function to rotate my object. The only problem is that it turned right the opposite direction))

this.entity.lookAt(result.point);

Where’s the mistake?

You don’t need the angle per say. You need the unit direction vector. You can get this by taking the target point, subtracting the object’s starting point and then normalising result. This will give a unit vector.

So here’s the code for it for PlayCanvas: (code reference: http://developer.playcanvas.com/en/api/pc.Vec3.html)

var direction = new pc.Vec3();
direction.sub2(targetPosition, startPosition);
direction.normalize();

To calculate the distance is standard trigonometry but we do have a built in function in the pc.Vec3 called length. So to work out the distance is almost the same steps.

var difference = new pc.Vec3();
difference.sub2(targetPosition, startPosition);
var distance = difference.length();

You can also calculate both in one go now:

var direction = new pc.Vec3();
direction.sub2(targetPosition, startPosition);
var distance = direction.length();
direction.normalize();

Then you can move the object by using translate like so:

var move = direction.clone();
move.scale(speed * dt);
this.entity.translate(move);

It is because the model is facing backwards rather than down -Z. You can see in the picture, the model is facing down the blue which is +Z which is ‘backwards’ due to our right handed coordinate system.

There are a couple of ways to fix this:

  1. Reimport the model so that it is facing down -Z
  2. Parent the entity and rotate it locally 180 degrees as shown in this project: https://playcanvas.com/editor/scene/489745 (I had to make some changes to the scripts to get them to work but you should get the idea in terms of getting to face the right way)

Thank you steven, you saved my day.
Now everything works fine.
Now the only thing i need to realize is how to rotate my model smoother.

If i’m not mistaken in Unity you can make it with Transform.Lerp function.

nevermind, i found a solution with slerp function of pc.Quat.
Thanks again.

About import. I think i do smth wrong during importing. I downloaded my model from mixamo. I tried to use an other model processed with mixamo , but the result is still the same: the object moves to the correct point, but rotates to the opposite direction.

I tried to use custom 3d model from the web, and again the same problem. What am i doing wrong?

It’s not about the import into PlayCanvas, it’s the export process from the modelling package you are using to create the model. Most models on the net are probably configured to look down positive Z in a left handed coordinate system. We are using a right handed system in PlayCanvas (which is also what 3DS Max uses) so positive Z is actually ‘backwards’ in our case @ayrin or @will can probably help more on this as they’ve used the Mixamo service.

In the meantime, if you check the project I posted in my last reply, you can see how I worked around this within PlayCanvas.

Yeah, i already checked it and used as a work around. Thanks!

Hi, this method work for the translate but not for rotation.How can i solve the local rotation problem that’s object has correct rotation

@potemkin this is quite an old thread :sweat_smile: Can you please start a new thread with the issue that you have please?