Photo credit: unsplash.com/photos/30kH…

We are committed to building the first “cloud CAD” collaborative design platform integrating viewing, modeling, assembly and rendering in China.

Object coordinate conversion process is roughly: local coordinates -> world coordinates -> observe space coordinates -> clip space coordinates -> screen space coordinates. The transformation between the observation space coordinate system and the clipping space coordinate system is processed uniformly, and finally the standard equipment coordinate system is obtained.

Originally the world coordinate transformation to observe space coordinates need to be multiplied by the view matrix 1 cameramatrixworldinverse (ViewMatrix)

Then, the transformation from the observation space coordinates to the clipping space coordinates requires multiplying by the camera projection matrix: ProjectMatrix

There is a method vector3. project(Camera) in ThreeJS that combines these two steps:

project( camera ) { 
    return this.applyMatrix4( camera.matrixWorldInverse )
            .applyMatrix4( camera.projectionMatrix ); 
}
Copy the code

Screen coordinates and standard equipment coordinates

Three. js is drawn by using canvas canvas, so the screen coordinate system is the coordinate system in canvas, that is, the upper left corner is the coordinate origin:

  • However, Canvas’s coordinate system is not invariable. The origin is changeable.
  • Coordinate transformation: Operations such as Translate, rotate and zoom can be performed on the Canvas coordinate system.
  • The offset of x and y of the graph drawn after coordinate transformation is based on the new origin, and the rotation Angle and scaling ratio are based on the Angle of the new coordinate system.

In ThreeJS, an object can be viewed as a Mesh, and the coordinates of the Mesh are represented by a Vector3, which contains x, y, and z coordinates. The spatial coordinate system is three-dimensional, its origin is in the center of the screen by default, and the range of x, y and z is [-1,1].

Screen coordinates to world coordinates

The transformation from screen to space coordinates takes two steps: screen coordinates -> Standard device coordinates -> World coordinates

In ThreeJS, the canvas is usually full-screen, so the width and height of the canvas w and h are: window.innerWidth and window.innerHeight, so the point (cx,cy) in the spatial coordinate system of Three is (w/2,h/2) in the screen coordinate system.

Suppose there is a point (x,y) in canvas, and this point is (x1,y1) in the spatial coordinate system, then the transformation formula is: screen coordinate to world coordinate


x 1 = x w ∗ 2 – 1 X1 = \ frac {x} {w} ∗ 2-1

y 1 = – y h ∗ 2 + 1 Y1 = – \ frac {y} {h} ∗ 2 + 1

The formula derivation process is as follows:

  1. First, we know the representation of the points in the spatial coordinate system in the screen coordinate system: cx=w/2, cy=h/2: cx=w/2, cy=h/2: cx=w/2, cy=h/2

  2. Then, the point (x,y) in the screen coordinate system after applying the origin (cx,cy) is represented as: x=x−cx,y ‘=cy− Y: x=x−cx,y’ =cy− Y (because the Y-axis direction of the two coordinates is opposite)

  3. Then normalize (x ‘,y ‘) to between [−1,1], i.e., divide by cx,cy:


x ‘ c x = x – c x c x = x w 2 – 1 = x w ∗ 2 – 1 Cx} ‘\ frac {x} {= \ frac cx} {x – cx} {= \ frac {x} {\ frac {w} {2}} – 1 = \ frac {x} {w} * 2-1

In the same way:


y ‘ c y = c y – y c y = 1 + – y w 2 = – y h ∗ 2 + 1 \frac{y’}{cy} = \frac{cy-y}{cy} = 1 + \frac{-y}{\frac{w}{2}} = -\frac{y}{h} * 2 + 1

The code representation is:

const x = event.clientX;// Click on the coordinate X
const y = event.clientY;// Click on the coordinate Y
// Screen coordinates to standard device coordinates
const x1 = ( x / window.innerWidth ) * 2 - 1;
const y1 = -( y / window.innerHeight ) * 2 + 1;
// Standard device coordinate (z=0.5)
const stdVector = new Vector3(x, y, 0.5);
Copy the code

Then, vector3.unproject (camera) method is used to convert the standard device coordinates to world coordinates:

const worldVector = stdVector.unproject(camera);
Copy the code

World coordinates to screen coordinates

In contrast to the coordinate conversion above, the process of converting world coordinates to screen coordinates is: World > Standard device coordinates -> screen coordinates

Through the Vector3 object method project(camera), the returned result is the standard device coordinate corresponding to the world coordinate worldVector under the change of camera object matrix. The range of standard device coordinate XYZ is [-1,1].

Similarly, suppose the canvas width is W, the height h, the point in the screen coordinate system is (x, y), and the corresponding point in the standard equipment coordinate system is (x1, y1). Switching from the standard device coordinate system to the screen coordinate system is the opposite of the formula we calculated earlier:


x = x 1 ∗ w 2 + w 2 x = x1 * \frac{w}{2} + \frac{w}{2}

y = y 1 ∗ h 2 + h 2 y = y1 * \frac{h}{2} + \frac{h}{2}

First, calculate the center of the screen coordinate system:

const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
Copy the code

The calculated centerX and centerY also represent half of the axes. Then, transform the device coordinate system to the standard device coordinate system using the project method, and then to the screen coordinate system:

const standardVec = worldVector.project(camera);

const screenX = Math.round(centerX * standardVec.x + centerX);
const screenY = Math.round(-centerY * standardVec.y + centerY);
Copy the code

Write in the last

This article introduces Three. Js world coordinates and screen coordinates, explains the transformation and derivation process between coordinates in detail, hope to help you.

This article is published from yuntu 3D big front end team. Any unauthorized reprint of the article is prohibited.