基于Sphere顶点ThreeJ创建形状

时间:2016-04-12 08:37:54

标签: javascript css math three.js

这是我想要做的,我已经基于公式创建了顶点,并使用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

1 个答案:

答案 0 :(得分:0)

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

您可以在此处了解有关THREE.Shape

的更多信息

如果您想创建具有该形状的几何体,然后将其添加到网格物体中,那么还要查看THREE.ShapeGeometry