Question

使用Three.js，我创建了一个3D散点图。这是一个小提琴的例子......

我生成一些随机点（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显示情节。

我创造了一个小提琴，通过仅创建一个XY网格并注释掉z值来实现这一点。但不幸的是，这似乎将点与网格保持一定距离，而不是像在典型的2D图中那样直接在网格上。这是我的小提琴......

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

我知道将2D.js用于2D绘图可能听起来有些愚蠢，但我希望能够有一个选项，以防数据集只有x和y值作为plottable。

基于上面的小提琴，我怎样才能让点出现在网格上，就像标准的2D情节一样？我是否需要将z坐标设置为特定的？

提前致谢！

Answer 1

从

更改此行（第43行）是不够的

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

到

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

Three.js中的2D散点图

1 个答案: