Shulou(Shulou.com)06/03 Report--

How to start Three.js to make a 3D Earth example analysis, for this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Introduction at the beginning

If you have not been exposed to 3D visualization technology, you may think that visualization is very difficult, and how to calculate the shadow of an object alone is quite complicated, but to tell you the good news, the calculation of shadow is integrated. As long as we set the position of the light source and draw the object, it is really not as complicated as we imagined. This article is oriented to the front-end foundation. But for students with zero visualization basics, I will start with the most basic basic knowledge.

Learning visualization technology will let us have a deeper understanding of the computer, front-end technology, but also can make more interesting things, this article is summed up after I stepped on a lot of holes, I know more clearly where a beginner rookie does not understand.

Three.js is the third-party library of webgl, which is more suitable for less complex visualization projects, and it will be easier to use it for our 3D Earth project, so we choose it and rest assured that we will talk about webgl-related knowledge later.

The current effect is as follows:

one。 About this series of articles

1. Self-reliance: there are similar libraries both in the company and online, but it will be troublesome when you encounter bug or lack of functionality, such as our company's FGL library (a technology for drawing 3D scenes on the intranet), many of the examples on its official website are wrong, and there are a lot of problems to use, such as the inability to accurately select a country, click event melting and other bug. Another example is Echarts's Earth, which pays too much attention to realism and is a bit stuck to use, and does not interact very well.

two。 Straight to the core: last year, I carefully studied three.js by reading books, articles and videos, and made the 3D Earth project, and this series of articles will point to the core knowledge of making 3D maps and try not to spread the knowledge as much as possible.

3. Better introduction: the online teaching articles are all the same, and I feel that it is not easy for a student with zero foundation to understand them. The knowledge points in the teaching video are too extensive and everything is listed in detail, and this series of articles will highlight the focus of drawing 3D Earth.

4. Fellow Chinese: I studied three.js in order to make 3D Earth, during which I took a lot of detours and was stuck by some problems for a long time, so I know more about the confusion of a beginner.

5. Focus on vue: there are few 3D Earth plug-ins on the market specifically for vue to be used out of the box, and we are going to write such a product.

6. Keep learning: writing articles is also a way for me to improve my ability, banging on each knowledge point to let my understanding please climb another tall building.

two。 Mission goal

Get started with three.js technology.

Map out 3D Earth.

Make it into a library specially used by vue.

The concept and basic techniques of shaders will also be introduced later.

Will introduce a small amount of webgl-related usage, and will have some mathematical knowledge.

three。 The plot of the main line of the article and the tasks of the branch line

Main plot: revolves around how to make 3D Earth, this part is carried out in the vue project.

Regional tasks: each scattered knowledge point may have nothing to do with 3D Earth, but it can help us better understand 3D technology, and I will not demonstrate these knowledge points in the vue project. I will create a separate html file to demonstrate.

four。 Understand the coordinate system: don't rush to write the code before you have the basic model

In techniques like drawing graphics, the most basic concept is the coordinate system. The following picture is a two-dimensional coordinate system, and our story begins with this guy.

We use (0,0) to represent the center point of the coordinates, and we can use (0,0) (1,0) to represent a line segment with a length of 1 from the starting point.

When the concept of vector needs to be introduced with mathematical knowledge, the more popular the first few articles, the better.

What we have to deal with in three.js is the following three-dimensional coordinate system.

Its coordinate origin is (0,0,0), and a line segment of length 1 whose starting point is the center point can be (0,0,0) (1,0,0).

Keep in mind here that the default coordinate system set in three.js is this form x to the right, y up, z forward, because it can be modified by default.

In the picture above, the look at this three-dimensional coordinate system is actually oblique above. Normally, when we develop, the z-axis is directly facing our eyes, so you can only see that the z-axis is a point.

When developing and learning, it is best to draw the coordinate system to the page first, which is convenient for us to draw better.

five。 The concept of camera

Suppose there is a holographic projection of a three-dimensional coordinate system directly in front of us, then your eyes are equivalent to a camera, and the coordinate system you see depends on where you are standing.

There is such an object in three.js who is responsible for observing the 3D world we draw from, that is, the origin of the concept of camera.

There are two kinds of cameras, orthographic projection camera and perspective projection camera, orthographic projection camera is how far you stand, the size of the object you see is the same, perspective projection camera is the size of the object, the following is a reference picture (picture from the network).

Orthographic cameras can be used in engineering drawings, or can do some visual deception Mini Game.

The main purpose of this paper is to draw 3D earth, so we mainly use perspective projection camera.

six。 Draw the coordinate system and place the camera (code arrangement)

With the introduction of three.js, you can download the package locally or get the resources on the cdn directly. After the introduction, the THREE object will appear globally, and we can start the programming journey.

Inside the script tag of an ordinary empty html file, there is a story: let's parse sentence by sentence.

Step 1: create a scene, that is, a virtual space

The 3D objects we draw later will be put into this space, and you can think of it as a Hongmeng space artifact, in which there is a small world, and we are the masters (very secondary).

Const scene = new THREE.Scene (); step 2: create the camera

The concept of camera has been mentioned above, PerspectiveCamera this class is perspective projection camera, let's break the meaning of his parameters one by one.

1. 35: the angle of view is the horizontal angle that can be seen between our left and right eyes. the smaller the object is, the larger the object is, because the narrowed vision will highlight the object. You can do an experiment and stare intently at an object. You will find that you can't see the objects that can be seen by the afterlight on the left and right sides at this time, and this is that your perspective becomes smaller. A smaller angle of view can also increase the proportion of the target object, which is enough to understand this number, and we can use this principle to do some amazing animation effects later.

2. Window.innerWidth / window.innerHeight: aspect ratio width / height, where width and height will not write units such as px, the coordinate system is an abstract unit of length, so tell the browser the aspect ratio of the area where we currently display the image (it can be regarded as a percentage layout, just as we use vh vw when we write css layout).

3. 1: near plane, the simple understanding is that when an image is less than 1 distance from the camera, the image is not displayed.

4. 1000: far plane, the simple understanding is that when the distance of an image from the camera is greater than 1000, the image is not displayed.

5. Camera.position.z = 10; if the camera's coordinates are not set, the default is the (0,0,0) coordinate origin, which is similar to the head looking at the coordinate axis on the origin of the coordinate axis, so it is necessary to set a certain distance from the coordinate center, that is, to observe the coordinate system from a distance.

Const camera = new THREE.PerspectiveCamera (35, window.innerWidth / window.innerHeight, 1, 1000); camera.position.z = 10

Boring knowledge: when we play 3D games, do we sometimes have the effect of hollowing out when we are too close to another character? these are probably due to the distance between some parts of him and your camera, less than the distance from the near plane.

The closer the object is to the eye, the bigger it is, and the farther it is, the smaller it is. Because an object is infinitely large and infinitely far, it is meaningless to show a waste of performance, so it is necessary to set the near plane and the far plane.

Step 3: generate a rendering instance

WebGLRenderer generates a rendering instance that renders all of our 3D effects.

SetSize sets the width and height of the scene.

SetClearColor sets the background color, which is not flat, but omni-directional. You can imagine that you are in a room. This color is the color of the walls, floors and ceilings of the house (.5 is transparency).

The rendered instance generated by renderer.domElement, which is to be placed in the corresponding dom container (a canvas tag).

Const renderer = new THREE.WebGLRenderer (); renderer.setSize (window.innerWidth, window.innerHeight); renderer.setClearColor (0x00FFFF, .5) document.body.appendChild (renderer.domElement)

Knowledge: if setClearColor doesn't write, it's black.

Knowledge: setClearColor can directly write "red" this kind of, do not have to hexadecimal.

Step 4: insert coordinate system instance

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

AxisHelper: used to generate auxiliary coordinate instances, and 2 represents the length of this coordinate system, because we don't necessarily need long guides.

Scene: old friend scenario, its add method is to add so-and-so to the scene.

Const axisHelper = new THREE.AxisHelper (2) scene.add (axisHelper) step 5: render

1. The first parameter is the scene and the second parameter is the camera.

Renderer.render (scene, camera)

The following is the effect picture, and the z-axis is directly facing us, so you can't see it:

At the top of the oblique side, you can see the following effect. Later chapters will talk about how to adjust the position and angle of the camera.

The complete code is as follows:

Const scene = new THREE.Scene (); const camera = new THREE.PerspectiveCamera (35, window.innerWidth / window.innerHeight, 1, 1000); camera.position.z = 10; const renderer = new THREE.WebGLRenderer (); renderer.setSize (window.innerWidth, window.innerHeight); renderer.setClearColor (0x00FFFF, .5) document.body.appendChild (renderer.domElement) Const axisHelper = new THREE.AxisHelper (2) scene.add (axisHelper) renderer.render (scene, camera); seven. The first cube

Do not draw a cube feel sorry for the first article this topic, to note that in three.js you can understand that drawing a geometry requires two parts, one is the geometry itself, such as the length, width and height of the geometry, the other is that the material can be simply understood as the color style of the surface. We will often deal with the word      geometry. Let's write it down together.

BoxGeometry Box

Const geometry = new THREE.BoxGeometry (1,2,3)

1: 'long' can also be understood as the length on the x-axis without setting the coordinates.

2: 'high' can also be understood as the length on the y-axis without setting the coordinates.

3: width can also be understood as the length on the z-axis when the coordinates are not set.

The instance from new will have the information about the points of the geometry, the information of faces, and so on. We will talk about this main introduction in more detail later.

MeshBasicMaterial material

The color is the same as the above set setClearColor, any way to write, below is I set a red material. Const material = new THREE.MeshBasicMaterial ({color: 'red'})

Generate a 'grid' Mesh

Const cube = new THREE.Mesh (geometry, material); the mesh contains position information, rotation information, scaling information, etc., he needs two parameters: geometry and material, but in fact, it is not necessary to have a material, which can be displayed without passing the material.

Put into the scene

That is, the scene object scene itself has an add method. Scene.add (cube)

Upper right visual angle

Several ways to put it into the scene

1: I put it directly into geometryscene.add (geometry); there will be an error, which can be understood to mean that it is not a grid object, so it is wrong. When you encounter this kind of error in the future, you must consider the type of error.

2: no material is set

Const cube = new THREE.Mesh (geometry); scene.add (cube)

It was in vain, and the console did not report an error.

eight。 All codes const scene = new THREE.Scene (); const camera = new THREE.PerspectiveCamera (35, window.innerWidth / window.innerHeight, 1, 1000); camera.position.z = 10; const renderer = new THREE.WebGLRenderer (); renderer.setSize (window.innerWidth, window.innerHeight) Renderer.setClearColor (0x00FFFF, .5) document.body.appendChild (renderer.domElement); const axisHelper = new THREE.AxisHelper (2) scene.add (axisHelper) const geometry = new THREE.BoxGeometry (1,2,3); const material = new THREE.MeshBasicMaterial ({color: 'red'}); const cube = new THREE.Mesh (geometry, material); scene.add (cube) Renderer.render (scene, camera); this is the answer to the question from getting started on Three.js to making a sample analysis of 3D Earth. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.