Three.js - 커스텀 셰이프?

Question

나는 three.js에 새로운 ... 지금까지 내가 할 수있는 지점에왔다. 모양을 만들고 카메라보기로 & 장면을 재생한다. 내가 만든 내 프로젝트에서

모양은 구형이며, 나는 재료를 ....에 대한 질감 로 이미지를 사용

내 질문은 사용자 정의 모양 (안 구, 사각형을 ...) 만드는 방법입니까? 예를 들어 반구를 만들려면 어떻게해야합니까? 지금은

내 코드 :

  // create texture 
    texture = THREE.ImageUtils.loadTexture('red.png');  

    // create a sphere shape   
    geometry = new THREE.SphereGeometry(50, 16, 16); 

    // give a shape red color 
    material = new THREE.MeshLambertMaterial({map: texture}); 

    // create an object 
    mesh = new THREE.Mesh(geometry, material); 

Answer 1

(블렌더와 같은 어떤을위한 좋은 three.js exporter 이미 존재) 작성에 3D 편집기를 통해 수출 모델에서, three.js를 지오메트리를 사용하는 여러 가지 방법이 있습니다 처음부터 기하학.

한 가지 방법은 THREE.Geometry의 인스턴스를 만들고 정점을 추가 한 다음 얼굴 인덱스를 추가하는 방법을 배우는 것이지만 쉬운 방법은 아닙니다. 나는 등 THREE.CubeGeometry, THREE.CylinderGeometry, THREE.IcosahedronGeometry, THREE.OctahedronGeometry 같은 (엑스트라/형상의 패키지에있는) 기존 형상)로 시작하는 제안

또한 정말 멋진 클래스가 있습니다 그 돌출 (THREE.ExtrudeGeometry)과 선반 (THREE.LatheGeometry)을 생성 할 수 있습니다. extrusions의 경우 example을 참조하십시오.

반구 생성에 대해 언급했습니다. LatheGeometry를 사용하기에 이상적인 후보입니다. 반원형 경로 (Vector3 인스턴스의 배열)를 작성하고 선반으로 전달하여 반원을 3D로 회전 (반구)하면됩니다. 메시에

var pts = [];//points array - the path profile points will be stored here 
var detail = .1;//half-circle detail - how many angle increments will be used to generate points 
var radius = 200;//radius for half_sphere 
for(var angle = 0.0; angle < Math.PI ; angle+= detail)//loop from 0.0 radians to PI (0 - 180 degrees) 
    pts.push(new THREE.Vector3(Math.cos(angle) * radius,0,Math.sin(angle) * radius));//angle/radius to x,z 
geometry = new THREE.LatheGeometry(pts, 12);//create the lathe with 12 radial repetitions of the profile 

플러그 그 형상을하고 밥의 당신 삼촌 : 다음은 예입니다!

선택적으로 당신은 GeometryUtils를 사용하여 메쉬/피벗을 중심으로 수

THREE.GeometryUtils.center(geometry); 

재밌게을!