Javascript 带面选择的THREE.js obj加载程序

我正在修改THREE.js示例页面上的对象加载示例，以允许加载的对象选择其面并着色。我的总体策略是遵循概述的步骤

然而，由于我没有使用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;
}

运行此操作时，对象为黑色，单击面时，它们不会更改颜色

---

如何更改代码以允许在选择时对更改进行着色？

OBJLoader

应返回不使用

FaceColors

的

BufferGeometry

对象

BufferGeometry

可以使用

VertexColors

为面指定颜色，但需要确保

colors

属性应用于

BufferGeometry

。如果您确实有

colors

属性，那么您就很幸运了，因为

OBJLoader

为每个三角形提供了唯一的顶点

当

intersectObjects

返回时，

Face3

应该有

a

、

b

和

c

，我认为它们应该是

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

我的几何体没有一个colors属性，我该如何解决这个问题？我已将vertexColors更新为3。我的materialI的vertexColors已将颜色属性添加到buffergeometry中。但是，当我更新上述代码以反映您建议的更改时，我仍然没有看到任何情况发生。