THREE.js obj loader mit Gesichtsauswahl

Question

Ich arbeite daran, das Beispiel für das Laden von Objekten auf der Beispielseite THREE.js anzupassen, damit die geladenen Objekte ihre Gesichter auswählen und färben können. Meine allgemeine Strategie bestand darin, die beschriebenen Schritte here zu folgen.

Da ich jedoch keine THREE.geometry-Objekte verwende, habe ich Probleme, diese Strategie mit dem OBJ-Loader-Code zusammenzufügen.

Ich habe derzeit ray Schnittpunkt funktioniert so weiß ich, wenn ich auf das Objekt klicken, habe ich nur Probleme beim Färben der Gesichter. Ich weiß, ich muss anwenden: vertexColors: THREE.FaceColors auf das obj Material und das ist, wo ich feststecke.

Mein aktueller obj Lade Code lautet wie folgt:

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); 

Und meine Erkennung und Farbcode:

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; 
} 

Als ich das laufen, mein Ziel ist schwarz, und wenn ich die Gesichter klicken, sie ändern ihre Farbe nicht.

Wie kann ich meinen Code ändern, damit die Änderungen bei der Auswahl farblich markiert werden?

Answer 1

OBJLoader sollte BufferGeometry Objekte zurückgeben, die FaceColors nicht verwenden. BufferGeometry kann VertexColors verwenden, um einem Gesicht Farben zuzuweisen, aber Sie müssen sicherstellen, dass das Attribut colors auf das BufferGeometry angewendet wird. Wenn Sie ein colors Attribut haben, dann haben Sie Glück, denn OBJLoader gibt Ihnen eindeutige Scheitelpunkte für jedes Dreieck.

Wenn intersectObjects zurückkehrt, sollte die Face3a haben, b und c, die ich glaube, indicies in die mesh.geometry.attributes.position.array sein sollte, aber sie werden auch Indizes in die mesh.geometry.attributes.color.array Array sein.

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; 

Dies sollte ein bestimmtes Gesicht rot werden. Aber ich kann nicht genug betonen, dass dies nur funktioniert, wenn Ihre Geometrie ein colors Attribut hat und Ihr Material THREE.VertexColors verwendet.