Renderline won't work


I am using this code to draw a line for showing user the direction and power of the force.

    var start = new pc.Vec3(this.startPos.x, this.startPos.y, 0);
    var end = new pc.Vec3(event.x, event.y, 0);
    var color = new pc.Color(1, 1, 1);
    var worldLayer =;, start, color, {
        layer: worldLayer

That does not work. How can I draw a line and apply force towards that direction?

Renderline has to be called every frame to be shown as it’s a debug feature. We don’t have a built in line renderer yet but I would suggest using pc.Mesh to render the line which give you much more flexibility in size and shape.

thanks @yaustar but I couldn’t create a line could you please share a simple code snippet ?

I will if I can find some time. I’m pretty backlogged at the moment

Hi @muratg,

Try putting the code you posted above in the update method of your script, that way it will be called per frame and render the line.

I think the code you are using is allright, you just need to move, start, color, { layer: worldLayer });

to the update()

PD: I think you will have to move the var end = new pc.Vec3(event.x, event.y, 0); too, so it gets updated every frame according to your event

Hi guys @Leonidas and @Francisco_Bozzo thanks for your replies. I am trying to draw a line onMouseMove method. I tried to move that code to the update method but still no line

Hi @muratg,

Here I modified a shape picking tutorial to draw a line based on the position of the mouse pointer:

1 Like

thank you @Leonidas! I have updated my code when I try to print the values on the console in update method with

console.log(this.lastPos + " " +this.startPos + " "+this.lineColor);

I get

[1287, 319, 1000] [958, 339, 0.1] #ffff80

but with, this.startPos, this.lineColor); I don’t see any line.

I am using orbit camera is that something to do with this?

Hi @muratg,

How are you setting this.lastPos, this.startPos and this.lineColor?

Posting the link to the scene would definitely help here!

@Francisco_Bozzo I have an entity and when mouse is down on it I set start points when mouse is up I set last points.

@will How can I share the scene?

I tried setting them manually with

      var a = new pc.Vec3();
      var b = new pc.Vec3(); 
      b.set(100,100,100);, a, this.lineColor);

still no luck

If your project is public you can copy paste the url of the editor webpage.

Did you put this line inside your script update method?

@Leonidas Yes I did.

Here is the project. I am trying to do that in mouse-input.js of orbit camera. I know it’s not the best way to do that but I am just trying to make it work first.

That part of code never gets executed:


But even if it would, your lastPos and startPos are zero vectors, so the line would not draw:


1 Like

Here is the console log from there. It gets executed. you have to click on the ball to make flag true.

Firstly, this.lastPos sometimes gets incorrect value, where you are setting 3D vector with .set(x, y) without z. This will corrupt the location, so you should use .set(x, y, z) instead.

Also make sure your ranges are correct. They look pretty large. For example, a distance from the center of the field to the gates is about 30, while your line coords starts and ends go in hundreds. The line could be well out of camera view. Try with fixed coordinates first, instead.

      var a = new pc.Vec3();
      var b = new pc.Vec3(); 
      b.set(100,100,100);, a, this.lineColor);

right now that must be running but there is still no line.