 |
Tutorial 02: Your first polygon | Tutorial 04: Rotation |  |
 Screenshot of the WebGL renderer
|
 Screenshot of the canvas renderer |
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>