Three.jsでは、Blenderからエクスポートされたjsonファイルからジオメトリの頂点カラーを取得する方法は？

Question

私が達成したいのは、ジオメトリの頂点を視覚的に色付けし、その頂点のみをThree.jsでレンダリングすることです。私が取得したい何

：

私は色をマークするためにブレンダーを使用しますが、Three.jsで頂点色を取得することはできません。

マイ手順：

1. はBlenderのキューブを作成します。

   (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：