Three.js is a great open source WebGL Library, WebGL allows JavaScript to manipulate the GPU, realizing the true meaning of 3D at the browser end. But at present this technology is still in the development stage, the material is extremely scarce, the amateur learns basically to through the demo source code and three.js own source code to study.
Foreign website Aerotwist.com has six simple introductory tutorials, I try to translate them, and share with you.
I used three.js in some of the experimental projects and I found it really helpful for the fast-start browser 3D programming. By Three.js, you can create cameras, objects, light, textures, and so on, and you can choose a shader, and you can decide which technology (WebGL, canvas, or SVG) to use to render your 3D graphics on a Web page. Three.js is open source and you can even get involved in the project. But now, I'm going to focus on the basics, and I'll show you how to use this engine.
Although Three.js is so wonderful, sometimes it can be maddening. For example, you will spend a lot of time reading routines, doing reverse engineering (in my case) to determine the role of a function, and sometimes asking questions on GitHub. If you need to ask questions, Mr Doob and Alteredqualia are excellent choices.
1. The basic
I assume that your three-dimensional graphics knowledge pass through, but also to some extent mastered the JavaScript. If that's not the case, go ahead and learn a little, or you may be puzzled if you read this tutorial directly.
In our three-dimensional world, we have the following things. I'll take you step-by-step to create them.
1. Scene
2. Render Device
3. Camera
4. Objects (with material)
Of course, you can also create something else, and I hope you do the same.
2. Browser support
Simply look at the browser support. The Google Chrome browser supports three.js, and in my experiment, Chrome is the best for both the renderer and the JavaScript interpreter: it supports canvas, WebGL, and SVG, and runs very fast. The Firefox browser is second, its JavaScript engine is slower than chrome, but it's also good for the renderer, and Firefox is faster and faster as the version changes. Opera browsers are gradually increasing support for WebGL, and the Safari browser on the Mac has an option to turn on the WebGL. In general, the two browsers only support canvas rendering. Microsoft's IE9 now only supports canvas rendering, and Microsoft doesn't seem to be happy to support the new WebGL feature, so we're definitely not going to do experiments with IE9 now.
3. Set the scene
Suppose you have selected a browser that supports all rendering techniques, and you are ready to render the scene via canvas or WebGL (this is a more standardized choice). Canvas is more widely supported than WebGL, but WebGL can operate directly on the GPU, which means that your CPU can focus on working with non-rendering classes, such as physical engines or interacting with users.
Whatever renderer you choose, you must keep in mind that JavaScript code needs to be optimized. Three-dimensional display is not an easy job for browsers (it's great to do this now), so if your rendering is too slow, you need to know where your code bottleneck is, and if possible, improve it.
Having said so much, I think you have downloaded the Three.js source code and introduced it into your HTML document. So how do you start creating a scene? Just like this:
Copy Code code as follows:
Set Scene size
var WIDTH = 400,
HEIGHT = 300;
Set some camera parameters
var view_angle = 45,
ASPECT = Width/height,
NEAR = 0.1,
FAR = 10000;
Getting elements in the DOM structure
-Suppose we use jquery.
var $container = $ (' #container ');
Create renderer, camera, and scene
var renderer = new THREE. Webglrenderer ();
var camera =
New THREE. Perspectivecamera (
View_angle,
ASPECT,
NEAR,
FAR);
var scene = new THREE. Scene ();
Add a camera to a scene
Scene.add (camera);
The initial position of the camera is the origin.
Pull back some of the camera (translator: So you can see the original point)
CAMERA.POSITION.Z = 300;
Start renderer
Renderer.setsize (WIDTH, HEIGHT);
Add the renderer to the DOM structure
$container. Append (renderer.domelement);
You see, it's easy!
4. Build the grid surface
Now we have a scene, a camera and a renderer (in my case, of course, a WebGL renderer), but we actually haven't painted anything yet. In fact, Three.js provides support for loading several standard format 3D files, which is great if you're modeling in BLENDER,MAYA,CINEMA4D or some other tool. For simplicity (after all, this is just the beginning!) We will consider primitives first. Primitives are basic geometric surfaces, such as the most basic spheres, planes, cubes, and cylinders. Using Three.js, you can easily create these primitives:
Copy Code code as follows:
Set the sphere parameters (Translator Note: The sphere is divided into 16x16 grid, if the latter two parameters take 4, 2, then generate an eight-face, please imagine)
var radius = 50,
segments = 16,
rings = 16;
Material overlay on geometry to generate mesh
var sphere = new THREE. Mesh (
New THREE. Spheregeometry (
Radius
Segments,
Rings),
Spherematerial);
Add mesh to the scene
Scene.add (Sphere);
Okay, but what about the material on the ball? We've used a spherematerial variable in the code, and we haven't defined it yet. Let's take a look at how to create the material first.
5. Material
There is no doubt that this is the most useful part of three.js. This section provides several very easy-to-use generic material models:
1.Basic Material: A material that does not take into account the light, it is now only said.
2.Lambert Material: (Translator note: Lambert surface, isotropic reflection).
3.Phong Material: (Translator Note: Fengshi surface, shiny surface, reflecting between specular reflection and Lambert reflection, describing real-world reflection).
In addition, there are other types of materials, for simplicity, you will be left to explore. In fact, when using the WebGL type of renderer, the material is really good. Why, then? Because in native WebGL you have to write a shader for each rendering yourself, the shader itself is a huge project: simply saying that the shader is written using the GLSL language (OpenGL shader language) to manipulate the GPU, which means you have to simulate lighting, reflection, and so on mathematically, This quickly became a very complex task. Thanks to Three.js you don't have to write your own shader, of course, if you want to write it yourself, you can use Meshshadermaterial, which is a very flexible setting.
Now, let's cover the sphere with the Lambert surface material:
Copy Code code as follows:
Create the material on the surface of the sphere
var spherematerial =
New THREE. Meshlambertmaterial (
{
color:0xcc0000
});
It is worth pointing out that when creating textures, there are many other parameters that can be specified in addition to color, such as smoothness and environment mapping. You may need to retrieve this wiki page to identify which attributes can be set on the material, or on any object provided by the Three.js engine.
6. Light
If you want to render the scene now, you will see a red circle. Although we covered the sphere with the Lambert surface material, there was no light in the scene. So by default, Three.js will return to full ambient light, and the object's look is the color of the object's surface. Let's add a simple point light source:
Copy Code code as follows:
Create a Point light source
var pointlight =
New THREE. Pointlight (0xFFFFFF);
Set the location of the point light
pointlight.position.x = 10;
POINTLIGHT.POSITION.Y = 50;
Pointlight.position.z = 130;
Add Point light to Scene
Scene.add (Pointlight);
7. Rendering Loop
Obviously, everything about the renderer is set up. Everything is ready, and now we just need to:
Copy Code code as follows:
Draw!
Renderer.render (scene, camera);
You're likely to be rendering more than once, so if you're going to do a loop, you should use Requestanimationframe. This is the best way to handle animations in a browser, though not yet fully supported, but I strongly recommend that you take a look at Paul Irish's blog.
8. Common Object Properties
If you take the time to browse through the Three.js source code, you will find that many objects inherit from Object3d. This base class contains a number of useful properties, such as location, rotation, and scaling information. In particular, our sphere is a mesh object, and the mesh object inherits from the Object3d object, but adds some of its own properties: geometry and material. Why are you saying this? Because you're not going to be satisfied with a ball on the screen that doesn't do anything, and the attributes in the base class allow you to manipulate the details of the mesh object at a lower level and a variety of textures.
Copy Code code as follows:
Sphere is a Mesh object
Sphere.geometry
Sphere contains some information about dot and dough
Sphere.geometry.vertices//An array
Sphere.geometry.faces//Another array
Mesh object inherits from Object3d object
Sphere.position//contains x,y,z
Sphere.rotation//Ditto
Sphere.scale//... Ditto
9. A nasty secret.
I hope that you can quickly understand: if you modify, for example, the vertex properties of a mesh object vertices, you will find that in the rendering loop, nothing has changed. Why? Because three.js the mesh object's information into some sort of optimization structure. What you really have to do is give Three.js a logo and tell it that if something changes, you need to recalculate the structure in the cache:
Copy Code code as follows:
Sets the geometry to dynamic so that the vertices in the changes are allowed to change
Sphere.geometry.dynamic = true;
Tell Three.js that you need to recalculate the vertices
Sphere.geometry.__dirtyvertices = true;
Tell Three.js that you need to recalculate the vertices
Sphere.geometry.__dirtynormals = true;
There are more logos, but I find these two are most useful. You should simply identify the properties that really need to be calculated in real time to avoid unnecessary overhead.
10. Summary
I hope this simple introduction will be of some help to you. There is nothing like a roll up sleeve to practice, and I strongly recommend that you do so. It's interesting to run 3D programs in a browser, and using an engine like three.js eliminates a lot of hassle and allows you to focus on the really cool things from the start.
I have packaged the source code for this tutorial and you can download it as a reference.
