Javascript 如何在three.js中渲染点的二维形状

如何在three.js中渲染点的二维形状？我没有找到任何工作几何体。。。我只需要把同一平面上的点做成多边形

形状是不适合的，因为它只支持二维坐标，我需要使用三维点

我使用以下代码在X，Y平面内创建形状

 var squareShape = new THREE.Shape();
 squareShape.moveTo( 0,0 );
 squareShape.lineTo( 0, 50 );
 squareShape.lineTo( 20, 80 );
 squareShape.lineTo( 50, 50 );
 squareShape.lineTo( 0, 0 );

如何在3D世界中工作？有解决办法吗？比如：

squareShape.moveTo( 0,0,0 );
squareShape.lineTo( 0, 50, 50 );

---

etc

您可以从三维点创建多边形，如下所示：

// geometry
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( 0, 5, 0 ) );
geometry.vertices.push( new THREE.Vector3( 5, -5, -2 ) );
geometry.vertices.push( new THREE.Vector3( -5, -5, 2 ) );
geometry.vertices.push( new THREE.Vector3( 0, 5, 0 ) ); // close the loop

// material
var material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 1 } );

// line
var line = new THREE.Line( geometry, material );
scene.add( line );

---

three.js r.69

您需要使用形状的顶点（提取后）创建一个几何体，并使用三角剖分生成面

代码应该如下所示：

var geometry = new THREE.Geometry();
var shapePoints = shape.extractPoints();
var faces = THREE.Shape.Utils.triangulateShape(shapePoints.shape, shapePoints.holes);
for (var i = 0; i < shapePoints.shape.length; i++) {
    geometry.vertices.push(new THREE.Vector3(shapePoints.shape[i].x, 0, shapePoints.shape[i].y));
}
for (var i = 0; i < faces.length ; i++) {
    var a = faces[i][2] , b = faces[i][1] , c = faces[i][0] ;
    var v1 = shapePoints.shape[a], v2 = shapePoints.shape[b], v3 = shapePoints.shape[c];

    geometry.faces.push( new THREE.Face3(a, b, c) );    
    geometry.faceVertexUvs[0].push(
        [ new THREE.UV(v1.x ,v1.y ), new THREE.UV(v2.x, v2.y), new THREE.UV(v3.x, v3.y)]);
}
geometry.computeCentroids();
geometry.computeFaceNormals();

var geometry=new THREE.geometry（）；
var shapePoints=shape.extractPoints（）；
var faces=THREE.Shape.Utils.triangulateShape（shapePoints.Shape，shapePoints.holes）；
对于（变量i=0；i

从r51开始，出现了一种新型的几何体，

THREE.ShapeGeometry

，它是在一个平面上构造的二维形状。可在此处找到其使用示例：

您可以使用

THREE.Shape

构造二维形状，然后调用

Shape.makeGeometry（）

将其转换为

THREE.ShapeGeometry

。下面是一个构成圆圈的伪代码示例：

var circle = new THREE.Shape();
var radius = 6;

for (var i = 0; i < 16; i++) {
  var pct = (i + 1) / 16;
  var theta = pct * Math.PI * 2.0;
  var x = radius * Math.cos(theta);
  var y = radius * Math.sin(theta);
  if (i == 0) {
    circle.moveTo(x, y);
  } else {
    circle.lineTo(x, y);
  }
}

var geometry = circle.makeGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(geometry, material);

var circle=new THREE.Shape（）；
var半径=6；
对于（变量i=0；i<16；i++）{
var pct=（i+1）/16；
varθ=pct*Math.PI*2.0；
var x=半径*数学cos（θ）；
var y=半径*数学sin（θ）；
如果（i==0）{
圆。移动到（x，y）；
}否则{
圆。线到（x，y）；
}
}
var geometry=circle.makeGeometry（）；
var material=new THREE.MeshBasicMaterial（{color:0xff0000}）；
var mesh=新的三个网格（几何体、材质）；

---

网格

具有

位置

、

旋转

和

比例

，可以帮助您在三维空间中定位对象。

这里的“形状”是什么？在我的例子中，我已经创建了一个圆，当我写“circle.extractPoints”时会出错。