three.js에서 점의 2D 모양을 렌더링하는 방법

Question

three.js에서 점의 2D 모양을 렌더링하는 방법은 무엇입니까? 나는 작동하는 기하학을 찾지 못했습니다 ... 나는 단지 같은 평면에있는 점들의 다각형을 만들 필요가 있습니다. 그에 대한

는

모양 밤은 권리를 단지 2 차원 좌표를 지원하고 나는 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); 

등

당신은 너무 같은 3D 점에서 다각형 만들 수 있습니다

Answer 1

당신은있는 형상을 만들 필요를 모양 '정점 (추출 후) 및 삼각형을 사용하여면을 만듭니다.

코드는 다음과 같이 보일 것이다 : 하나 개의 평면에 구성된 두 개의 차원 형상이다 기하학의 새로운 유형, THREE.ShapeGeometry이

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

Answer 2

:

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

R51를 사용합니다. 그것의 사용의 예는 여기에서 찾을 수 있습니다 : 당신은 THREE.ShapeGeometry로 변환 shape.makeGeometry()를 호출 한 후 2 차원 형태를 구성하는 THREE.Shape을 사용할 수 있습니다 http://mrdoob.github.com/three.js/examples/webgl_geometry_shapes.html

. 여기에 원을 만드는 의사 코드 예제 : 당신은 세 가지 차원 공간에서 개체 방향을 도울 수

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을.