Three.js에서 블렌더에서 내 보낸 json 파일에서 지오메트리의 정점 색상을 얻는 방법은 무엇입니까?

Question

내가 원하는 것은 기하학의 정점을 시각적으로 색칠하고 Three.js의 정점 만 렌더링하는 것입니다.

내가 얻고 싶은 것 :

나는 색상을 표시하기 위해 블렌더를 사용하지만 Three.js를에 정점 색상을 얻을 수 없습니다.

내 단계 :

1. 는 블렌더에 큐브를 확인합니다.

   (new THREE.JSONLoader()).load('cube.json', function(geometry) { 
       console.log(geometry.colors); //an empty array ? why? 
   }) 
   

   : 8의 각 블렌더
2. 수출 벤더의 부가 Three.js Blender Export

3. 로드 아래로 Three.js를에서 JSON 파일을 통해 JSON 파일에 큐브에 "정점 페인트"모드에서 다른 색상을 vetices 페인트 cube.json의

내용 :

{ 
    "materials":[], 
    "colors":[16725291,16748308,16770898,16720850,5562367,6553492,11599643,2046719,16777215], 
    "faces":[131,0,1,2,3,0,0,1,2,3,131,4,7,6,5,0,4,5,6,7,131,0,4,5,1,0,0,4,7,1,131,1,5,6,2,0,1,7,6,2,131,2,6,7,3,0,2,6,8,3,131,4,0,3,7,0,4,0,3,5], 
    "vertices":[1,-1,-1,1,-1,1,-1,-1,1,-1,-1,-1,1,1,-1,0.999999,1,1,-1,1,1,-1,1,-1], 
    "metadata":{ 
     "generator":"io_three", 
     "materials":0, 
     "colors":9, 
     "type":"Geometry", 
     "vertices":8, 
     "faces":6, 
     "version":3 
    } 
} 

내가 페인트 정점 색상을 얻을 수 Three.js를있는 방법이 있나요? 또는 정점을 채색하고 Three.js에서 렌더링하는 또 다른 시각적 방법이 있습니까?

Answer 1

모델의 정점을 three.js의 점으로 렌더링하는 것은 THREE.PointsMaterial을 사용하는 것이 가장 쉽습니다. 이 재질은 버텍스 별 색상을 지원하며 색상의 특성을 읽습니다.

그러나 까다로운 부분은 cube.json에이 색상 세트가 정확하게 들어있는 반면 THREE JSONLoader는 얼굴 렌더링을 위해 얼굴 당 정점 색상으로 해석한다는 것입니다. 버텍스 포인트 클라우드의 일부로 렌더링하기 위해서는 버텍스 별 컬러로 다시 변환해야합니다.

// Convert face-vertexcolors to .colors array 
geometry.colors = []; 
for (var faceIndex = 0; faceIndex < geometry.faces.length; faceIndex++) { 
    var face = geometry.faces[faceIndex]; 
    geometry.colors[face.a] = face.vertexColors[0]; 
    geometry.colors[face.b] = face.vertexColors[1]; 
    geometry.colors[face.c] = face.vertexColors[2]; 
} 

// Render mesh as THREE.POINTS 
var pointsMaterial = new THREE.PointsMaterial({ 
    size: 40, 
    sizeAttenuation: true, 
    vertexColors: THREE.VertexColors // This triggers actual usage of the colors 
}); 
var mesh = new THREE.Points(geometry, pointsMaterial); 
mesh.scale.x = mesh.scale.y = mesh.scale.z = 250; 
scene.add(mesh); 

Working example :