Three.js网格轴标签问题以及如何在网格上绘制x，y，z数据

Question

我应该在3D网格上绘制井偏差调查。 借助网络上的几篇文章，我完成了具有所需大小的3D网格。 我现在面临的当前问题是x，y和z轴的标签已粘贴到网格上，而不是在场景中放错了位置。

var labelsH = labelAxis(height, data.labels.y,"y");
        labelsH.position.x = width;
        labelsH.position.y = - height +(2*height/a)-20;
        labelsH.position.z = depth;
        scene.add(labelsH);

function labelAxis(width, data, direction){

  var separator = 2*width/data.length,
            p = {
                x:0,
                y:0,
                z:0
            },
            dobj = new THREE.Object3D();

  for ( var i = 0; i < data.length; i ++ ) {
        var label = makeTextSprite(data[i]);

        label.position.set(p.x,p.y,p.z);

        dobj.add( label );
        if (direction=="y"){
            p[direction]+=separator;
        }else{
            p[direction]-=separator;
        }
    //console.log(p.x+":"+p.y+":"+p.z)
  }
  return dobj;
}

有关完整的代码示例，请参见https://jsfiddle.net/3tw3dt1u/ 。

此外，我需要绘制的数据已经在上面提到的jsFiddle中。 由于JavaScript技能最少，我不知道如何将这些数据绘制在网格上以形成如下形式：

请参阅图片以获得所需结果

提前非常感谢您的帮助。

Answer 1

您的问题是关于点的绘制，这是如何完成的：

JSFiddle工作示例

关键点如下。

// Not necessary, but I prefer to use the same scale as they use in their example. It's also easier since the data is according to those scales.
var graphDimensions = {
    w:3000,
    d:3000,
    h:7000
};


var vectors = realData.map(function(d) { // Create vectors from your data
    return new THREE.Vector3(d[0], d[1], d[2]);
});

var curve = new THREE.CatmullRomCurve3(vectors); // Create a curve with the vectors created above

var material = new THREE.LineBasicMaterial({color: "blue"}); // Material for the curve

var geometry = new THREE.Geometry();
var splinePoints = curve.getPoints(5000); // The 5000 in here is the resolution (number of points) on the curve. Increase for a smoother curve, decrease for a more jagged curve.

for (var i = 0; i < splinePoints.length; i++) { // Loop through the points to create vertices in the geometry
  geometry.vertices.push(splinePoints[i]);
}

var line = new THREE.Line(geometry, material); // Create a line with your geometry and material
scene.add(line); // Add it to the scene

line.rotateX(Math.PI / 2); // Orient the line correctly
boundingGrid.position.set(0, -3.5, 1.5); // Move the grid into position
boundingGrid.scale.set(0.001, 0.001, 0.001); // Reduce by whatever scale you want to decrease it in size (otherwise you have to scroll out forever)
line.scale.set(0.001, 0.001, 0.001);