"WebGL" 2. Basic concepts

Introduction of Three.js

<! DOCTYPE html>
Three main elements: scene, camera and renderer
Scene: The container in the animation, all objects exist in a scene, three-dimensional scenes similar to the canvas in a two-dimensional animation
Camera: A visual angle that shoots a scene and can capture a different scene by switching position and angle
Renderer: Renders the contents of the camera to the browser, and the end user sees the camera's scene through the browser.
The relationship between them
Create a scene: var scene = new three. Scene ();
Create a camera: var camera = new three. Perspectivecamera (Window.innerwidth/window.innerheight, 0.1, 1000);
Create a renderer: var renderer = new three. Webglrenderer ();
Camera specific parameters We will explain in detail later
var New three. Scene ();        var New Three. Perspectivecamera (Window.innerwidth/window.innerheight, 0.1, +);       var New three. Webglrenderer ();       Renderer.setsize (Window.innerwidth, window.innerheight);       Document.body.appendChild (renderer.domelement);
Right-hand coordinate system: WebGL uses the right-hand coordinate system, the new z-axis is added on the basis of two-dimensional coordinates, from the screen to the outside of the screen vertically, if left-hand coordinate system, right-hand coordinate system, WEBGL is using the right image
Point, line, face:
In a three-dimensional world, a point in a three-dimensional coordinate determines a position, a two-point connection consists of a line, and multiple points form a planar or faceted shape, a mesh model called a mesh model.
For the first example, draw a line:
Creating an object in WebGL takes 3 steps:
1. Create a geometry
2. Creating a material for geometry
3. Create a Grid
4. Adding a grid to the scene
var New Three. Cubegeometry (1,1,1); // Geometry var New Three. Meshbasicmaterial ({color:0x00ff00}); // Material var New // grid Scene.add (cube);
WebGL Midpoint by Vector3 Method Creation
Vector3 (x, y, z);//The parameters are X, y, axis coordinates
Create a line geometry the vertices of the geometry to hold the point, colors to hold the color of the vertex
varGeometry =NewThree. Geometry ();//Defining GeometryvarMaterial =NewThree. Linebasicmaterial ({vertexcolors:true} );//Defining MaterialsvarColor1 =NewThree. Color (0x111111), Color2 =NewThree. Color (0x555555 );varPoint1 =NewThree. Vector3 (-50, 0, 50 );varPoint2 =NewThree. Vector3 (0, 0, 100); Geometry.vertices.push (point1);//to store pointsGeometry.vertices.push (Point2); Geometry.colors.push (Color1, color2);//set the color of a vertexvarline =Newthree. Line (geometry, material, three. linepieces); Scene.add (line);
Finally add the above creation scene, scene camera, light and so on, the final example is as follows
    varCamera,renderer,light; varScene =Newthree.        Scene (); functioninit () {width= document.getElementById (' Canvas-frame '). clientwidth; Height= document.getElementById (' Canvas-frame '). clientheight; Renderer=Newthree. Webglrenderer ({antialias:true//anti-aliasing, smoothing        });        Renderer.setsize (width, height); document.getElementById (' Canvas-frame '). appendchild (renderer.domelement); Renderer.setclearcolorhex (0xFFFFFF, 1.0); }    functionInitcamera () {camera=NewThree. Perspectivecamera (width/height, 1, 10000); Camera.position.x= 0; CAMERA.POSITION.Y= 500; Camera.position.z= 0; Camera.up.x= 0; CAMERA.UP.Y= 0; Camera.up.z= 1; Camera.lookat ({x:0, y:0, Z:0        }); }    functioninitlight () { light=NewThree. DirectionalLight (0x110000, 1.0, 0);    Scene.add (light); }    functionInitobject () {varGeometry =Newthree.        Geometry (); varMaterial =NewThree. Linebasicmaterial ({vertexcolors:true } ); varColor1 =NewThree. Color (0x444444), Color2 =NewThree. Color (0xFF0000 ); varPoint1 =NewThree. Vector3 (-50, 0, 50 ); varPoint2 =NewThree. Vector3 (0, 0, 100 );        Geometry.vertices.push (POINT1);        Geometry.vertices.push (Point2);        Geometry.colors.push (Color1, Color2); varline =Newthree. Line (geometry, material, three.        Linepieces);    Scene.add (line);    } init ();    Initcamera ();    Initlight ();    Initobject ();    Renderer.clear (); Renderer.render (scene, camera);
"WebGL" 2. Basic concepts