2012-05-27 1 views
4

three.js에서 동적으로 메쉬를 만드는 방법을 알고 있지만 메쉬에 사용자 정의 UV 및 법선을 추가하는 방법이 명확하지 않습니다. 커스텀 메쉬를 생성하는 방법입니다. UV와 법선을이 메쉬에 프로그래밍 방식으로 추가하려면 어떻게해야합니까?three.js에서 일반 및 UV로 동적 메쉬를 만드는 방법은 무엇입니까?

감사합니다.

var imgTexture = THREE.ImageUtils.loadTexture(image); 
var avatarGeom = new THREE.Geometry(); 

avatarGeom.vertices.push(new THREE.Vector3(0.895813,0.732893,0)); 
avatarGeom.vertices.push(new THREE.Vector3(-1.007173,0.732893,0)); 
avatarGeom.vertices.push(new THREE.Vector3(0.895813,-1.390674,0)); 
avatarGeom.vertices.push(new THREE.Vector3(-1.007173,-1.390674,0)); 

var face = new THREE.Face3(2,3,1); 
avatarGeom.faces.push(face); 

face = new THREE.Face3(0,2,1); 
avatarGeom.faces.push(face); 

var avatar = new THREE.Mesh(avatarGeom,new THREE.MeshLambertMaterial(imgTexture)); 
avatar.doubleSided = true; 
scene.add(avatar); 

답변

7

정상은 face입니다. 자외선은 geometry에 있습니다. 이런 식으로 우리가 서로 다른 채널 (같은 지오메트리의 UV의 다른 세트)를 가질 수 있기 때문에

var imgTexture = THREE.ImageUtils.loadTexture(image); 
var avatarGeom = new THREE.Geometry(); 

avatarGeom.vertices.push(new THREE.Vector3(0.895813,0.732893,0)); 
avatarGeom.vertices.push(new THREE.Vector3(-1.007173,0.732893,0)); 
avatarGeom.vertices.push(new THREE.Vector3(0.895813,-1.390674,0)); 
avatarGeom.vertices.push(new THREE.Vector3(-1.007173,-1.390674,0)); 

var face = new THREE.Face3(2,3,1); 
face.normal.set(0,0,1); // normal 
avatarGeom.faces.push(face); 
avatarGeom.faceVertexUvs[0].push([new THREE.UV(1,1),new THREE.UV(0,1),new THREE.UV(1,0)]); // uvs 

face = new THREE.Face3(0,2,1); 
face.normal.set(0,0,1); // normal 
avatarGeom.faces.push(face); 
avatarGeom.faceVertexUvs[0].push([new THREE.UV(0,0),new THREE.UV(1,1),new THREE.UV(1,0)]); // uvs 

var avatar = new THREE.Mesh(avatarGeom,new THREE.MeshLambertMaterial(imgTexture)); 
avatar.doubleSided = true; 
scene.add(avatar); 

의 UV가 형상에 갈 이유입니다.