Three.js Study Summary (i)

Basic structure

These two days began to learn three.js, first for it to shun a basic structure (first need to refer to three.js):

1. Create a WebGL canvas (which is linked to the canvas canvas), (i.e. rendering);

2, create the scene;

3, create the camera and add to the scene;

4. Create the lights and add to the scene (optional, when the object material is required for light, it must be added);

5, create objects and their materials, the two together to create a network and add to the scene;

6, rendering.

1. Create a WebGL canvas (which is associated with the canvas canvas), (i.e. render)

There are two ways, one is that there is already a canvas canvas, the other is not creating a canvas and you need to create it yourself.

        // renderer        New three. Webglrenderer ({            canvas:document.getElementById (' Maincanvas ')        });         // Set Color        // Black

        // When the canvas is not created New three. Webglrenderer ();        Renderer.setsize (+);        document.getElementsByTagName (' body ') [0].appendchild (Renderer.domelement);

2. Create a scene

The scene here is similar in concept to canvas, where objects are placed and scenes are placed on the canvas.

        // Scene        New Three. Scene ();

3. Create camera and add to scene

A camera is like a human eye, and only objects in the camera's field of vision are seen.

         // Camera        New Three. Perspectivecamera (4/3, 1, +);        Camera.position.set (0, 0, 5);        Scene.add (camera);        

4. Create a light and add it to the scene (optional, when the object material is required light, it must be added)

The rich effect of image rendering is largely due to the use of light and shadow, which simulates real-world light by computer.

        // such as setting the Point light        New Three. Pointlight (0XFFFFFF, 1, +);        Light.position.set (ten, 5);        Scene.add (light);    

5. Create an object and its material, both together create a network and add to the scene

Create objects in the scene and select a material for the object to initialize to the network.

    New Three. Mesh (new three. Cubegeometry (1, 2, 3),            new  three.　　Meshbasicmaterial ({                0xff0000            })        ); Scene.add (cube);    

6. Rendering

         // Render        Renderer.render (scene, camera);    

Instance

Also attached are some examples of simple updating learning:

GitHub Address: Https://github.com/zhangxiaoshuang32/WebVR

Online Demo: https://zhangxiaoshuang32.github.io/WebVR/index.html

Three.js Study Summary (i)