Software

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 09</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 two libraries 
 22         1. Three.js (core library)
 23         2. Detector.js (checks the browsers WebGL capabilities) --> 
 24         <script src="../js/three.r51.js"></script> 
 25         <script src="../js/Detector.js"></script> 
 26     </head> 
 27     <body>
 28         <!-- This is the DIV element which will contain the WebGL canvas. To be identifiable later on, 
 29         the id 'WebGLCanvas' is applied to it. --> 
 30         <div id="WebGLCanvas"> 
 31         </div> 
 32  
 33         <!-- This JavaScript block encloses the Three.js commands --> 
 34         <script> 
 35             // Global scene object 
 36             var scene; 
 37  
 38             // Global camera object 
 39             var camera; 
 40  
 41             // Texture 
 42             var starTexture; 
 43  
 44             // Global mesh object of the cube 
 45             var cubeMesh; 
 46  
 47             var num = 32; 
 48             var star = new Array(num); 
 49             var spin = 0; 
 50  
 51             // Initialize the scene 
 52             initializeScene(); 
 53  
 54             // Animate the scene 
 55             animateScene(); 
 56  
 57             /** 
 58              * Initialze the scene. 
 59              */ 
 60             function initializeScene(){ 
 61                 // Check whether the browser supports WebGL. If so, instantiate the hardware accelerated 
 62                 // WebGL renderer. For antialiasing, we have to enable it. The canvas renderer uses 
 63                 // antialiasing by default. 
 64                 // The approach of multiplse renderers is quite nice, because your scene can also be 
 65                 // viewed in browsers, which don't support WebGL. The limitations of the canvas renderer 
 66                 // in contrast to the WebGL renderer will be explained in the tutorials, when there is a 
 67                 // difference. 
 68                 webGLAvailable = false; 
 69                 if(Detector.webgl){ 
 70                     renderer = new THREE.WebGLRenderer({antialias:true}); 
 71                     webGLAvailable = true; 
 72  
 73                 // If its not supported, instantiate the canvas renderer to support all non WebGL 
 74                 // browsers 
 75                 } else { 
 76                     renderer = new THREE.CanvasRenderer(); 
 77                 } 
 78  
 79                 // Set the background color of the renderer to black, with full opacity 
 80                 renderer.setClearColorHex(0x000000, 1); 
 81  
 82                 // Get the size of the inner window (content area) 
 83                 // Reduce the canvas size a little bit to prevent scrolling the whole window 
 84                 // content in Firefox while rotating the cube with the keys. 
 85                 canvasWidth = window.innerWidth - 10;
 86                 canvasHeight = window.innerHeight - 20;
 87  
 88                 // Set the renderers size to the content areas size 
 89                 renderer.setSize(canvasWidth, canvasHeight); 
 90  
 91                 // Get the DIV element from the HTML document by its ID and append the renderers DOM 
 92                 // object to it 
 93                 document.getElementById("WebGLCanvas").appendChild(renderer.domElement); 
 94  
 95                 // Create the scene, in which all objects are stored (e. g. camera, lights, 
 96                 // geometries, ...) 
 97                 scene = new THREE.Scene(); 
 98  
 99                 // Now that we have a scene, we want to look into it. Therefore we need a camera. 
100                 // Three.js offers three camera types: 
101                 //  - PerspectiveCamera (perspective projection) 
102                 //  - OrthographicCamera (parallel projection) 
103                 //  - CombinedCamera (allows to switch between perspective / parallel projection 
104                 //    during runtime) 
105                 // In this example we create a perspective camera. Parameters for the perspective 
106                 // camera are ... 
107                 // ... field of view (FOV), 
108                 // ... aspect ratio (usually set to the quotient of canvas width to canvas height) 
109                 // ... near and 
110                 // ... far. 
111                 // Near and far define the cliping planes of the view frustum. Three.js provides an 
112                 // example (http://mrdoob.github.com/three.js/examples/ 
113                 // -> canvas_camera_orthographic2.html), which allows to play around with these 
114                 // parameters. 
115                 // The camera is moved 10 units towards the z axis to allow looking to the center of 
116                 // the scene. 
117                 // After definition, the camera has to be added to the scene. 
118                 camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 100); 
119                 camera.position.set(0, 0, 15); 
120                 camera.lookAt(scene.position); 
121                 scene.add(camera); 
122  
123                 // Load an image as texture 
124                 starTexture = new THREE.ImageUtils.loadTexture("Star.jpg"); 
125  
126                 for (i = 0; i < num; i++){ 
127                     var squareGeometry = new THREE.Geometry(); 
128                     squareGeometry.vertices.push(new THREE.Vector3(-1, -1, 0)); 
129                     squareGeometry.vertices.push(new THREE.Vector3( 1, -1, 0)); 
130                     squareGeometry.vertices.push(new THREE.Vector3( 1,  1, 0)); 
131                     squareGeometry.vertices.push(new THREE.Vector3(-1,  1, 0)); 
132                     squareGeometry.faces.push(new THREE.Face4(0, 1, 2, 3)); 
133                     squareGeometry.faceVertexUvs[0].push([ 
134                         new THREE.UV(0.0, 0.0), 
135                         new THREE.UV(1.0, 0.0), 
136                         new THREE.UV(1.0, 1.0), 
137                         new THREE.UV(0.0, 1.0) 
138                     ]); 
139  
140                     // Create a material, which contains the texture We use AdditiveBlending and 
141                     // transparency:true so that the black areas of the star.jpg become transparent 
142                     // We also set the combine property to mix so the color we specify gets combined  
143                     // with white parts of the image we set the initial color of each to white, but  
144                     // that gets changed when we animate the stars. 
145                     // Two excellent examples on blending with three.js: 
146                     //     http://www.threejs.org/examples/#webgl_materials_blending_custom  
147                     //     http://www.threejs.org/examples/#webgl_materials_blending 
148                     var squareMaterial = new THREE.MeshBasicMaterial({ 
149                         map:starTexture, 
150                         transparent: true, 
151                         combine: THREE.MixOperation, 
152                         blending: THREE.AdditiveBlending, 
153                         color:0xFFFFFF 
154                     }); 
155  
156                     var squareMesh = new THREE.Mesh(squareGeometry, squareMaterial); 
157                     squareMesh.position.set(0.0, 0.0, 0.0); 
158                     scene.add(squareMesh); 
159  
160                     // note that the rgb color values must be in the range of 0..1 or the Color  
161                     // object will just clamp them to 1, i.e. white 
162                     star[i] = new Object(); 
163                     star[i].angle = 0.0; 
164                     star[i].dist  = (i / num) * 5.0; 
165                     star[i].r     = Math.random(); 
166                     star[i].g     = Math.random(); 
167                     star[i].b     = Math.random(); 
168                     star[i].mesh  = squareMesh; 
169                 } 
170             } 
171  
172             /** 
173              * Animate the scene and call rendering. 
174              */ 
175             function animateScene() 
176             { 
177                 // Define the function, which is called by the browser supported timer loop. If the 
178                 // browser tab is not visible, the animation is paused. So 'animateScene()' is called 
179                 // in a browser controlled loop. 
180                 requestAnimationFrame(animateScene); 
181  
182                 // Now loop through the stars and update their positions, spin and color 
183                 for(i = 0; i < num; i++) { 
184                     spin          += Math.PI * 2 / num; 
185                     if (spin > (Math.PI*2)) 
186                             spin = 0; 
187                     star[i].angle += i / num; 
188                     star[i].dist  -= 0.01; 
189                     if(star[i].dist < 0.0) { 
190                         star[i].dist += 5.0; 
191                          
192                         // note that the rgb color values must be in the range of 0..1 or the Color  
193                         // object will just clamp them to 1, i.e. white 
194                         star[i].r    = Math.random(); 
195                         star[i].g    = Math.random(); 
196                         star[i].b    = Math.random(); 
197                     } 
198                      
199                     // we want to translate the star out to the right distance and the rotate it  
200                     // around the z-axis so we set the mesh's matrix to that translated value 
201                     // then rotate a second matrix and concatenate it onto the mesh's matrix.                     
202                     star[i].mesh.matrix.setPosition(new THREE.Vector3(star[i].dist,0, 0));                     
203                     var mr = new THREE.Matrix4(); 
204                     mr.makeRotationZ(spin); 
205                     star[i].mesh.applyMatrix(mr); 
206                      
207                     // then change the color of the mesh 
208                     star[i].mesh.material.color.setRGB(star[i].r, star[i].g, star[i].b); 
209                 } 
210  
211                 // Map the 3D scene down to the 2D screen (render the frame) 
212                 renderScene(); 
213             } 
214  
215             /** 
216              * Render the scene. Map the 3D world to the 2D screen.
217              */ 
218             function renderScene(){ 
219                 renderer.render(scene, camera); 
220             } 
221         </script> 
222     </body> 
223 </html>
Live example