THREE. JS getting started tutorial (5) ten things you should know

Three. js is a great open-source WebGL library. WebGL allows JavaScript to operate on GPUs and implement 3D in the browser. However, this technology is still in its development stage, and there is a shortage of materials. Fans should learn it through the Demo source code and the source code of Three. js.
0. Introduction
Hi, this is my first article on how to write good code. Like many developers, I learned through practice, but I also learned from other experienced developers. In the past few months, I have spent a lot of time on the canvas tag. I think it will be interesting to write down all the tips about WebGL and JavaScript learned during this time period. Some of them are very specific, but some are very general. I hope you like them!
1. Write a prototype as soon as possible
Let's start with something simple. Now you have a wonderful note, so you should write a prototype for the most complex part of the program as soon as possible to see if this technology can implement your ideas. WebGL is very powerful because it can directly manipulate the GPU in the video card, but don't forget that you need JavaScript to access the video card, which is much less efficient than the internal operation of the video card. In fact, your genius idea is likely to be defeated by such simple things.
2. Use THREE. JS to process 3D
Like my friend Hakim, I fully understand the underlying details of the technology we are using. Understanding three. js on the surface is very important, but if you use three. js, it saves you so much trouble. You can use it for Canvas, WebGL, and SVG. You should also find the method that suits your needs.
3. Avoid SetInterval
This is important for all users who use JavaScript to create animations. Why? Assume that you want to execute a function once every 20 ms, and the function needs to be executed for more than 20 ms, then the browser does not care about it after 20 ms, but starts the next execution directly. At least you can use SetTimeout to set it. After a function is executed, execute it again.

In fact, there is a more trendy but semi-finished function called requestAnimationFrame, which is great. It is similar to the setTimeOut function. In addition to these two aspects, the function does not run when the focus of the tab is lost. Now, this function still depends on the browser, and the standard may change later. If you want more information, visit Paul Irish's blog.
4. Use inverted Loop
This is a good trick to make your cycle faster. Use Reverse Order and while loop. For example, this loop:
Copy codeThe Code is as follows:
For (var a = 0; a <arr. length; a ++ ){
// What to do
}

Its execution efficiency is not as efficient as the following loop:
Copy codeThe Code is as follows:
// Assume that the array arr exists.
Var aLength = arr. length;
While (aLength --){
// What to do
}

This may not help you save much cost, because the execution efficiency mainly depends on what you did in the loop body. However, if you want to reduce unnecessary program overhead to the last byte, the next loop will certainly win.

To be honest, the length of array cache mainly affects program execution efficiency. You can (and indeed should) Look at JSPerf to understand this and other factors that affect JavaScript performance.
5. Use textures
It looks attractive to draw any detail of an object in WebGL. However, if possible, you should pay attention to whether you can use textures, because it can greatly improve the performance. In some specific situations, such as shadow or blur effects, you may have to use textures, but in other cases, you should always pay attention to whether you can use textures.
6. Use Cache
I 've tried a lot in my own experiment. In frame loop, you should avoid referencing variables, objects, or anything else. For this reason, it is worth caching all your models and vertices so that you can quickly access them when rendering animations.
7. Disable selected
I love this short piece of code. I put it in any page containing Canvas or WebGL.
Copy codeThe Code is as follows:
// Disable the mouse to select the DOM Element
Document. onselectstart = function (){
Return false;
};

You may only want to disable the selection in the Canvas control. This section is the code I use in projects where the Canvas occupies the entire screen.
8. Avoid defining CSS in JavaScript
Now it's easy to define CSS in JavaScript, especially when you use JQuery.
Copy codeThe Code is as follows:
// Try not to do this
$ ("# Someid" ).css ({
Position: 'relative ',
Height: '30px ',
Width: '300px ',
BackgroundColor: '# A020F0'
});

The problem is that after this is done, Your JavaScript code will soon be filled with various types of CSS definitions, and you will also use *. css files to define CSS, and potential problems are hard to be found. A better way is to use class modularize CSS and define unpredictable CSS classes only in JavaScript.
9. Define the callback function in the object
I love the following code. It is not my own, but it is so neat and beautiful. If you have a large number of callback functions to use, you may use them as follows:
Copy codeThe Code is as follows:
$ ("# Someid"). click (function (){
// Callback function
// False is returned. In JQuery, message transmission and default behavior releasing are blocked.
Return false;
});

Or, you will call back a loose function defined elsewhere in the Code, such
Copy codeThe Code is as follows:
$ ("# Someid"). click (mySuperFunction );
Function mySuperFunction (event ){
// Do many things here
Return false;
}

This may cause some problems. In the first code, you bound an anonymous function to an event. It is difficult to remove the function from the event. Of course you can unbind all functions in an event, but you may bind multiple functions to it, but you only want to unbind one function. In the second case, your function name contaminated the global variable space and reduced the maintainability of the Code. Therefore, consider the following:
Copy codeThe Code is as follows:
$ ("# Someid"). click (callbacks. mySuperFunction );
// All callback functions are in the callbacks object
Var callbacks = {
MySuperFunction: function (event ){
// Work more
Return false;
}
}
// Unbind a function
$ ("# Someid"). unbind ('click', callbacks. mySuperFunction );

This is neat and clean, and avoids the two problems mentioned above.
10. chained ternary Operators
I learned this from Paul Irish's "JQuery, 11 things you should know. This is very useful and you should like it too. We often do this:
Copy codeThe Code is as follows:
// Assign a value to numberBasedOnA based on the value of
// If a is greater than 5, 200 is assigned; otherwise, 38 is assigned.
Var numberBasedOnA = a> 5? 200: 38;

But if you want to do this, for example, what if the value is too small, what if the value is greater than the number, and what if the value is larger, do you understand? In this case, the chained ternary operator is very useful:
Copy codeThe Code is as follows:
Var numberBasedOnA =
A <5? 200:
A <7? 38:
A <11? 15:
A <15? 49:
64;
// More efficient than doing so
// When a> = 15