Cloud picture 3 d  world coordinates and the screen coordinates
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 threedimensional, 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 fullscreen, 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
The formula derivation process is as follows:

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

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 Yaxis direction of the two coordinates is opposite)

Then normalize (x ',y ') to between [−1,1], i.e., divide by cx,cy:
In the same way:
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:
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.