javascript - 通过用户鼠标点击将点添加到点云

Question

我正在使用 Three.js 渲染从服务器检索的点云数据。

对于每个数据集，我循环数据点并创建一个 Three.js Vector3 对象，其中 x、y 和 z 值对应于每个数据点。我将这些顶点中的每一个推到一个列表中，然后将其传递到点组件中几何组件的 vertices 属性中。

render() {
    this.pointCloudVertices = [];
    if (this.props.points) {
        const points = this.props.points
        for (let i = 0; i < points.x.length; i++) {
            const vertex = new THREE.Vector3();

            vertex.x = points.x[i]
            vertex.y = points.y[i]
            vertex.z = points.z[i]

            this.pointCloudVertices.push(vertex);
        }
    }
    return (<points>
        <geometry vertices={this.pointCloudVertices}/>
        <pointsMaterial
            color={ (Math.floor(Math.random()*16777215)) }
            size={ 0.2 }
        />
    </points>);
}

https://github.com/caseysiebel/pc-client/blob/master/src/components/PointCloud.js

我希望用户能够通过单击 Canvas 内部来使用鼠标将点添加到另一个点云(点组件)。

我发现很多资源都指向 Three.js 的 Raycaster，但这个工具似乎更多地用于选择 Canvas 中已有的对象。就我而言，我希望用户能够单击 Canvas 中未被对象占据的区域，让客户端计算出该单击的 x、y 和 z 坐标，然后添加一个顶点，其中 x/y/z 值，到点组件(可能为空，直到用户通过此方式添加点)。

我对如何将 2D 鼠标事件转换为 3D 顶点值有点困惑。如果有人知道关于这个主题的任何好的资源，我很乐意查看它们。

Answer 1

与 THREE.Raycaster() ，我看到了几种解决方案:

1. 使用 .ray 的 .at() 方法属性(property)。像这样:

raycaster.ray.at(100 + Math.random() * 150, rndPoint);

在这里，您可以设置距射线原点的距离约束，从原始相机来看，它看起来像这样:

从侧面看它会是什么样子:

jsfiddle例子。您可以在那里关闭线路。

2.使用.intersectObjects()方法。其中相交的对象是约束平面。例如，我们有立方体形式的平面。当我们通过它们转换射线时，我们总是与两个平面相交，并且相交对象的数组将按距射线原点的距离排序。因此，该数组中的第一个元素将是最近的平面。因此，当我们知道它时，我们可以从point2获取它们的交点和子point1，得到一个新的向量(它的长度和方向)。然后我们在从 point1 到 point2 的向量上的随机位置设置一个点:

intersected = raycaster.intersectObjects(planes.children);
  if (intersected.length > 0){
    var point1 = intersected[0].point;
    var point2 = intersected[1].point;
    var diff = point2.clone().sub(point1);
    var diffLength = diff.length();
    rndPoint = point1.clone().addScaledVector(diff.normalize(), Math.random() * diffLength);
    . . .
  }

从前置摄像头看起来像这样:

从旁边看:

jsfiddle例子。这里也可以切换线路。

或者您可以使用THREE.Raycaster() with THREE.OrthographicCamera() 。哪个更简单)