您如何从 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. The key takeaway is that you'll have to use the Geometry.colors array to assign each point's color, just like you did with each point's position. This way you can individually change it when the raycasting occurs. Then, when creating the material, you tell it to read the individual vertex colors with THREE.VertexColors:

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

第 2 步：

每次您的光线投射器与某物相交时，您都会得到 object with several attributes:

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

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

您如何从 THREE.Points 对象中选取单个点？

How do you pick individual points from THREE.Points object?

javascript

point-clouds

three.js

第 1 步：

第 2 步：