Hello,
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 = this.app.scene.layers.getLayerById(pc.LAYERID_IMMEDIATE);
this.app.renderLine(end, 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 https://developer.playcanvas.com/en/api/pc.Mesh.html to render the line which give you much more flexibility in size and shape.
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 this.app.renderLine(end, 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:
https://playcanvas.com/project/759868/overview/draw-line-on-mouse-pointer
mwa5csLjCR
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.app.renderLine(this.lastPos, this.startPos, this.lineColor); I don’t see any line.
I am using orbit camera is that something to do with this?
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();
a.set(10,10,10);
b.set(100,100,100);
this.app.renderLine(b, 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.
https://playcanvas.com/editor/scene/1076394
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:
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();
a.set(10,10,10);
b.set(100,100,100);
this.app.renderLine(b, a, this.lineColor);
right now that must be running but there is still no line.