如何更改Three.js坐标系以匹配DOM转换坐标？

例如，我们如何才能使Three.js中的位置0,0,0从场景的顶部/左侧开始，如使用DOM？如何更改Three.js坐标系以匹配DOM转换坐标？

我想制作一个球体，这样当位置为0,0,0时，它将位于左上方，尺寸将以CSS像素尺寸表示，并且如果尺寸不变视口改变。如果大小为10，我希望这意味着屏幕上跨越了10个CSS px的范围（当Z = 0时）。

编辑：我提出这个问题的相对新的官方three.js所的论坛，我是不知道的：https://discourse.threejs.org/t/how-can-we-make-three-js-scenes-use-dom-style-coordinates/962

来源

2017-10-10 trusktr

您需要设置正确的拼写（而不是透视）投影矩阵以适应像素中的画布大小。正投影矩阵被构建为如下：

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个浮点数的数组定义的4×4矩阵）：

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 ...

来源

2017-10-10 21:05:47

谢谢你的提示Sedenion。什么是右边，左边，顶端，底端，远端，近值？正确== canvasWidth，left == 0？ – trusktr

右上角和下角与视口相关，“左 - 右”给出宽度和“上下”给出高度。远近值与远近剪裁平面有关。是的在你的情况下，'right'是'canvasWidth'和'Left'隐含地是'0'，因为你理论上覆盖了所有的画布。 – 2017-10-10 21:16:00

如何更改Three.js坐标系以匹配DOM转换坐标？

回答

相关问题