在vis.js中找到'view'坐标

Question

我正在修改vis.js的Graph3d来做一个填充的折线图，如下所示：

困难的部分 - 毫不奇怪 - 正在计算多边形的渲染顺序。我想我可以通过检查从观察者到给定线B的光线是否穿过A线来做到这一点：

在这个例子中，由于A行是“B行”，我们应该首先绘制A行。我将使用How do you detect where two line segments intersect?中的一段代码来检查线是否交叉。

但是，我还没有想到如何找到用户视图的位置。我有点认为这将是相机对象，所以写了一些调试代码来绘制图形上的相机：

var camera = this._convert3Dto2D(this.camera.getCameraLocation());
ctx.strokeStyle = Math.random()>0.5 ? 'ff0000' : '00ff00';
ctx.beginPath();
ctx.moveTo(camera.x, camera.y);
ctx.lineTo(camera.x, camera.y+5);
ctx.stroke();

实际上，由此测量的相机坐标总是在图表上的0,0,0（这将是上面屏幕上的最右上方）。我认为，我需要的是屏幕的底部。

我怎样才能找到这个？或者有更好的方法来实现我想要做的事情吗？

Answer 1

我不知道这仍然是一个活跃的问题，但是FWIW Graph3D已经对排序顺序进行了内部处理。

使用名为point.bottom的代表坐标，相对于视点对所有图形点进行排序。然后使用此排序完成渲染，首先绘制最远的元素。只要没有元素相交，这就可以正常工作;在这种情况下，你可以期待人工制品。

基本上，您需要做的就是为每个图形多边形定义point.bottom，然后Graph3D将从那里拾取它。

如果您仍然对此感兴趣：

这种情况发生在Graph3d.js方法Graph3d.prototype._calcTranslations()中。有关示例，请查看Grid中Surface和Graph3d.prototype._getDataPoints()图元素的初始化方式。相关代码是：

obj = {};
obj.point = point3d;
obj.trans = undefined;
obj.screen = undefined;
obj.bottom = new Point3d(x, y, this.zRange.min);