Advertisement
 
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 03</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 multiplse 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 vertices shall have 
119                 // different colors, we need to set the vertex colors of each face. The colors in 
120                 // betweenwill be interpolated as color gradients. 
121                 // Unfortunately, the canvas renderer doesn't support vertex colors (yet [Three.js, 
122                 // release 69]). Either you accept a white face color, or set another face color. 
123  
124                 triangleGeometry.faces[0].vertexColors[0] = new THREE.Color(0xFF0000); 
125                 triangleGeometry.faces[0].vertexColors[1] = new THREE.Color(0x00FF00); 
126                 triangleGeometry.faces[0].vertexColors[2] = new THREE.Color(0x0000FF); 
127  
128                 // To activate the vertex color, we have to set 'vertexColors' attribute to 
129                 // 'THREE.VertexColors'. Otherwise they won't be displayed. 
130  
131                 // Create a basic material, supporting vertex colors. Activate the 'doubleSided' 
132                 // attribute to force the rendering of both sides of each face (front and back). 
133                 // This prevents the so called 'backface culling'. Usually, only the side is 
134                 // rendered, whose normal vector points towards the camera. The other side is not 
135                 // rendered (backface culling). But this performance optimization sometimes leads 
136                 // to wholes in the surface. When this happens in your surface, simply set 
137                 // 'doubleSided' to 'true'. 
138                 var triangleMaterial = new THREE.MeshBasicMaterial({ 
139                     vertexColors:THREE.VertexColors, 
140                     side:THREE.DoubleSide 
141                 }); 
142  
143                 // Create a mesh and insert the geometry and the material. Translate the whole mesh 
144                 // by -1.5 on the x axis and by 4 on the z axis. Finally add the mesh to the scene. 
145                 var triangleMesh = new THREE.Mesh(triangleGeometry, triangleMaterial); 
146                 triangleMesh.position.set(-1.5, 0.0, 4.0); 
147                 scene.add(triangleMesh); 
148  
149                 // The creation of the square is done in the same way as the triangle, except that we 
150                 // now need two THREE.Face3s. 
151                 // 1. Instantiate the geometry object 
152                 // 2. Add the vertices 
153                 // 3. Define the faces by setting the vertices indices 
154                 var squareGeometry = new THREE.Geometry(); 
155                 squareGeometry.vertices.push(new THREE.Vector3(-1.0,  1.0, 0.0)); 
156                 squareGeometry.vertices.push(new THREE.Vector3( 1.0,  1.0, 0.0)); 
157                 squareGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0)); 
158                 squareGeometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0)); 
159                 squareGeometry.faces.push(new THREE.Face3(0, 1, 2)); 
160                 squareGeometry.faces.push(new THREE.Face3(0, 2, 3)); 
161  
162                 // The square gets a new face color. In contrast to vertex colors means face color, 
163                 // that all vertices have the same color or in other words, the whole face has the 
164                 // same color (no color gradients). 
165  
166                 // Create a light blue basic material and activate the 'doubleSided' attribute. 
167                 var squareMaterial = new THREE.MeshBasicMaterial({ 
168                     color:0x8080FF, 
169                     side:THREE.DoubleSide 
170                 }); 
171  
172                 // Create a mesh and insert the geometry and the material. Translate the whole mesh 
173                 // by 1.5 on the x axis and by 4 on the z axis and add the mesh to the scene. 
174                 var squareMesh = new THREE.Mesh(squareGeometry, squareMaterial); 
175                 squareMesh.position.set(1.5, 0.0, 4.0); 
176                 scene.add(squareMesh); 
177             } 
178  
179             /** 
180              * Render the scene. Map the 3D world to the 2D screen.
181              */ 
182             function renderScene(){ 
183                 renderer.render(scene, camera); 
184             } 
185         </script> 
186     </body> 
187 </html>
Live example