如何在three.js中渲染点的2D形状

Question

如何在three.js中渲染2D形状的点？我没有找到任何有效的几何体...我只需要制作在同一平面上的点的多边形.

形状不适合它,因为它只支持2D坐标,我需要使用3D点...

我使用以下代码在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 );

等等

Answer 1

您可以从3D点创建多边形,如下所示:

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

Answer 2

从r51开始,存在一种新的几何形状,THREE.ShapeGeometry它是在一个平面上构造的二维形状.可以在此处找到其使用示例:http://mrdoob.github.com/three.js/examples/webgl_geometry_shapes.html

您可以使用THREE.Shape构造2d形状,然后调用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);

该mesh有position,rotation和scale它可以帮助你定位在三维空间中的对象.