THREE.jsフェイスを選択したobjローダー

Question

私はTHREE.jsの例のページにオブジェクトの読み込みの例を適用して、読み込まれたオブジェクトの面を選択して色付けできるようにしています。私の一般的な戦略は、hereの手順に従ったものです。

しかし、私はTHREE.geometryオブジェクトを使用していないので、この戦略をobjローダーコードで組み合わせるのに問題があります。

私は現在、オブジェクトをクリックしているときに知っているので、私は面を着色するのに問題があります。私は適用する必要があることを知っています：vertexColors: THREE.FaceColors objの材料とthatsに私は立ち往生です。

私の現在のOBJローディングコードは次のとおりです。

var loader = new THREE.OBJLoader(manager); 
loader.load(path, function (object) { 
    object.traverse(function (child) { 
     if (child instanceof THREE.Mesh) { 
      var faceColorMaterial = new THREE.MeshBasicMaterial({ color: 0xff00ff, vertexColors: THREE.VertexColors }); 
      child.material = faceColorMaterial; 
      child.geometry.addAttribute("color", new THREE.BufferAttribute(new Float32Array(3 * 3), 3)); 
      child.geometry.dynamic = true; 
     } 
    }); 
    scene.add(object); 
    targetList.push(object); 
}, onProgress, onError); 

をそして、私の検出および着色コード：私はこれを実行すると

var vector = new THREE.Vector3(mouse.x, mouse.y, 1); 
vector.unproject(camera); 
var ray = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); 
var intersects = ray.intersectObjects(targetList, true); 

if (intersects.length > 0) { 
    var colorArray = intersects[0].object.geometry.attributes.color.array; 
    var face = intersects[0].face; 
    colorArray[face.a] = 1; 
    colorArray[face.a + 1] = 0; 
    colorArray[face.a + 2] = 0; 
    colorArray[face.b] = 1; 
    colorArray[face.b + 1] = 0; 
    colorArray[face.b + 2] = 0; 
    colorArray[face.c] = 1; 
    colorArray[face.c + 1] = 0; 
    colorArray[face.c + 2] = 0; 
    intersects[0].object.geometry.attributes.color.needsUpdate = true; 
} 

は、私の物体が黒であると私は顔をクリックすると、彼らは色を変えない。

選択したときに変更が色付けされるようにするには、どのようにコードを変更できますか？

Answer 1

OBJLoaderはBufferGeometryのオブジェクトを返します。FaceColorsを使用しないオブジェクトです。 BufferGeometryはVertexColorsを使用して顔に色を割り当てることができますが、BufferGeometryにはcolors属性が適用されている必要があります。 は、各三角形に固有の頂点を与えるので、colors属性を持っていると運が良いです。

ときintersectObjects戻り、Face3は私がmesh.geometry.attributes.position.arrayになインデックスであるべきと考えているa、b、およびcを、持っている必要がありますが、彼らはまた、mesh.geometry.attributes.color.array配列へのインデックスになるでしょう。

var colorArray = intersects[0].object.geometry.attributes.color.array, 
    face = intersects[0].face; 
colorArray[face.a] = 1; 
colorArray[face.a + 1] = 0; 
colorArray[face.a + 2] = 0; 
colorArray[face.b] = 1; 
colorArray[face.b + 1] = 0; 
colorArray[face.b + 2] = 0; 
colorArray[face.c] = 1; 
colorArray[face.c + 1] = 0; 
colorArray[face.c + 2] = 0; 
intersects[0].object.geometry.attributes.color.needsUpdate = true; 

これは特定の顔が赤くなるはずです。しかし、あなたのジオメトリにcolorsという属性があり、あなたのマテリアルがTHREE.VertexColorsを使用している場合にのみ機能することに十分なストレスはありません。