The use of click and Interactive--raycaster in Threejs

Basic conceptual coordinate system

Our mobile screen is two-dimensional, but we show the world of objects is three-dimensional, when we are building an object, we are in a three-dimensional world is not only the world coordinates to build, and into the screen coordinates to show in front of us, we need to undergo a multi-channel matrix change, the middle WebGL operation for us many things.

• World coordinate system: in WebGL, the world coordinate system is at the center of the screen as the origin (0, 0, 0), and is always the same. You face the screen, your right side is the x positive axis, the top is the y positive axis, the screen points to your z-axis. The unit of length is determined as follows: The window range is exactly ( -1,-1) to (a), that is, the lower-left corner of the screen coordinates ( -1,-1), the upper right corner
  Coordinates are (in).

• Screen coordinate system:
  One of the important functions of WEBGL is to calculate the three-dimensional world coordinates through transformation, projection, etc., and finally figure out the corresponding position on the display device, which is called device coordinates. Coordinates on devices such as screens, printers, and so on are two-dimensional coordinates.

• Viewpoint coordinate system:
  is the direction in the coordinate system with the viewpoint (camera) as the origin, and the direction of the line of sight as the z+ axis in the positive direction. WebGL transforms the world coordinates first to the viewpoint coordinates and then to the clipping, and only the scene within the sight range (see body) goes into the next stage of the calculation.

Raycaster

Raycaster Threejs Official documentation

This class is designed for mouse to get some objects that are selected by the mouse in the 3D world

Raycaster (origin, direction, near, far) the starting vector of the origin-ray. The direction vectors of the direction-rays should be normalized. near-all returned results should be farther than near. Near cannot be negative, the default value is 0. far-all returned results should be closer than far. Far cannot be less than near, and the default value is infinity.

Find out the general idea of clicking an object

When the mouse clicks on the screen, the two-dimensional coordinates p (x, y), plus the depth coordinate of the range (0, 1), can be formed two three-bit coordinates a (x1, y1, 0), B (x2, Y, 1), because their z-axis coordinates are 0 and 1, then the transformation into a projected coordinate system, Must be the point on the front shear plane and the point on the back shear plane, that is, in the projected coordinate system, point a must be at the front of all the models that can be seen, B must be at the end of all the models that can be seen, the AB point is connected to a line, and the object that the AB line crosses is the object being clicked Instead, Three.js provides a ray class raycasting to pick up objects inside the scene. More convenient to use the mouse to operate the 3D scene. (But the two points in the actual code that we make up the ray are the rays that the camera's viewpoint is connected to the point clicked on the screen)

An official example of a raycasting.

Code implementation

  //turn the screen coordinates of the mouse click position into the standard coordinates in the Threejs, as explained in the code explanationmouse.x = (e.clientx/window.innerwidth) * 2-1; Mouse.y=-(e.clienty/window.innerheight) * 2 + 1; //Create a new three-dimensional unit vector assuming the z direction is 0.5    //according to the camera, convert this vector to the viewpoint coordinate system      varVector =NewThree. Vector3 (mouse.x, mouse.y,0.5). Unproject (camera); //A ray is formed in the viewpoint coordinate system, the starting vector of the ray is the camera, the direction vector of the ray is the camera to the point of the click, and this vector should be normalized.     varRaycaster =Newthree.    Raycaster (Camera.position, Vector.sub (camera.position). normalize ()); //Ray and model intersection, select a series of lines    varintersects =raycaster.intersectobjects (objects); Console.log (' imtersrcts= ' +intersects)if(Intersects.length > 0) {        //Select the object that the first ray crossesSELECTED = Intersects[0].object; varintersected = Intersects[0].object; Console.log (intersects[0].object)}}

Code interpretation

// get mouse.x = (e.clientx/window.innerwidth) * 2-1=-(e.clienty/window.innerheight) * 2 + 1; 
    
      The derivation process: set a point for the point of Click (x1,y1), X1
    =e.clintx, y1=E.clienty set a point in the world coordinates of the coordinate value of B (x2,y2);  Since the origin of the coordinate value of point A is in the upper left corner of the screen (0,0); We can calculate the B' value x2' = X1-innerwidth/2 y2 ' = innerheight/2-Y1 and because the range of the world coordinates is [ -1,1], to get the correct B value we Coordinates must be normalized x2 = (X1-INNERWIDTH/2)/(INNERWIDTH/2) = (x1/innerwidth) *2-1 similarly y2 =-(y1/innerheight) * +1

Resources

Pickup in the Three.js
Understanding of various coordinate systems in OpenGL
Threejs Object Pickup
Computer graphics
Front End Pits Guide

The use of click and Interactive--raycaster in Threejs