While working with Three JS, I was able to add a grid to the scene using the GridHelper. Is there a similar function that can produce a polar grid?
This is how the geometry for a 2D Cartesian plane is created (source):
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
this.color1 = new THREE.Color(0x444444);
this.color2 = new THREE.Color(0x888888);
for (var i = -size; i <= size; i += step) {
geometry.vertices.push(
new THREE.Vector3(-size, 0, i), new THREE.Vector3(size, 0, i),
new THREE.Vector3(i, 0, -size), new THREE.Vector3(i, 0, size)
);
var color = i === 0 ? this.color1 : this.color2;
geometry.colors.push(color, color, color, color);
}
THREE.LineSegments.call(this, geometry, material);
I attempted to rewrite it like this:
var segments = 64;
var material = new THREE.LineBasicMaterial({ color: 0x1976D2 });
//Somehow below didn't work...
//var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
var geometry = new THREE.Geometry();
this.color1 = new THREE.Color(0x444444);
this.color2 = new THREE.Color(0x888888);
for (var i = -size; i <= size; i += step) {
var circle = new THREE.CircleGeometry(i, segments);
// Remove center vertex
circle.vertices.shift();
geometry.merge(circle);
var color = i === 0 ? this.color1 : this.color2;
geometry.colors.push(color, color, color, color);
}
THREE.LineSegments.call(this, geometry, material);
However, the lines appear dashed for some reason...