Three.js Study Notes – "My friends and I are stunned" special effects and Three.js

What is Three.js

Three.js is a webgl third-party library written by JavaScript. provides a lot of 3D display capabilities. Three.js is a 3D engine that runs in a browser, and you can use it to create a variety of three-dimensional scenes, including cameras, lighting, materials and other objects. You can see a lot of brilliant demos on its homepage. However, the engine is still in a relatively immature development phase, with its inadequate APIs and scarce documentation adding to the beginner's learning difficulties (especially the lack of documentation) Three.js's code is hosted on GitHub.

The above is excerpted from Baidu Encyclopedia. in my opinion, it's a 3D engine that appears on the HTML5 canvas. If you 've ever had a local 3D engine, like steam, frost, it's easy to get started.

The difficulty of learning this engine has several points: first, as mentioned above, there is no comparative system of documents, only some of the great God to write the demo, for some JS Foundation is not good or bad English children's shoes simply can not be successive; second, the General People on the game engine inside the texture, light source, Materials and other words are not very understanding . Third, do not know how to debug.

Before you start a formal introduction, you can look at the demo to see what the engine can do.

An example on the official website: http://threejs.org/

The example on GitHub: http://stemkoski.github.io/Three.js/

Some of the more distinctive columns (mention your appetite) ( do not use IE or IE-based browser open!) Chrome is recommended):

The most basic Hello world:http://stemkoski.github.io/three.js/helloworld.html

Call your webcam : http://stemkoski.github.io/Three.js/Webcam-Texture.html

somatosensory operation (you have not read wrong!) ): http://stemkoski.github.io/Three.js/Webcam-Motion-Detection-Texture.html

Support your gamepad (Xbox, etc.): http://stemkoski.github.io/Three.js/Mesh-Movement-Gamepad.html

3D modeling and Direction key control movement direction: http://stemkoski.github.io/Three.js/Model-Animation-Control.html

Skybox and 3 bubble rendering (visible three.js rendering is really good): http://stemkoski.github.io/Three.js/Metabubbles.html

3D red and blue polarized name Auto Show (open front polarizer ): http://threejs.org/examples/webgl_materials_cars_anaglyph.html

The cool-looking periodic table of elements: http://threejs.org/examples/css3d_periodictable.html

Sports Car Games: http://hexgl.bkcore.com/

Have you ever been shocked by your little friends? --at least I am. Not using flash, not a lot of picture splicing, the vast majority of special effects by the code, including the article with pictures of that SS sports car, amazing!

Preparation of the Three.js environment

The text begins now.

My whole example has a lot of references to http://www.hiwebgl.com/?p=1058. To such a translator to express absolute respect! (The original word is Japanese, I look at the English document pressure-free anyway also not bird Japanese ah ... ）

Three.js from the GitHub library: https://github.com/mrdoob/three.js/, download please click on the "Download ZIP" button on the right side of the page . Compare the live examples in: https://github.com/stemkoski/stemkoski.github.com can be downloaded.

Three.js requires at least THREE,JS in the build directory, Three.min.js is a compressed version of the former. The index.html under Docs is an organ-side document (I haven't looked at it in detail, how much quality I can't say). In the example directory are examples, it is worth mentioning that these examples must be hung into the server preview, local open there will be a problem, IIS or Tomcat or Apache can (will say why).

Run the first three.js

The first example is also used to determine if the three.js will function properly. Build a JS folder under Webroot and copy the Three,js into it (Three.min.js is OK).

build a index.html under Webroot, which reads as follows:

<! DOCTYPE html>
 

The implementation of the structure should be so, three.js is also relatively large, the quality of the network may not be good, see the effect of the multi-brush several times: http://tonythegod.eu5.org/three.js/1/demo1.html

From two examples: a controllable cuboid

Final effect (not seen effect multiple brushes several times): http://tonythegod.eu5.org/three.js/1/demo2.html

I didn't advertise to Li Xinghua ... It's just that the book was at my fingertips when I wrote the demo, and then I became a model.

Post the main code with some key notes:

<!doctype html><!--This style sheet mainly writes the body background for #f5f5f5, which is the background color of the entire Web page- -<!--This is JS----the three.js engine.<script src= ". /js/detector.js "></script> <script src=". /js/stats.js "></script> <script src=". /js/orbitcontrols.js "></script> <script src=". /js/threex.keyboardstate.js "></script> <script src=". /js/threex.fullscreen.js "></script> <script src=". /js/threex.windowresize.js "></script> <script src=". /js/texture.js "></script><!--Some JS tool classes, now don't drill down--<div id= "Threejs" style= "z-index:1; Position:absolute; left:0px; top:0px "></div><!--This div is the entire canvas --<script>////////////MAIN//////////////Standard global variables Var co Ntainer, scene, Camera, renderer, controls, stats;<!--The meaning of several variables: containers, scenes, cameras (perspective), renderers, controls--var keyboard = new Threex.keyboardstate (); var clock = new three.        Clock ();        Custom global variables var cube;        Initialization init ();        Animation Loop/game loop animate (); FUNCTIONS/////////////////function init () {<!--initialized --Scene/////////////scene = new three. Scene ();<!--define scenes --CAMERA////////////////Set the view size in pixels (custom or Accordin            g to window size)//var screen_width = Screen_height = 300;            var screen_width = window.innerwidth, screen_height = window.innerheight;            Camera attributes var view_angle = ASPECT = screen_width/screen_height, near = 0.1, far = 20000; Set up camera camera = new three. Perspectivecamera (View_angle, ASPECT, near, far);<!--definition View --Add the camera to the scene scene.add (camera); The camera defaults to position (0,0,0)/So pull it back (z = x) and up (y = +) and set the angle Towa RDS The Scene Origin Camera.position.set (-400, 150, 200);<!--point of view--            Camera.lookat (scene.position); RENDERER//////////////////Create and start the RENDERER;            Choose AntiAlias setting. if (DETECTOR.WEBGL) renderer = new three.            Webglrenderer ({antialias:true}); Else renderer = new three.            Canvasrenderer ();            Renderer.setsize (Screen_width, screen_height);            Attach div element to variable to contain the renderer container = document.getElementById (' Threejs ');            Alternatively:to Create the div at runtime, use://container = document.createelement (' div ');            Document.body.appendChild (container);            Attach renderer to the container div container.appendchild (renderer.domelement); EVENTS////////////////Automatically resize renderer threEx.windowresize (renderer, camera); Toggle Full-screen on given key press THREEx.FullScreen.bindKey ({charcode: ' m '. charCodeAt (0            )            });             CONTROLS//////////////////Move mouse And:left Click to rotate,  Middle Click to zoom,//Right click to pan controls = new three.  Orbitcontrols (camera, renderer.domelement);<!--settings control, only mouse action here--STATS///////////////displays current and past frames per second attain            ed by scene stats = new stats ();            stats.domElement.style.position = ' absolute ';            Stats.domElement.style.bottom = ' 0px ';            Stats.domElement.style.zIndex = 100;            Container.appendchild (stats.domelement); Light///////////////Create a light var light = new three. Pointlight (0XFFFFFF);<!--setting light-upLight.position.set (0, 250, 0);            Scene.add (light); CUBE var cubegeometry = new three. Cubegeometry (260, 35, 185, 1, 1, 1);<!--define a cube, which is the model of the book--var cubematerialarray = []; Cubematerialarray.push (new three. Meshbasicmaterial ({map:new three. Imageutils.loadtexture (' Img/side-up.png ')<!--stickers on each side, and            })); Cubematerialarray.push (new three. Meshbasicmaterial ({map:new three.            Imageutils.loadtexture (' Img/side-up.png ')}); Cubematerialarray.push (new three. Meshbasicmaterial ({map:new three.            Imageutils.loadtexture (' Img/up.png ')}); Cubematerialarray.push (new three. Meshbasicmaterial ({map:new three.            Imageutils.loadtexture (' Img/down.png ')}); Cubematerialarray.push (new three. Meshbasicmaterial ({map:new three.            Imageutils.loadtexture (' Img/side-right.png ')}); Cubematerialarray.push (new three. Meshbasicmaterial ({map:new three.            Imageutils.loadtexture (' Img/side-left.png ')}); var cubematerials = new three.            Meshfacematerial (Cubematerialarray); Cube = new three.            Mesh (Cubegeometry, cubematerials);  Cube.position.set (0, 0, 0);<!--cube Placement--Scene.add (Cube);            } function animate () {requestanimationframe (animate);            Render ();        Update (); } function Update () {///Delta = change in time since last call (in seconds) var delta = Cloc            K.getdelta ();            Controls.update ();        Stats.update ();        } function render () {Renderer.render (scene, camera); } </script></body>
 

In fact , most of the learning three.js is so, because the lack of the corresponding documents, look at the comments that Daniel wrote is the quickest way to get started.

This time first to come here, next time how to paint a little bit on the canvas.

This article was reproduced from Tony's small station: http://tonythegod.eu5.org/three-js-study-notes-study-on-three-js/| Tony's workstation

Three.js Study Notes – "My friends and I are stunned" special effects and Three.js