如何渲染three.js中的點的2D形狀

如何渲染three.js中的點的2D形狀？我沒有找到任何工作的幾何圖形......我只需要製作同一平面上的點的多邊形。如何渲染three.js中的點的2D形狀

形狀的心不是正確的，由於它僅支持2D和COORDS我需要使用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);

等

來源

2012-09-29 Jan Vorisek

您需要創建與幾何形狀的頂點（提取後）並使用三角測量來製作臉部。

代碼應看起來像這樣：

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

來源

2012-09-29 22:59:14 EliSherer

這是什麼形狀？在我的情況下，我創建了一個圓，當我寫'circle.extractPoints'時出錯。 – GvSharma

也許這可能有所幫助：http://stackoverflow.com/a/28029600/678780 – EliSherer

您可以從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

來源

2012-09-29 22:58:26 WestLangley

作爲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它可以幫助你定位在三維空間中的對象。

來源

2012-10-17 01:17:42 jonobr1

如何渲染three.js中的點的2D形狀

回答

相關問題