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

我应该在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;
}

var-labelsH=labelAxis（高度，data.labels.y，“y”）；
labelsH.position.x=宽度；
标签H.position.y=-height+（2*height/a）-20；
labelsH.position.z=深度；
场景。添加（标签）；
功能标签轴（宽度、数据、方向）{
变量分隔符=2*宽度/数据长度，
p={
x:0,，
y:0，
z:0
},
dobj=new THREE.Object3D（）；
对于（变量i=0；i

有关完整的代码示例，请参见

此外，我需要绘制的数据已经在上面提到的JSFIDLE中。由于具备最低限度的javascript技能，我不知道这些数据将如何绘制在网格上以形成如下内容：

---

非常感谢您的帮助。

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

要点如下

// 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);

//没有必要，但我更喜欢使用他们在示例中使用的相同比例。这也更容易，因为数据是根据这些规模。
变量图尺寸={
w:3000，
d:3000，
h:7000
};
var vectors=realData.map（函数（d）{//从数据创建向量
返回新的三个向量3（d[0]，d[1]，d[2]）；
});
var曲线=新的三个.CatmullRomCurve3（向量）；//使用上面创建的向量创建曲线
var material=新的三线基本材质（{color:“blue”}）；//曲线的材质
var geometry=new THREE.geometry（）；
var splinePoints=curve.getPoints（5000）；//这里的5000是曲线上的分辨率（点数）。对于更平滑的曲线增加，对于更锯齿的曲线减少。
对于（var i=0；i

非常感谢simnys。感谢它。我对boundingGrid.position和scale做了一些调整，使网格位于页面中心，并将其缩放得更小。但正如你在这把小提琴中看到的，这条线不会随着研磨位置和缩放比例的变化而移动。我该怎么做才能将线附加到网格上，使其随着网格位置的变化而移动？此外，我还尝试在网格的x、y和z轴周围放置标签。为此，我添加了一些代码，但标签也没有与网格连接。我需要在网格上显示data.labels.x，y，z，如原始问题附带的图像文件所示。希望你也能对此有所启发。谢谢。此外，数据将来自数据库，因此每次的规模可能不同。是否每次都需要相应地更改图形尺寸？这是一条曲线。getPoints（5000）与要绘制的数据有关，或者5000适用于任何类型的数据范围？最简单的方法是确保gridDimensions与接收到的数据一致，比如高度的最大值为7000，然后使用它，因为您的数据点将与该7000相关。getPoints（5000）应该适用于任何情况，它只是曲线将被分割成多少部分。关于标签，我现在没有时间来修复它，但它们在场景中，它们只是放错了位置，您需要将它们放置在与边界网格位置相关的位置。