What’s up guys,
I was trying to create a simple circle line with playcanvas but I didn’t find anything, someone would have a suggestion.
I need to draw the line just for help when doing Ray Casting.
The only way is me calculating the arc with the Bézier Curve algorithm ?
If the answer is yes then it is very sad.
I was only able to find the renderLine and the renderLines
URL: https://developer.playcanvas.com/en/api/pc.Application.html#renderLine
you could render a circle using lines. I have this code which renders a sphere using 3 circles … perhaps extract a single circle from it.
addSphere: function (center, radius, numSegments, color, duration, options, id) {
duration = duration || 0;
var points = [];
var colors = [];
var step = 2 * Math.PI / numSegments;
var angle = 0, i;
for (i = 0; i < numSegments; i++) {
var sin0 = Math.sin(angle);
var cos0 = Math.cos(angle);
angle += step;
var sin1 = Math.sin(angle);
var cos1 = Math.cos(angle);
points.push(
new pc.Vec3(center.x + radius * sin0, center.y, center.z + radius * cos0), new pc.Vec3(center.x + radius * sin1, center.y, center.z + radius * cos1),
new pc.Vec3(center.x + radius * sin0, center.y + radius * cos0, center.z), new pc.Vec3(center.x + radius * sin1, center.y + radius * cos1, center.z),
new pc.Vec3(center.x, center.y + radius * sin0, center.z + radius * cos0), new pc.Vec3(center.x, center.y + radius * sin1, center.z + radius * cos1)
);
colors.push(color, color, color, color, color, color);
}
lines.push(new DebugLine(points, colors, _currentTime + duration, id, options));
},
Thanks for the quick response, I will test your implementation.
A suggestion for PlayCanvas Add a renderCircle or renderArc to pc.Application
This code worked very well Thank you very much @mvaligursky .
var Line = pc.createScript('line');
Line.prototype.update = function(dt) {
var center = new pc.Vec4();
var color = pc.Color.RED;
var radius = 10;
var numSegments = 100;
this.renderArc(center, radius, numSegments, color);
};
Line.prototype.renderArc = function (center, radius, numSegments, color) {
var points = [];
var colors = [];
var step = 2 * Math.PI / numSegments;
var angle = 0, i;
for (i = 0; i < numSegments; i++) {
var sin0 = Math.sin(angle);
var cos0 = Math.cos(angle);
angle += step;
var sin1 = Math.sin(angle);
var cos1 = Math.cos(angle);
points.push(new pc.Vec3(center.x + radius * sin0, center.y, center.z + radius * cos0), new pc.Vec3(center.x + radius * sin1, center.y, center.z + radius * cos1));
colors.push(color, color);
}
this.app.renderLines(points, colors);
};
We’re planning to add more comprehensive debug primitive for rendering - such as circles, boxes, sphere and similar. Definitely something requested and needed a lot.
Hi excellent code! I have a question tho.
how do I force this to always be aligned to the camera ?
I know i can draw orbits and what not, but is there a way this would always face the camera?
