Write in front, long time no see you, before a period of time because of some things a little busy, but never stop learning the footsteps, but also tuned a lot of notes, will be in the future time slowly sent out, from today onwards together into the WebGis, threeJs the current development of a large front-end a direction to begin to learn, and hope that there can help you inside the content of the place is not enough, please also correct, together! Learning progress!
1. Understanding
In recent years the web has seen rapid growth. With the popularization of HTML5, the web page has become more and more powerful. Web pages have been able to make a lot of complex animation, beautiful effects. It is also possible to draw high-performance 3D graphics in the web page through WebGL.
With the significant increase in browser performance and network bandwidth, as well as the implementation of WebGL, so that 3D technology is no longer the exclusive property of desktop programs, more and more Web applications use 3D technology.
treat (sb a certain way)nodeFor example, Web3D technology is used to realize the three-dimensional presentation of the corporate website, so that the corporate image is more intuitive, more three-dimensional to customers, breaking the traditional flat display mode, to create wisdom, personality and innovation of the corporate image. At present, the government has a large number of new infrastructure projects, such asDigital twins, smart cities, smart parks, smart factories, etc. all involve 3D visualization technology.
Today we will tell you how to learn WEB 3D visualization technology systematically.
We can start with the threejs library. threejs is a class library that allows users to get into building webgl projects through javascript. It is well known that learning webgl requires knowledge of graphics, and webgl requires two languages, js and glsl. If we do not use webgl through threejs is bound to escape the underlying knowledge: you must fully understand the shader syntax and write their own vertex coloring slice meta-shading; but you use threejs can obviously conveniently escape these difficult to understand the underlying, for the traditional practitioners of the direct challenge of js shader is indeed difficult.
Learn to first master the basic concepts of what are points, lines, surfaces, geometry, materials, objects, scenes, cameras, renderers, animation, controllers and other basic concepts, to get a most basic scene and 3d object display. Then learn to debug 3D development code. Then you can appeal in depth to the concept of each concept, a detailed understanding of the official website documents the various attributes and concepts of the class.
Then 3d rendering to realism, certainly can not be separated from the PBR, detailed understanding of what is PBR, PBRPhysically based rendering of lighting principles,. Master what is ambient mapping, bump mapping, displacement mapping, radiant light,The environment mapping, metal mapping, roughness mapping and so on, to create a real object display effect. Then master how to draw particle swarm, to draw rain, snow, falling leaves, stars and rivers and other particle effects, and even product particle effects.
Mastered these, basically even into a small door, then it is to realize the ability to interact with objects, how to select and interact with objects in the scene. And also to be able to master the physics engine so that the object has real physical effects, such as gravity, rebound, friction, so that the object interaction will be more realistic.
Then it's time to get into the real world of WEBGL magic, mastering the shader language, controlling GPU rendering, mastering the principles of implementing the underlying wrappers, being able to graphic rendering principles, mastering the writing of vertex shaders and piecewise shaders to draw dynamic flying flags. As well as writing dynamic smoke and dark clouds, water patterns.
Once you've mastered this, you can write cool fireworks for the holidays, and then you can move on to mastering a variety of post-synthesis effects to tweak the entire rendered image, such as creating flickering images, snowflake-feeling stale TV footage, or creating the effect of an underwater world by writing shaders.
Then master the combination of curves and object movement, in addition to shader writing, you can realize a variety of flying lines, radar, wall of light effects. Through the geographic information data, access to building information, you can generate the framework of the building and height rendering of the digital city. Of course, the daily web page may also have some text information logo, want to add text logo 3d effect, you need to master the css3d renderer to render. Of course, if you need to master the rendering of beautiful and real smart park, you need to master the modeling technology, such as learning blender software to build models and optimize the model, in order to finally output to the web page, including animation can also be done with blender in the output to the web page, do not have to work hard to write complex animation, you can visualize the production.
2. Local build Threejs official documentation site
Because the official website is a foreign server, so in order to facilitate learning and quick access to the document, we can build their own official website and documents, easy to view the case at any time and document content for learning.
1, first enter the threejs library GitHub address:/mrdoob/
2、Download the complete code
3. Unzip the project file
4. Command line installation of dependencies
General installation can use npm, yarn and other package management tools, the course to yarn as an example, if not installed can use npm install yarn -g to install.
yarn install
5. Launching the project
yarn start
Just visit your browser:http://localhost:8080
6、Document catalog introduction
build directory:
docs document:
Select Chinese to view the Chinese documentation.
Examples case:
You can use the URL to find the specific case code, such as the file name here: webgl_animation_keyframes. so you can find the corresponding code file in the folder
editor catalog:
The official visual editor allows you to directly import models, modify materials, add lighting effects and more.
3. Use vite to build the development environment
In order to facilitate the modularity of the project learning and development, but do not have to learn too much configuration, increase the cost of learning, so the use of Parcel this web application packaging tool.
Parcel's official website:/getting-started/webapp/
1. Installation
Choose no framework, or vue framework
Delete the others that are not relevant, because at that point THREE is creating a canvas
ThreeJS creation in a few steps
First create the scene, create the camera, create the renderer, create the mesh, set the camera position, render the camera
You have the basic grid in the canvas.
If you want to move.
2. Project setup
Now that Parcel is installed, let's create some source files for our application.Parcel accepts any type of file as an entry point, but an HTML file is a good starting point.Parcel will follow all your dependencies from there to build your application.
Create the src folder and create the file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./assets/css/" />
</head>
<body>
<script src="./main/" type="module"></script>
</body>
</html>
Set up 1 css file
* {
margin: 0;
padding: 0;
}
body {
background-color: skyblue;
}
Create a
import * as THREE from "three".
// (THREE).
// Goal: understand the very basics
// 1. Creating a scene
const scene = new ();
// 2. Creating a camera
const camera = new (
75, / , , and
/ ,
0.1, /, /, /, /, /, /, /
0.1, 0.1, 1000
);
// Set the camera position
(0, 0, 10); // set camera position
(camera).
// Add the object
// Create the geometry
const cubeGeometry = new (1, 1, 1); const cubeMaterial = new ({ color: 0xffff00 });; // Add the object.
const cubeMaterial = new ({ color: 0xffff00 }); // Create the object based on the geometry and material.
// Create an object based on the geometry and material
const cube = new (cubeGeometry, cubeMaterial); // Add the geometry to the scene.
// Add the geometry to the scene
(cube).
// Initialize the renderer
const renderer = new (); // Set the size of the renderer.
// Set the size of the renderer
(, );
// (renderer);
// Add the content of the webgl-rendered canvas to the body
(); // Add the webgl-rendered canvas content to the body.
// Use the renderer to render the scene in via the camera
(scene, camera); // Use the renderer to render the scene in through the camera.
3、Packaging script
So far, we've beenparcelRun the CLI directly, but in yourIt would be useful to create some scripts in the file to simplify this operation.We will also set up a script tousing thiscommand to build your application forProduction.parcel buildFinally, you can alsoUse this field to declare in one place yourentry (in a dictionary, encyclopedia etc)sourceThis way you don't need to add a new file to each of theparcelcommand to repeat them.
：
{
"name": "01-three_basic",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"dev": "parcel src/",
"build": "parcel build src/"
},
"author": "",
"license": "ISC",
"devDependencies": {
"parcel": "^2.4.1"
},
"dependencies": {
"": "^0.7.9",
"gsap": "^3.10.3",
"three": "^0.139.2"
}
}
Installation of dependencies for dependency setup
yarn install
Now you can runyarn buildto build your production program andyarn devStart the development server.
yarn dev
4. Render the first scene and objects
1 Basic concepts
Three dimensional objects have to be rendered on a two dimensional screen. First you have to create a scene to place the object, then eventually how to display the three-dimensional content, you should find a camera, place the camera in a certain position in the scene, and then you want to display it you have to render the content taken by the camera. So it leads to three basic concepts: scene, camera, renderer.
1.1 Scene
Creating a scene is very simple.
// 1. Create the scene
const scene = new ();
1.2 Camera
Creating a Camera Object
// 2. Create the camera
const camera = new (
75, /, / , /, /, /, /, /, /, /, /, /
/ ,
0.1, /, /, /, /, /, /, /
0.1, 0.1, 1000
);
// Set the camera position
(0, 0, 10); // Set the camera position.
There are several different cameras in thePerspectiveCamera(see-through camera)
The first parameter isField of View (FOV).. Field of view angle is the extent of the scene you can see on your monitor no matter what time of day, and it's measured in angles (as distinguished from radians).
The second parameter isAspect ratio.. That is, you divide the value of an object's width by its height. For example, when you play an old movie on a widescreen TV, you can see that the image seems to be squashed.
The next two parameters aresubsection(near) andfar cross-section(far). When some parts of an object are larger than the camera'sfar cross-sectionfarther or more thansubsectionNearer the time, that those parts will not be rendered into the scene. Maybe now you don't have to worry about the effect of this value, but in the future you will be able to set it in your application in order to get better rendering performance.
The vertebra below is the camera perspective vertebra for the demonstration of setting the field of view angle, aspect ratio, near section and far section above.
1.3 Renderer
Next is the renderer. This is where the magic is cast.
// Initialize the renderer
const renderer = new ();
// Set the size of the renderer
(, );
// (renderer);
// Add the content of the webgl-rendered canvas to the body
(); // Add the webgl-rendered canvas content to the body.
// Use the renderer to render the scene in via the camera
(scene, camera); // Use the renderer to render the scene in through the camera.
In addition to creating an instance of the renderer, we need to set the dimensions of a renderer in our application. For example, we can use the width and height of the desired rendering area to allow the renderer to render a scene that fills our application. Thus, we can set the renderer width height to the browser window width height. For more performance-sensitive applications, you can use thesetSizePass in a smaller value, such as/2cap (a poem)/2, which will allow the application to render the scene at half the aspect size when rendering.
following whichrenderer(renderer) dom element () added to our HTML document. The renderer is used to display the scene for us to see the
The last thing you need to do is to take a picture of the scene with the camera and render it. This sentence renders the scene to the canvas.
(scene, camera);
1.4 Adding Cubes
To create a cube, we need aBoxGeometry(cube) object. This object contains all the vertices in a cube (vertices) and noodles (faces）。
Next, for this cube, we need to give it a material to give it color. Here we use theMeshBasicMaterialAll materials have objects that apply to their properties. All materials store objects with properties applied to them. For simplicity, we only set a color attribute with a value of0x00ff00, which is also the color green. There is no difference here from using hexadecimal in CSS or Photoshop (hex colors) The color format to set colors in a consistent way.
For the third step, we need aMesh(Mesh). A mesh contains a geometry and a material that acts on this geometry. We can place a mesh object directly into our scene and let it move freely around the scene.
By default, when we call()The object will be added to the(0,0,0)Coordinates. But it will make the camera and the cube be on top of each other. To prevent this, we just need to move the camera slightly outward.
// Adding objects
// Create the geometry
const cubeGeometry = new (1, 1, 1);
const cubeMaterial = new ({ color: 0xffff00 });
// Create an object based on the geometry and material
const cube = new (cubeGeometry, cubeMaterial); // Add the geometry to the scene.
// Add the geometry to the scene
(cube); // Add the geometry to the scene.
2 Combine the above codes
1, in the project created earlier in the file to write the code
import * as THREE from "three".
// (THREE).
// Goal: understand the very basics
// 1. Creating a scene
const scene = new ();
// 2. Creating a camera
const camera = new (
75, / , , and
/ ,
0.1, /, /, /, /, /, /, /
0.1, 0.1, 1000
);
// Set the camera position
(0, 0, 10); // set camera position
(camera).
// Add the object
// Create the geometry
const cubeGeometry = new (1, 1, 1); const cubeMaterial = new ({ color: 0xffff00 });; // Add the object.
const cubeMaterial = new ({ color: 0xffff00 }); // Create the object based on the geometry and material.
// Create an object based on the geometry and material
const cube = new (cubeGeometry, cubeMaterial); // Add the geometry to the scene.
// Add the geometry to the scene
(cube).
// Initialize the renderer
const renderer = new (); // Set the size of the renderer.
// Set the size of the renderer
(, );
// (renderer);
// Add the content of the webgl-rendered canvas to the body
(); // Add the webgl-rendered canvas content to the body.
// Use the renderer to render the scene in via the camera
(scene, camera); // Use the renderer to render the scene in through the camera.
Effectiveness Demonstration:
