Question

例如，我们怎样才能让Three.js中的位置0,0,0从场景的顶部/左侧开始，就像使用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

Answer 1

您需要设置正确的正交（而非透视）投影矩阵以适合像素中的画布大小。正交投影矩阵的构建如下：

 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上设置它的方法......

我们如何改变Three.js坐标系以匹配DOM变换坐标？

1 个答案: