[英]Three JS Gridhelper Polar possible?
I'm using Three JS
and I can add a grid to the scene using the GridHelper . 我正在使用
Three JS
并且可以使用GridHelper将网格添加到场景中。 Is there similar functionality which produces a polar grid? 是否有类似的功能可以产生极坐标网格?
This is how the geometry for a 2D Cartesian plane is generated ( 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 tried rewriting that as follows: 我尝试将其重写如下:
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);
But somehow the lines are dashed... 但是不知何故,线是虚线...
Try some like this: 试试这样:
THREE.PolarHelper = function(radius, rStep, aStep, color) {
var helper = new THREE.Mesh();
function line(r, a, color) {
var material = new THREE.LineBasicMaterial({ color: color });
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( Math.cos(a)*r, Math.sin(a)*r, 0 ),
new THREE.Vector3( -Math.cos(a)*r, -Math.sin(a)*r, 0 )
);
return new THREE.Line( geometry, material );
}
function circle(r, color) {
var curve = new THREE.EllipseCurve( 0, 0, r, r, 0, 2 * Math.PI, false, 0 );
var path = new THREE.Path( curve.getPoints( 72 ) );
var geometry = path.createPointsGeometry( 72 );
var material = new THREE.LineBasicMaterial( { color : color } );
return new THREE.Line( geometry, material );
}
var d = radius/rStep;
for (var r=1; r<=rStep; r++) {
helper.add(circle(r*d, color));
}
d = Math.PI/aStep;
for (var a=0; a<aStep; a++) {
helper.add( line(radius, a*d, color) );
}
return helper;
}
[ https://jsfiddle.net/tzsd5cre/ ] [ https://jsfiddle.net/tzsd5cre/ ]
It is dashed because you use THREE.LineSegments
. 之所以用虚线表示,是因为您使用
THREE.LineSegments
。 This class connects every two subsequent points with as line. 此类将每两个后续点连接为一条线。 So if you want a continuous line you need to duplicate the points in the middle.
因此,如果您想要一条连续线,则需要在中间重复这些点。
To explain it here an example: 在这里举例说明:
v1 = new THREE.Vector3( 0, 0, 0 );
v2 = new THREE.Vector3( 10, 0, 0 );
v3 = new THREE.Vector3( 20, 0, 0 );
v4 = new THREE.Vector3( 30, 0, 0 );
Now if you make a line geometry using these points: 现在,如果使用这些点制作线几何:
geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v3, v4 );
line = new THREE.LineSegments( geometry );
It will look like this: 它看起来像这样:
.__. .__.
1 2 3 4
If you do : 如果您这样做:
geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v2, v3, v3, v4 );
line = new THREE.LineSegments( geometry );
it will look like this: 它看起来像这样:
.__.__.__.
1 2 3 4
The THREE.Line
behaves differently and will connect all vertices with a continuous line instead. THREE.Line
行为有所不同,它将用一条连续的线连接所有顶点。 So this might be more like what you expected: 因此,这可能更像您期望的那样:
geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v3, v4 );
line = new THREE.Line( geometry );
Will draw a continuous line connecting the points from the vertices array: 将绘制一条连续线连接顶点数组中的点:
.__.__.__.
1 2 3 4
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.