如何更改Three.js坐标系以匹配DOM转换坐标？
如何更改Three.js坐标系以匹配DOM转换坐标？
提问于 2017-10-10 20:15:58
例如，如何使0,0,0在Three.js中的位置从场景的顶部/左边开始，就像DOM一样？
我想创建一个球体，这样当位置为0,0,0时，它将位于左上角，并且它的大小将在CSS像素尺寸中，并且如果视口的大小发生变化，这个大小不会改变。如果大小为10，我希望这意味着屏幕上跨越10个CSS (当Z=0时)。
编辑:我要把这个问题转移到相对较新的官方Three.js论坛上，这些论坛我没有意识到：https://discourse.threejs.org/t/how-can-we-make-three-js-scenes-use-dom-style-coordinates/962
回答 1
Stack Overflow用户
发布于 2017-10-10 21:05:47
您需要设置正确的正交投影矩阵(而不是透视投影矩阵)，以适应画布的像素大小。正射投影矩阵的构造如下：
S 0 0 0 | S = 2 / right - left
0 T 0 0 | T = 2 / top - bottom
0 0 U 0 | U = -2 / far-near
Tx Ty Tz 1 | 您可以定义投影矩阵如下，以便将世界空间与以像素为单位的屏幕空间相匹配(假设16个浮点数数组中定义了一个4x4矩阵)：
view[ 0] = 2.0 / (canvasWidth);
view[ 5] = 2.0 / -(canvasHeight); // Negate to invert Y coordinates
view[10] = -2.0 / farClip - nearClip;
view[12] = -1.0; // Translate X so left border start at 0
view[13] = 1.0; // Translate Y so top border start at 0
view[14] = 0.0;
view[15] = 1.0;现在你必须找到一种方法在Three.js上设置这个..。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46675225
复制相关文章
相似问题
腾讯云开发者
