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 技能，不知道这些数据将如何绘制在网格上以形成这样的东西：

see image for required result

非常感谢您的帮助。

Answer 1

你的问题是关于点的绘制，这是可以做到的：

JSFiddle working example

要点如下。

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

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

Three.js grid Axis label issue and how to plot x,y,z data on the grid

javascript

plot

three.js

grid

labels