Three.js를 사용하여 일반 다각형 생성

Question

사용자가 제공 한면 수를 기준으로 Three.js를 사용하여 절차 적으로 일반 N -gon을 생성하고 있습니다. 장기적인 목표는 이것을 다면체 프리즘 렌더링의 첫 번째 단계로 사용하는 것입니다.

나는 -on의 정점을 계산하기 위해 here 솔루션을 사용하고 있습니다.

다음은 here이라는 기술을 사용하여 N -gon에 얼굴을 생성합니다.

필요한 지오메트리 객체를 생성하는 내 첫 번째 시도는 메쉬에 추가 한 후 아무것도 렌더링하지 않는 것 다음, 결과 : 너무 오랫동안 그와 함께 놀 후

function createGeometry (n, circumradius) { 

    var geometry = new THREE.Geometry(), 
     vertices = [], 
     faces = [], 
     x; 

    // Generate the vertices of the n-gon. 
    for (x = 1; x <= n; x++) { 
     geometry.vertices.push(new THREE.Vector3(
      circumradius * Math.sin((Math.PI/n) + (x * ((2 * Math.PI)/ n))), 
      circumradius * Math.cos((Math.PI/n) + (x * ((2 * Math.PI)/ n))), 
      0 
     )); 
    } 

    // Generate the faces of the n-gon. 
    for (x = 0; x < n-2; x++) { 
     geometry.faces.push(new THREE.Face3(0, x + 1, x + 2)); 
    } 

    geometry.computeBoundingSphere(); 

    return geometry; 
} 

, 나는 발견 ShapeGeometry 클래스 이것은 위의 예와 같은 정점 알고리즘을 사용하지만,이 하나는 메쉬에 추가 한 후 제대로 렌더링 다음 ShapeGeometry 예와 형상 예를 들어 문제 해결이야 무슨

function createShapeGeometry (n, circumradius) { 

    var shape = new THREE.Shape(), 
     vertices = [], 
     x; 

    // Calculate the vertices of the n-gon.     
    for (x = 1; x <= sides; x++) { 
     vertices.push([ 
      circumradius * Math.sin((Math.PI/n) + (x * ((2 * Math.PI)/ n))), 
      circumradius * Math.cos((Math.PI/n) + (x * ((2 * Math.PI)/ n))) 
     ]); 
    } 

    // Start at the last vertex.     
    shape.moveTo.apply(shape, vertices[sides - 1]); 

    // Connect each vertex to the next in sequential order. 
    for (x = 0; x < n; x++) { 
     shape.lineTo.apply(shape, vertices[x]); 
    } 

    // It's shape and bake... and I helped!   
    return new THREE.ShapeGeometry(shape); 
} 

?

복잡한 정점 계산을 간단한 정수로 바꾸면 문제가없는 다각형이 만들어지기 때문에 카메라 또는 위치 지정에 문제가 있다고 생각하지 않습니다.

제가 처음에 언급했듯이, 저는 이것을 궁극적으로 다면체 렌더링의 첫 단계로 사용하고 싶습니다. ShapeGeometry 객체는 깊이를 제공하기 위해 돌출 될 수 있지만 Three.js가 제공하는 옵션을 사용하더라도 필요한 다면체가 더 불규칙 해지면 장기적으로는 내 필요에 충분하지 않을 수 있습니다.

의견이 있으십니까?

Answer 1

예상대로 기능이 작동합니다. 이 바이올린 http://jsfiddle.net/Elephanter/mUah5/

there is a modified threejs fiddle with your createGeometry function 

에서

봐 그래서 당신이하지 createGeometry 기능에서, 다른 곳에서 문제가

Answer 2

당신은 THREE.CylinderGeometry를 사용하여 프리즘을 만들 수 있습니다; n 형 양면 프리즘를 들어, 당신이 사용할 수

// radiusAtTop, radiusAtBottom, height, segmentsAroundRadius, segmentsAlongHeight 
var nPrism = new THREE.CylinderGeometry(30, 30, 80, n, 4); 

또한 피라미드와 frustums을 만들 CylinderGeometry을 사용할 수 있습니다

; 내장 된 형태의 더 많은 예를 들어, 당신은 체크 아웃 할 수있다 : 당신이 더 일반적인 다면체에 관심이있을 수처럼

http://stemkoski.github.io/Three.js/Shapes.html

당신은 또한 소리 때문에, 당신은 또한 체크 아웃 할 수 있습니다

http://stemkoski.github.io/Three.js/Polyhedra.html

Platonic Solids, Archimedean Solids, Prisms, Antiprisms 및 Johnson Solids의 모델을 포함합니다. 그러나이 프로그램에서 다면체는 모서리의 정점과 원통에 대해 구형을 사용하는 것이 "두껍습니다".

희망이 도움이됩니다.