带有面部选择的 THREE.js obj 加载器

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 应该返回不使用FaceColors 的BufferGeometry 对象。 BufferGeometry 可以使用VertexColors 为面部分配颜色，但您需要确保将colors 属性应用于BufferGeometry。如果您确实有 colors 属性，那么您很幸运，因为 OBJLoader 为您提供了每个三角形的唯一顶点。

当intersectObjects 返回时，Face3 应该有a、b 和c，我认为它们应该是mesh.geometry.attributes.position.array 的索引，但它们也将是@ 的索引987654336@数组。

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 时才有效。