步骤1：

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数组来分配每个点的颜色，就像对每个点的位置一样。这样，您可以在光线投射时单独更改它。然后，在创建材质时，您用THREE.VertexColors告诉它读取各个顶点颜色：

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

步骤2：

每次您的光线投射器相交时，您都会得到一个object with several attributes：

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

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

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

1 个答案:

步骤1：

步骤2：