Three.js 中的二维散点图

Question

使用 Three.js，我创建了一个 3D 散点图。这是一个 fiddle...

的例子

我生成一些随机点 (x, y, z) 并将它们添加到图中。这是我用来执行此操作的 for 循环的示例：

for (var i = 0; i < 50; i++) {

    colors[i] = new THREE.Color(1, 1, 1);
    colors[i].setHSL(1000 / 2000, 1, 0.5);

    var material = new THREE.PointCloudMaterial({
        size: 5,
        vertexColors: THREE.VertexColors,
        transparent: true,
        useScreenCoordinates: false
    });

    material.color.setHSL(1.0, 0.2, 0.7);

    var vertex = new THREE.Vector3();

    var max = 50;
    var min = -50;

    vertex.x = Math.random() * (max - min) + min;
    vertex.y = Math.random() * (max - min) + min;
    vertex.z = Math.random() * (max - min) + min;

    geometry.vertices.push(vertex);

}

实际上，这些点是根据数组中的值绘制的。假设我有一个仅包含 x 和 y 值 (2D) 的数据集。我仍然希望能够使用 Three.js 显示情节。

我创建了一个 fiddle 类似的方法，只创建一个 XY 网格，并注释掉 z 值。但不幸的是，这似乎使点远离网格，而不是像您在典型的 2D 图中看到的那样直接位于网格上。这是我的fiddle...

http://jsfiddle.net/jmg157/exr6xc42/1/

我知道将 Three.js 用于 2D 图可能听起来有点傻，但我希望能够在数据集仅具有 x 和 y 值作为可绘制值的情况下使用该选项。

基于上面的fiddle，我怎样才能让点出现在网格上，就像标准的二维图一样？我需要将 z 坐标设置为特定的值吗？

提前致谢！

Answer 1

从

改这一行（第43行）还不够吗

gridXY.position.set(0, 0, -50);

至

gridXY.position.set(0, 0, 0);

?

Three.js 中的二维散点图

2D Scatter Plot in Three.js

three.js