About the author: Haiyang Zhu, senior engineer, head of the QQ member revenue team of value-added Product Department. Currently, the team is responsible for QQ member, beautiful account, SVIP+, Dawang Chaohui and other projects. He has rich experience in Web front-end architecture.
Introduction:
With the development of software and hardware, the conditions for web 3D development on PC and mobile browsers have been basically mature, there are a lot of JS 3D libraries, Threejs is the leader of JS 3D libraries. There are also some domestic enterprises to try to do some applications, a treasure in 2016 Double 11 with ThreeJS to do a cool 3D publicity page flooded the circle of friends.
Below is a screenshot of a 3D cube animation drawn with Threejs. In this demo, the cube rotates dynamically and Threejs can do this in 30 lines of code. Threejs allows web front-end developers without extensive 3D programming experience to quickly start developing Web 3D applications.
What is Threejs
Threejs’ website description is simple: “Javascript 3D Library.” OpenGL is a cross-platform 3D/2D drawing standard, and WebGL is an implementation of openGL in the browser. Web front-end developers can directly use WebGL interface for programming, but WebGL is only a very basic drawing API, requiring programmers to have a lot of mathematical knowledge and drawing knowledge to complete 3D programming tasks, and the amount of code is huge. Threejs encapsulates WebGL and makes it easy for front-end developers to do Web 3D development without a lot of math and graphics knowledge, lowering barriers and increasing efficiency.
Threejs application scenario example
1. Web 3D games
2. 3D model display
In the example below, the user can interact with the browser, view the car 360 degrees by mouse operation, click the door to enter the car, view the three-dimensional view of the car, as if in the environment.
3. Data visualization
4, web vr
The basics of Threejs
3D programming is quite different from 2D programming, so you need to master some basic concepts of 3D programming. The basics of Threejs include the following: scene, camera, light, objects.
Scene: it’s a three-dimensional space, a container for everything. Think of the scene as an empty room, where we will fill it with objects, cameras and light sources.
Camera: Threejs has to add a camera to the scene. The camera determines the viewing position, direction, Angle, and what the camera sees, which is what we end up seeing on the screen. In the process of running the program, you can adjust the position, direction and Angle of the camera. Imagine putting a camera in a room, and you’re not in the room, but you can move the camera remotely, and the camera feeds the remote computer the image that Threejs shows on the screen.
Light: Without light, the camera can’t see anything, so you need to add a light source to the scene. To get closer to the real world, Threejs allows you to simulate different light sources and show different lighting effects, including light sources, parallel lights, spotlights, and ambient lights.
Objects: With the scene, camera, and light, you can put objects into the scene. In Threejs, objects are made up of shape and material. Shape determines the outline of the object, and material is the material and texture of the object.
Apply colours to a drawing
Threejs draws things that eventually need to be displayed on a rectangular canvas on the screen. To animate, we need to have a redraw mechanism. Due to the reaction speed of optic nerve element, the image will still remain in the human eye for 1/24 second after it disappears. As long as the number of frames drawn in one second exceeds 24, smooth animation effect can be achieved. Threejs provides a redraw interface, and there are two ways to call the interface for redraw. One is setInterval, which is called at a fixed time interval. It can be used for scenarios where we need to render a high number of frames, but in fact, because Javascript is single-threaded, this method doesn’t guarantee the same time interval. SetInterval may be delayed if the browser is busy. The second method is requestAnimationFrame, which lets the browser decide when to redraw at the best frame rate based on, for example, the current CPU load.
location
To facilitate the description of position, coordinate systems are introduced, and Threejs uses a right-handed coordinate system, as shown below. The origin of the coordinate system is located in the geometric center of the rendered canvas. Our description of the position of an object also refers to the position of its geometric center.
The camera
Camera has orthogonal projection camera and perspective projection camera two kinds. Perspective projection and human eyes see the world is the same, near large and far small; The orthogonal projection is the same size from far to far, so any line that is parallel in three dimensions must be parallel in two dimensions. Perspective cameras are good for most scenes because they look just like the real world; Orthogonal projection camera is suitable for mapping, modeling and other scenes, which is convenient to observe the size proportion between models.
The camera in Threejs doesn’t look exactly like a real-world camera, but the visible area of the camera is a cube called the camera’s viewport.
Orthogonal projection camera
OrthographicCamera is a rectangular body determined by six parameters: THREE.OrthographicCamera(left, right, Top, bottom, near, far). These six parameters specify the position of the left, right, top, bottom, front and rear sides of the camera’s display body.
Perspective projection camera
PerspectiveCamera is a trapezoidal body identified by four parameters: THREE.PerspectiveCamera(FOv, aspect, near, far)
Fov is the Angle of the camera in the vertical direction; aspect is width/height ratio, which is usually set as the width/height ratio of the canvas; near and FAR are the distances between the near plane and the camera and the far plane respectively.
Size of projection
Consider a relatively simple scene, the near and far plane of the camera display body is parallel to the XY plane in the coordinate system, so that the content on the near and far plane of the display body can be vertically projected onto the canvas, and any plane parallel to the XY plane in the display body can be projected onto the canvas just equal to the size of the canvas. If the size of the near plane of the perspective projection camera is AXB and the size of the far plane is 2ax2b, then a paper with the size of AXB placed on the near plane will just cover the whole canvas when it is projected onto the canvas. The far plane takes up only a quarter of the area of the canvas (the far plane is four times the area of the near plane). It is precisely because the perspective projection camera’s display body is small and large that the same object in different positions will show the effect of large near and small far. The orthogonal projection camera has the same size of the near and far plane, so the distance of the same object from the camera does not affect the size of the object projected on the canvas.
object
Objects are composed of geometric shapes and materials. The same geometric shape, different materials constitute different objects, such as ball, basketball, glass ball, crystal ball.
The shape of
Threejs provides some common geometric shapes, including three dimensional and two dimensional, such as cuboids, spheres, cylinders, rings, etc., and two dimensional, such as rectangles, circles, sectors, etc. If the shapes provided by default do not meet the requirements, you can also customize them by defining the vertices and the lines between the vertices to draw custom geometric shapes. More complex models can also be modeled by modeling software and imported.
How does a computer draw geometric shapes? We know that computers can only draw straight lines, so how can curves and 3D shapes be drawn?
1. Draw a circle. As shown in the figure below, an approximate circular effect is achieved by drawing the polygon. When the polygon has enough sides, the transition between the two sides is smooth and the polygon looks sufficiently round.
2. Draw 3D models. A common approach is to use a grid of triangles, as shown below. With enough triangles, the rabbit’s body looks smooth enough to be close to the real thing. The famous Stanford rabbit model uses 69,451 triangles.
The material
Threejs provides several representative materials, commonly used diffuse reflection, mirror reflection two kinds of materials, but also can introduce external images, paste on the surface of the object, called texture map.
External model
The real world is rich and colorful, not Threejs several default geometric shapes and materials can be expressed, in practice, a lot of times need to use external models, through 3D modeling software to build three-dimensional models of objects and export model files, Threejs import model files for use.
light
1) Ambient light, which has the same brightness from all angles, is usually used to specify a base brightness for the whole scene without specifying the position of the light source; 2) Point light source, the light source from a point, the brightness of different object surface decreases linearly; 3) Parallel light, brightness has nothing to do with the distance between the light source and the object, but only with the Angle of parallel light and the plane where the object is; 4) Spotlight casts a conical light.
summary
This article gives a brief introduction to Threejs programming to give the reader a basic understanding of Threejs programming. The paper come zhongjue shallow, must know this to practice! Take a look at some interesting demos on Threejs homepage and start writing some simple demos to put into practice. At present, web 3D applications are not widely used due to browser rendering performance, large model size and other reasons, and are only used in some areas such as brand promotion. I just experienced the process of 2D data visualization drawing in browser from Flash to JS (around 2012). I believe that with the improvement of software and hardware performance and the improvement of network speed, 3D web applications will be gradually popularized and used.
Article from: hour light teahouse public account