你如何从三分中挑选个别点.点对象?

Question

我有一个由单个THREE.Points()表示的点云。我希望通过鼠标单击来挑选单个点。

starsGeometry = new THREE.Geometry();
for ( var i = 0; i < 10000; i ++ ) {
var star = new THREE.Vector3();
star.x = THREE.Math.randFloatSpread( 100 );
star.y = THREE.Math.randFloatSpread( 100 );
star.z = THREE.Math.randFloatSpread( 100 );
starsGeometry.vertices.push( star );
}
var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } );
starField = new THREE.Points( starsGeometry, starsMaterial );
scene.add( starField );

我的选择代码是这样的，但不幸的是它只是选择整个 Points 对象

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
// calculate objects intersecting the picking ray
var intersects = raycaster.intersectObjects( scene.children );
for ( var i = 0; i < intersects.length; i++ ) {
intersects[ i ].object.material.color.set( 0xff0000 );
}

Answer 1

第 1 步：

改变material.color将影响所有点，而不仅仅是一个点。如果要为每个点设置独立的颜色，则必须遵循类似于此示例的内容。关键点是，你必须使用Geometry.colors数组来分配每个点的颜色，就像你对每个点的位置所做的那样。这样，您可以在光线投射发生时单独更改它。然后，在创建材质时，您告诉它使用THREE.VertexColors读取各个顶点颜色：

THREE.PointsMaterial({ vertexColors: THREE.VertexColors });

第 2 步：

每次光线投射器与某些内容相交时，您都会得到一个具有多个属性的对象：

{ distance, point, face, faceIndex, object, uv, instanceId }

如您所发现的，object属性都是点，但您可以使用point属性来获取相交发生位置的 Vec3 位置。您需要遍历geometry.vertices数组才能找到最近的数组，但找到它后，您可以使用在步骤 1 中建立的geometry.color属性更改其颜色。