基于 Sphere 顶点 ThreeJs 创建形状答案

【问题标题】：Creating shapes based on Sphere vertices ThreeJs基于 Sphere 顶点 ThreeJs 创建形状
【发布时间】：2016-08-02 17:52:31
【问题描述】：

这就是我想要做的，我已经根据公式创建了顶点，并使用 threejs 方法连接了这些顶点之间的线，现在我想根据这些顶点创建形状并将它们连接在一起以使用它们作为地图图块，我的建议是修改形状的顶点 y、x、z 轴，但我无法为这些顶点找到正确的公式：

mesh1 = new THREE.Mesh(); // sphere container
mesh2 = new THREE.Mesh(); // sphere container
mesh3 = new THREE.Mesh(); // sphere container

var R = 5.6; // radius
var LON = 32; var LAT = 16; // approximation

var PILAT = Math.PI/LAT;
var PILON = 2 * Math.PI/LON;

var cos1,cos2,sin1,sin2,t1,t2;
var y1,y2,r1,r2,t1,t2;

var plotG = new THREE.PlaneGeometry(0.06, 0.06);
var lineColor = new THREE.LineBasicMaterial({color: 0xaaaaaa});
var geometry = new THREE.Geometry();

var oldLATCounter = 0;
var oldLONCounter = 0;
for (var i=0; i<LAT; i++){
  t1 = Math.PI - i*PILAT;
  t2 = Math.PI - (i+1)*PILAT;

  oldT1 = Math.PI - oldLATCounter*PILAT;
  oldT2 = Math.PI - (oldLATCounter+1)*PILAT;

  y1 = Math.cos(t1); // 1 latitudes radius y-position;
  y2 = Math.cos(t2); // 2 latitudes radius y-position;

  oldY1 = Math.cos(oldT1); // 1 latitudes radius y-position;
  oldY2 = Math.cos(oldT2); // 2 latitudes radius y-position;

  r1 = Math.abs( Math.sin(t1) ); // 1 latitudes radius;
  r2 = Math.abs( Math.sin(t2) ); // 2 latitudes radius;

  oldR1 = Math.abs( Math.sin(oldT1) ); // 1 latitudes radius;
  oldR2 = Math.abs( Math.sin(oldT2) ); // 2 latitudes radius;

  for (var j=0; j<LON; j++) // walk longitudes segments
  {
    t1 = j*PILON;
    t2 = (j+1)*PILON;

    oldT1 = oldLONCounter*PILON;
    oldT2 = (oldLONCounter+1)*PILON;

    cos1 = Math.cos(t1);
    cos2 = Math.cos(t2);
    sin1 = Math.sin(t1);
    sin2 = Math.sin(t2);

    oldCos1 = Math.cos(oldT1);
    oldCos2 = Math.cos(oldT2);
    oldSin1 = Math.sin(oldT1);
    oldSin2 = Math.sin(oldT2);

    geometry.vertices.push(
      new THREE.Vector3( r1*cos1, y1, r1*sin1 ),
      new THREE.Vector3( r2*cos1, y2, r2*sin1 ),
      new THREE.Vector3( r2*cos2, y2, r2*sin2 )
    );

    geometry.dynamic = true;


    var m1 = new THREE.Mesh( plotG );
    m1.position.set(r2*cos2, y2, r2*sin2);

    // m1.geometry.vertices[0].y = 0;
    // m1.geometry.vertices[0].x = 0;
    // m1.geometry.vertices[0].z = 0;
    // m1.geometry.vertices[1].y = 0;
    // m1.geometry.vertices[1].x = (oldR2*oldCos2) - (r2*cos2);
    // m1.geometry.vertices[1].z = -(oldR2*oldSin2);
    // m1.geometry.vertices[2].y = oldTy2;
    // m1.geometry.vertices[2].x = 0;
    // m1.geometry.vertices[2].z = 0.1;
    // m1.geometry.vertices[3].y = 0;
    // m1.geometry.vertices[3].x = 0;
    // m1.geometry.vertices[3].z = 0.1;

    mesh2.add(m1.clone());

    oldLONCounter = j;
  }
  oldLATCounter = i;
}

mesh2.add( new THREE.Line( geometry, new THREE.LineBasicMaterial({color: 0xaaaaaa}) ) );
scene.add(mesh2);
mesh2.scale.set(R,R,R);
mesh2.position.x =  0;

This is the sphere i'm working on

【问题讨论】：

标签： javascript css math three.js

【解决方案1】：

你检查过 THREE.Shape 类吗？它使您可以根据某些给定点绘制形状/多边形。所以我对你的建议是遍历你需要的顶点并用它们绘制一个形状。

在这里你可以找到更多关于THREE.Shape的信息

如果您想创建具有该形状的几何图形，然后将其添加到网格中，请查看THREE.ShapeGeometry

【讨论】：