javascript 如何在three.js中渲染点的二维形状
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12656138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to render 2D shape of points in three.js
提问by Jan Vorisek
How to render 2D shape of points in three.js? I didnt find any working geometry... I just need to make polygon of points that are in the same plane.
如何在three.js中渲染点的二维形状？我没有找到任何工作几何...我只需要制作在同一平面上的点的多边形。
Shape isnt right for that as it supports only 2D coords and I need to use 3D points...
形状不适合，因为它只支持 2D 坐标，我需要使用 3D 点......
I am using the following code to create shape within the X,Y plane
我正在使用以下代码在 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 );
How to make in work it 3D world? Any solution? like:
如何在工作中打造 3D 世界？有什么解决办法吗？喜欢：
squareShape.moveTo( 0,0,0 );
squareShape.lineTo( 0, 50, 50 );
etc
等等
采纳答案by EliSherer
You need to create a geometry with the shapes' vertices (after extraction) and use triangulation to make the faces.
您需要使用形状的顶点（提取后）创建几何图形并使用三角剖分来制作面。
The code should look something like this:
代码应该是这样的：
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();
回答by WestLangley
You can create a polygon from 3D points like so:
您可以从 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
三.js r.69
回答by jonobr1
As of r51 there is a new type of geometry, THREE.ShapeGeometrywhich is a two-dimensional shape constructed on one plane. An example of its use can be found here: http://mrdoob.github.com/three.js/examples/webgl_geometry_shapes.html
从 r51 开始，有一种新型几何体，THREE.ShapeGeometry它是在一个平面上构造的二维形状。可以在此处找到其使用示例：http: //mrdoob.github.com/three.js/examples/webgl_geometry_shapes.html
You can use THREE.Shapeto construct the 2d shape and then call shape.makeGeometry()to convert it into a THREE.ShapeGeometry. Here's a pseudo-code example that makes a circle:
您可以使用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);
The meshhas position, rotation, and scalewhich can help you orient the object in three dimensional space.
该mesh有position，rotation和scale它可以帮助你定位在三维空间中的对象。
