如何使点的three.js 2D图形 [英] How to render 2D shape of points in three.js

问题描述

如何呈现点的three.js 2D形状？我没有找到任何工作的几何形状......我只是需要做的是在同一平面上的点的多边形。

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.

形心不是正确的，由于它仅支持2D COORDS，我需要使用3D点...

Shape isnt right for that as it supports only 2D coords and I need to use 3D points...

我使用下面的code到X中创建形状，​​Y平面

I am using the following code to create shape within the X,Y plane

 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世界吗？任何解决办法？这样的：

How to make in work it 3D world? Any solution? like:

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

等

推荐答案

您需要创建形状的顶点（提取后）一个几何形状和使用三角测量，使脸。

You need to create a geometry with the shapes' vertices (after extraction) and use triangulation to make the faces.

在code应该是这个样子：

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();

这篇关于如何使点的three.js 2D图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！