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

Question

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

形状不适合，因为它只支持 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 );

三.js r.69