javascript - 如何从 THREE.Points 对象中选取各个点？

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将影响所有点，而不仅仅是一个。如果你想为每个点设置独立的颜色，你必须遵循类似 this example 的规则。 。关键要点是您必须使用 Geometry.colors数组来分配每个点的颜色，就像您对每个点的位置所做的那样。这样您就可以在光线转换发生时单独更改它。然后，在创建 Material 时，您可以使用 THREE.VertexColors 让它读取各个顶点颜色。 :

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

第 2 步:

每次你的光线转换器与某物相交时，你都会得到一个 object with several attributes :

{ 距离、点、面、faceIndex、对象、uv、instanceId }

正如您所发现的，object 属性是所有 个点，但您可以使用 point 属性来获取其中的 Vec3 位置交叉点发生了。您需要循环遍历您的geometry.vertices数组以找到最接近的一个，但是一旦找到它，您就可以使用您的geometry.color属性更改其颜色在步骤 1 中建立。