Three.js Quick Start Tutorials _javascript Tips

Introduction

This article is mainly to explain the related concepts of three.js, to help readers to three.js and related knowledge to form a more complete understanding.

The web has developed rapidly in recent years. With the popularization of HTML5, the performance of Web pages is becoming more and more powerful. The Web page already can make a lot of complex animation, exquisite effect.
However, people are always greedy. So what else can we do on this? One of them is to draw high-performance 3D graphics in a Web page by WebGL.

Opengl,webgl to Three.js

OpenGL Probably many people have heard, it is the most common Cross-platform graphics library.
WebGL is a web-oriented graphical standard based on OpenGL design, which provides a series of JavaScript APIs through which graphics rendering can make use of graphics hardware to achieve higher performance.
Three.js is an easy-to-use graphics library formed by encapsulation and simplification of the WebGL interface.

The simple point of saying: WebGL can be seen as a browser to provide us with the interface, in JavaScript can directly use these APIs to draw 3D graphics, and three.js is on these interfaces to help us encapsulate better use some.

Comparison between WebGL and Three.js

Since we have WebGL, why do we need three.js?
This is because the WEBGL threshold is relatively high and requires relatively more mathematical knowledge. Although WEBGL provides front-end-oriented APIs, essentially WebGL is two different directions from front-end development, with little knowledge overlap. The correlation is just that they're all on the Web platform, all with JavaScript. A front-end programmer may also be familiar with analytic geometry, but also familiar with linear algebra should be very few (for example, to find a reversal matrix to try?) , not to mention the physical meaning of matrix operations in use, which is also relatively missing in teaching.
Therefore, the front-end engineers want a short time to start WebGL is still quite difficult.
As a result, three.js a very good encapsulation of the interface provided by WEBGL, simplifying a lot of details, greatly reducing the cost of learning. Also, there is little flexibility to lose webgl.
Therefore, starting from the Three.js is worth recommending, which allows you to face most of the demand scenarios after a short study.

Three.js's Learning Problems

The introduction of Three.js is relatively simple, but when we really go to school, we find a very awkward problem: the relevant learning materials are very few.
Often this popular library has very good documentation, and many times it is the best route to follow official documentation or official introductory tutorials. But three is not, and its documentation is too concise for beginners.
But the authorities provide a very rich examples, and almost all the usage you need is reflected in some example. But these example are not suitable for getting started, but are suitable for further study after getting started.

Some relatively good tutorials are recommended here:
Three.js Getting Started Guide
This is a good three.js lightweight Introductory tutorial , the author is well written and the basics are straightforward to explain.

Three.js Development Guide (First edition Chinese edition)

Learning Three.js-second Edition
Learning Three.js:The JavaScript 3D Library for WebGL is now a few and best three.js introductory book, a more comprehensive explanation of the various features of Three.js.
If you have the ability, it is recommended to read the second edition of English version, published in 2015, and the current three.js difference is very small.
Since the first edition of the original book published in 2012, most of the concepts are applicable, but many details have changed.
Three.js Introductory Tutorials
This is a foreign translation of a tutorial, a total of six articles . The explanation is not many, more is shows each basic function how to use. More suitable for the students with some graphic basis.

Of course, the actual learning process of these materials is certainly not enough, encountered problems or to find their own data. But here's a reminder that Three.js's updates are quite frequent, now the R80 version, which has been 72nd since the release of R1 in April 2010 (the intermediate version has been skipped). Therefore, some of the information found on the Internet may not be suitable for the current version , need to pay attention to screening (the previous recommended data are more or less the problem).

Some concepts in the Three.js

To display 3D graphics on the screen, the idea is basically this:

Building a three-dimensional space
Three called scene (Scene) Select an observation point and determine the direction/angle of observation
Three called a camera (Camera) to add objects to the scene
There are many kinds of objects in three, including Mesh,line,points, which inherit from the Object3d class to render the observed scene to the specified area on the screen.
Use renderer in three to complete this work

Here's a concrete look at these concepts in three.

Scene

The scene is the container of all objects, and it corresponds to the three-dimensional world we create.

Camera coordinate system

Camera is the observer of the three-dimensional world, in order to observe the world, first we have to describe the position in space.

Three used in the use of the common right hand coordinate system positioning.

Three-dimensional projection

There are two kinds of cameras in three, namely, the forward projection camera Three.orthographiccamera and the perspective projection camera Three.perspectivecamera.

The difference between the orthogonal projection and the perspective projection as shown above, the left is an orthogonal projection, the light emitted by the object is projected parallel to the screen, the square of the near and far is the same size, the right is the perspective projection, near large and small, in line with our usual feeling of seeing things.
Wikipedia: three-dimensional projection

Orthogonal projection camera

Note: the "viewpoint" in the figure corresponds to the camera in the three.
This complements the concept of a visual object: The visual body is a geometry, and only objects in the visual scene will be seen, objects outside the scene will be trimmed out. This is to get rid of unnecessary operations.
The visual body of an orthogonal projection camera is a cuboid, and the Orthographiccamera constructor is this: Orthographiccamera (left, right, top, bottom, near, far)
The camera itself can be seen as a point, and left represents the distance from the camera to the right in both directions. Several other parameters are the same. The six parameters respectively define the position of the six faces of the scene.

It is possible to approximate that objects in the viewport are projected parallel to the near plane, and then the image on the near plane is rendered onto the screen.

Perspective Projector Camera

The viewport of the perspective projection camera is a four-bevel, and its constructor is this: Perspectivecamera (FoV, Aspect, near, far)
FOV corresponds to the angle of view in the figure, which is the angle between the upper and lower sides. Aspect is a near-plane ratio of aspect to height. In addition to the near-plane distance near, far-plane distance far, you can only determine the view of the body.
The perspective projector camera is very much in line with what we usually see, so in most cases we are using a perspective projection camera to show the 3D effect.

Objects

With a camera, what do you want to watch? Add some objects to the scene.
There are many objects for display in three, they all inherit from Object3d class, here we mainly look at mesh and points two kinds.

Mesh

We all know that in the world of computers, an arc is connected by a finite line of finite points. When you have a lot of lines, it looks like a smooth arc.
The three-dimensional models in computers are similar, and the common practice is to describe them in a grid of triangles, which we call the mesh model.

This is the famous Stanford Rabbit. Its position in 3D graphics is similar to the famous Lena in the field of digital image processing.
Look at this rabbit, as the number of triangles increases, its surface becomes smoother/more accurate.

In three, the mesh constructor is like this: mesh (geometry, material)
The geometry is its shape, and the material is its material.
More than mesh, the creation of a lot of objects to use these two properties. Let's take a look at these two important attributes.

Geometry

Geometry, shape, quite intuitive. Geometry to describe the object's shape by the point set used in the storage model and the relationship between the dots (which points make up a triangle).
Three provides a cube (in fact, cuboid), plane (in fact, rectangular), spherical, round, cylindrical, round table, and many other basic shapes;
You can also construct shapes by defining the position of each point yourself;
For more complex shapes, we can also import them through external model files.

Material

Material, material, this is not as intuitive as the shape.
Material is actually the object surface in addition to the shape of all the visual attributes of the collection, such as color, texture, smoothness, transparency, reflectivity, refractive index, hair luminosity.
Here's a look at the relationships between textures (Material), textures (map), and textures (texture).
The material has already been mentioned, and it includes textures and other.
The texture is actually ' paste ' and ' figure ', which includes the pictures and pictures should be posted to where.
The texture, in fact, is ' fig '.
Three provides a variety of materials to choose from, free to choose diffuse reflection/specular reflection and other materials.

Points

After finishing the mesh, let's look at another kind of object--points.
Points is actually a collection of points that have been called particlesystem (particle system) for a long time and renamed points when the R68 version was renamed POINTCLOUD,R72. Renaming is mainly because, mr.doob, a particle system should be a complete system of handling particles and related physical properties, while the points in three is much simpler. So ultimately this class is named points.
The typical effect that points can achieve is this: official example

Light

God said, "Have light!"
The lighting effect is an important factor to enrich the picture.
Three provides a variety of light sources including ambient light ambientlight, point Light pointlight, Spotlight spotlight, directional light directionallight, hemispherical light hemispherelight, etc.
Just add the light source you need in the scene.

Renderer

There are various objects in the scene, as well as light, and the camera that observes the object, it is time to render what you see on the screen. This is what render did.
Renderer binds a canvas object and can set properties such as size, default background color, and so on.
Call the renderer render function, pass in scene and camera, and you can render the image to the canvas.

Let the picture move.

Now, a static picture is already available, how can we make it move?
A very simple idea, change the position of object in the scene AH angle ah various attributes, and then call the render function rendering is good.
So how does the timing of the re-rendering be determined?
HTML5 provides us with Requestanimframe, which automatically calls the incoming function before each page is redrawn.
If we start with this rendering:

function render ()
{
 renderer.render (scene, camera);
}

You just need to change this:

function render ()
{
 requestanimationframe (render);
 Object.position.x + 1;
 Renderer.render (scene, camera);
}

The object can be moved!

Give me a chestnut.

Let's use a simple example to comb through the process.
First, write a page with canvas elements.

<! DOCTYPE html>
 
 

Here's how to do the JavaScript part.
Initialize firstRenderer

function Initrenderer () {
 width = document.getElementById (' Three_canvas '). clientwidth;
 Height = document.getElementById (' Three_canvas '). clientheight;
 renderer = new THREE. Webglrenderer ({
 ///bind canvas to renderer
 canvas:document.getElementById (' Three_canvas ')
 });
 Renderer.setsize (width, height); The render size is set to the same
 Renderer.setclearcolor (0xFFFFFF, 1.0) as canvas;//set default color and transparency
}

Initialize the scene:

function Initscene () {
 scene = new THREE. Scene ();
}

Initialize Camera:

function Initcamera () {
 //simple orthogonal projection camera, in the center of the viewport, the viewport size is the same as the canvas size.
 camera = new THREE. Orthographiccamera (Width/-2, WIDTH/2, HEIGHT/2, Height/-2, 1, 1000);
 Set the position of the camera
 camera.position.x = 0;
 CAMERA.POSITION.Y = 0;
 Camera.position.z =;
 Set the top of the camera to
 camera.up.x = 0;
 CAMERA.UP.Y = 1;
 camera.up.z = 0;
 Set the position of the camera focus (in fact, to determine a direction)
 Camera.lookat ({
 x:0,
 y:0,
 z:0
 });

To uniquely determine the position and direction of a camera, position, up, LookAt three properties are integral.
Here we create an orthographic projection camera, where I keep the viewport size consistent with the screen resolution just for convenience, so that one unit length in the coordinate system corresponds to one pixel of the screen.
We put the camera on the z axis, the coordinate origin, the top of the camera to the Y axis, note that the direction of the up and the direction of the LookAt must be vertical (analogy to their own head).

Add a cube below to the scene:

function Initobject () {
 //Create a cube with a side length of 100
 var geometry = new THREE. Cubegeometry (in);
 Object = new THREE. Mesh (geometry, new THREE. Meshnormalmaterial ());
 Scene.add (object);

Note that we use the normal material meshnormalmaterialso that the color of each surface of the cube is related to the direction in which it is facing, making it easier to observe/debug.

In this simple demo I do not intend to add lighting effects, and the normal material to light is not responsive.
Finally, create an animation loop.

function render () {
 requestanimationframe (render);
 Object.rotation.x + = 0.05;
 OBJECT.ROTATION.Y + = 0.05;
 Renderer.render (scene, camera);
}

Each redraw makes the cube rotate a little bit.
When the page loads well, it's good to call the previous functions.

function Threestart () {
 initrenderer ();
 Initcamera ();
 Initscene ();
 Initobject ();
 Render ();
}
Window.onload = Threestart ();

The full demo is this way:

<! DOCTYPE html>  

After saving as HTML, it will display such a turning cube in the center of the screen

Summary

The introduction to Three.js is here, this article on the three important components are basically mentioned. In fact, there are a lot of things to summarize, but it may seem cumbersome to write in this article, the original intention is to want the reader to read the three.js have an intuitive general understanding, do not intend to involve too much detail.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.