Three.js tutorial - Lesson 02

Tutorial

  1 <!DOCTYPE html> 
  2 <!-- The previous line tells the browser, that the page uses the HTML5 standard. --> 
  3  
  4 <html>
  5     <head>
  6         <title>Three.js tutorial - Lesson 02</title> 
  7         <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
  8  
  9         <!-- The following meta line optimizes the site for mobile devices. It sets the viewport size 
 10         to the screen size, so it will be displayed maximized, but unscaled. --> 
 11         <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> 
 12         <style type="text/css"> 
 13             body { 
 14                 /* Set the background color of the HTML page to black */ 
 15                 background-color: #000000; 
 16  
 17                 /* Hide oversized content. This prevents the scroll bars. */ 
 18                 overflow: hidden; 
 19             } 
 20         </style> 
 21         <!-- Include Three.js libraries --> 
 22         <script src="../js/r69/three.js"></script> 
 23         <script src="../js/r69/Detector.js"></script> 
 24         <script src="../js/r69/CanvasRenderer.js"></script> 
 25         <script src="../js/r69/Projector.js"></script> 
 26     </head> 
 27     <body>
 28         <!-- This is the DIV element which will contain the WebGL canvas. To be identifiable lateron, 
 29         the id 'WebGLCanvas' is applied to it. --> 
 30         <div id="WebGLCanvas"> 
 31  
 32         <!-- This JavaScript block encloses the Three.js commands --> 
 33         <script> 
 34             // Global scene object 
 35             var scene; 
 36  
 37             // Global camera object 
 38             var camera; 
 39  
 40             // Initialize the scene 
 41             initializeScene(); 
 42  
 43             // Render the scene (map the 3D world to the 2D scene) 
 44             renderScene(); 
 45  
 46             /** 
 47              * Initialze the scene. 
 48              */ 
 49             function initializeScene(){ 
 50                 // Check whether the browser supports WebGL. If so, instantiate the hardware accelerated 
 51                 // WebGL renderer. For antialiasing, we have to enable it. The canvas renderer uses 
 52                 // antialiasing by default. 
 53                 // The approach of multiple renderers is quite nice, because your scene can also be 
 54                 // viewed in browsers, which don't support WebGL. The limitations of the canvas renderer 
 55                 // in contrast to the WebGL renderer will be explained in the tutorials, when there is a 
 56                 // difference. 
 57                 if(Detector.webgl){ 
 58                     renderer = new THREE.WebGLRenderer({antialias:true}); 
 59  
 60                 // If its not supported, instantiate the canvas renderer to support all non WebGL 
 61                 // browsers 
 62                 } else { 
 63                     renderer = new THREE.CanvasRenderer(); 
 64                 } 
 65  
 66                 // Set the background color of the renderer to black, with full opacity 
 67                 renderer.setClearColor(0x000000, 1); 
 68  
 69                 // Get the size of the inner window (content area) to create a full size renderer 
 70                 canvasWidth = window.innerWidth; 
 71                 canvasHeight = window.innerHeight; 
 72  
 73                 // Set the renderers size to the content areas size 
 74                 renderer.setSize(canvasWidth, canvasHeight); 
 75  
 76                 // Get the DIV element from the HTML document by its ID and append the renderers DOM 
 77                 // object to it 
 78                 document.getElementById("WebGLCanvas").appendChild(renderer.domElement); 
 79  
 80                 // Create the scene, in which all objects are stored (e. g. camera, lights, 
 81                 // geometries, ...) 
 82                 scene = new THREE.Scene(); 
 83  
 84                 // Now that we have a scene, we want to look into it. Therefore we need a camera. 
 85                 // Three.js offers three camera types: 
 86                 //  - PerspectiveCamera (perspective projection) 
 87                 //  - OrthographicCamera (parallel projection) 
 88                 //  - CombinedCamera (allows to switch between perspective / parallel projection 
 89                 //    during runtime) 
 90                 // In this example we create a perspective camera. Parameters for the perspective 
 91                 // camera are ... 
 92                 // ... field of view (FOV), 
 93                 // ... aspect ratio (usually set to the quotient of canvas width to canvas height) 
 94                 // ... near and 
 95                 // ... far. 
 96                 // Near and far define the cliping planes of the view frustum. Three.js provides an 
 97                 // example (http://mrdoob.github.com/three.js/examples/ 
 98                 // -> canvas_camera_orthographic2.html), which allows to play around with these 
 99                 // parameters. 
100                 // The camera is moved 10 units towards the z axis to allow looking to the center of 
101                 // the scene. 
102                 // After definition, the camera has to be added to the scene. 
103                 camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 100); 
104                 camera.position.set(0, 0, 10); 
105                 camera.lookAt(scene.position); 
106                 scene.add(camera); 
107  
108                 // Create the triangle (or any arbitrary geometry). 
109                 // 1. Instantiate the geometry object 
110                 // 2. Add the vertices 
111                 // 3. Define the faces by setting the vertices indices 
112                 var triangleGeometry = new THREE.Geometry(); 
113                 triangleGeometry.vertices.push(new THREE.Vector3( 0.0,  1.0, 0.0)); 
114                 triangleGeometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0)); 
115                 triangleGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0)); 
116                 triangleGeometry.faces.push(new THREE.Face3(0, 1, 2)); 
117  
118                 // To color the surface, a material has to be created. If all faces have the same color, 
119                 // the THREE.MeshBasicMaterial fits our needs. It offers a lot of attributes (see 
120                 // https://github.com/mrdoob/three.js/blob/master/src/materials/MeshBasicMaterial.js) 
121                 // from which we need in this lesson only 'color'. 
122  
123                 // Create a white basic material and activate the 'doubleSided' attribute to force the 
124                 // rendering of both sides of each face (front and back). This prevents the so called 
125                 // 'backface culling'. Usually, only the side is rendered, whose normal vector points 
126                 // towards the camera. The other side is not rendered (backface culling). But this 
127                 // performance optimization sometimes leads to wholes in the surface. When this happens 
128                 // in your surface, simply set 'doubleSided' to 'true'. 
129                 var triangleMaterial = new THREE.MeshBasicMaterial({ 
130                     color:0xFFFFFF, 
131                     side:THREE.DoubleSide 
132                 }); 
133  
134                 // Create a mesh and insert the geometry and the material. Translate the whole mesh 
135                 // by -1.5 on the x axis and by 4 on the z axis. Finally add the mesh to the scene. 
136                 var triangleMesh = new THREE.Mesh(triangleGeometry, triangleMaterial); 
137                 triangleMesh.position.set(-1.5, 0.0, 4.0); 
138                 scene.add(triangleMesh); 
139  
140                 // The creation of the square is done in the same way as the triangle, except of the 
141                 // face definition. Instead of using one THREE.Face3, we have to define two 
142                 // THREE.Face3 objects. 
143                 // 1. Instantiate the geometry object 
144                 // 2. Add the vertices 
145                 // 3. Define the faces by setting the vertices indices 
146                 var squareGeometry = new THREE.Geometry(); 
147                 squareGeometry.vertices.push(new THREE.Vector3(-1.0,  1.0, 0.0)); 
148                 squareGeometry.vertices.push(new THREE.Vector3( 1.0,  1.0, 0.0)); 
149                 squareGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0)); 
150                 squareGeometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0)); 
151                 squareGeometry.faces.push(new THREE.Face3(0, 1, 2)); 
152                 squareGeometry.faces.push(new THREE.Face3(0, 2, 3)); 
153  
154                 // Create a white basic material and activate the 'doubleSided' attribute. 
155                 var squareMaterial = new THREE.MeshBasicMaterial({ 
156                     color:0xFFFFFF, 
157                     side:THREE.DoubleSide 
158                 }); 
159  
160                 // Create a mesh and insert the geometry and the material. Translate the whole mesh 
161                 // by 1.5 on the x axis and by 4 on the z axis and add the mesh to the scene. 
162                 var squareMesh = new THREE.Mesh(squareGeometry, squareMaterial); 
163                 squareMesh.position.set(1.5, 0.0, 4.0); 
164                 scene.add(squareMesh); 
165             } 
166  
167             /** 
168              * Render the scene. Map the 3D world to the 2D screen.
169              */ 
170             function renderScene(){ 
171                 renderer.render(scene, camera); 
172             } 
173         </script> 
174     </body> 
175 </html>
Software

Tutorial 02: Your first polygon

Screenshot of the WebGL renderer

Screenshot of the canvas renderer

Advertisement

Tutorial

Live example

Navigation
