THREE.js obj loader with face selection

Question

我正在調整THREE.js示例頁面上的對象加載示例，以允許加載的對象將其面部選中並着色。我的總體策略是遵循步驟here。

但是，由於我沒有使用THREE.geometry對象，因此我無法將此策略與obj加載器代碼拼接在一起。

我目前有射線交叉工作，所以我知道當我點擊對象時，我只是無法着色面部。我知道我需要申請：vertexColors: THREE.FaceColors到obj材料，那是我卡住的地方。

我當前的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爲面部分配顏色，但您需要確保colors屬性應用於BufferGeometry。如果您確實有colors屬性，那麼您很幸運，因爲OBJLoader會爲您提供每個三角形的唯一頂點。

當intersectObjects返回時，Face3應該有a，b和c，我相信應該是indicies到mesh.geometry.attributes.position.array，但他們也將是指數進入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才能使用。