在浏览器(窗口)坐标中抓取WebGL对象

时间:2015-01-19 22:31:24

标签: javascript jquery svg three.js webgl

我有一个WebGL项目设置,我想把SVG映射放在上面。

WebGL的原因是制作翻页的书。 (我需要使用WebGL) SVG的原因是将框映射到WebGL纹理中的单词上。

我有WebGL书,我有SVG设置。我只需要知道将两者结合在一起的最佳方法。

我的第一个想法(因为我并不是那么精通WebGL),只是将SVG绝对定位在WebGL画布上,这应该可以正常工作。

但问题是我无法检索WebGL对象的坐标。我一直在寻找可以找到/计算的任何功能或属性,而且无处可去。

那么如何在WebGL中找到页面(纹理,材质)元素左上角的浏览器窗口坐标。

这甚至可能吗?

如果您对如何完成此任务有任何其他建议,我愿意做任何事情,但我必须提醒您,我为本书部分而坚持使用WebGL。如果有更合适的选择,我愿意放弃SVG。

更新 我知道您可以更改对象的x,y和z(材质,纹理),甚至可以将相机移入或移出zindex,这会影响您所看到的内容。但我正在寻找的是,是否有办法获得与浏览器窗口相关的浏览器屏幕像素坐标,无论对象,相机等位于何处?

例如,如果我在WebGL画布上设置了一个填充整个浏览器窗口的多维数据集(宽度:100%和高度:100%)。如何判断多维数据集与浏览器窗口的关系(不在画布中)(以像素为单位)? 我基本上寻找相当于jQuery函数offset()但在WebGL画布中找到对象(左上角坐标)但与窗口有关。并说我放大使用相机,技术上对象没有移动,但对象在屏幕上变小。那我怎么能知道与窗口有关的坐标(因为WebGL中的坐标将保持不变)

0 个答案:

没有答案