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

Question

我正在对 vis.js 的 Graph3d 进行修改以制作填充线图，如下所示：

困难的部分 - 不出所料 - 是计算多边形的渲染顺序。我想我可以通过检查从观察者到给定线 B 的光线是否穿过线 A:

来做到这一点

在这个例子中，由于A线是B线的"in the way"，所以我们应该先画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 的代表性坐标。然后使用此顺序完成渲染，首先绘制距离最远的元素。只要元素的 none 相交，这就可以正常工作；在这种情况下，您可以期待人工制品。

基本上，您需要做的就是为每个图形多边形定义 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);

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

Find 'view' co-ordinates in vis.js

javascript

vis.js