三个JS Gridhelper Polar 可能吗？答案

【问题标题】：Three JS Gridhelper Polar possible?三个JS Gridhelper Polar 可能吗？
【发布时间】：2016-02-14 22:40:46
【问题描述】：

我正在使用Three JS，我可以使用GridHelper 将网格添加到场景中。是否有类似的功能可以产生极坐标？

这是生成二维笛卡尔平面几何的方式 (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);

我尝试改写如下：

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);

但不知何故，这些线是虚线......

【问题讨论】：

什么坐标系有问题：2d 或3d？如果3d -- cylindrical 或spherical 坐标系？
我认为是二维球形

标签： javascript three.js grid polar-coordinates

【解决方案1】：

试试这样的：

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/]

【讨论】：

【解决方案2】：

虚线是因为你使用了THREE.LineSegments。此类将每两个后续点与线连接起来。所以如果你想要一条连续的线，你需要复制中间的点。

这里举例说明：

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 );

现在，如果您使用这些点制作线几何图形：

geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v3, v4 );

line = new THREE.LineSegments( geometry );

看起来像这样：

.__.  .__.
1  2  3  4

如果你这样做：

geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v2, v3, v3, v4 );

line = new THREE.LineSegments( geometry );

看起来像这样：

.__.__.__.
1  2  3  4

THREE.Line 的行为有所不同，它将用一条连续的线连接所有顶点。所以这可能更像你的预期：

geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v3, v4 );

line = new THREE.Line( geometry );

将绘制一条连接顶点数组中的点的连续线：

.__.__.__.
1  2  3  4

【讨论】：