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 06</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             // The cube has to rotate around all three axes, so we need three rotation values. 
 41  
 42             // x, y and z rotation 
 43             var xRotation = 0.0; 
 44             var yRotation = 0.0; 
 45             var zRotation = 0.0; 
 46  
 47             // Global mesh object of the cube 
 48             var cubeMesh; 
 49  
 50             // Initialize the scene 
 51             initializeScene(); 
 52  
 53             // Animate the scene 
 54             animateScene(); 
 55  
 56             /** 
 57              * Initialze the scene. 
 58              */ 
 59             function initializeScene(){ 
 60                 // Check whether the browser supports WebGL. If so, instantiate the hardware accelerated 
 61                 // WebGL renderer. For antialiasing, we have to enable it. The canvas renderer uses 
 62                 // antialiasing by default. 
 63                 // The approach of multiplse renderers is quite nice, because your scene can also be 
 64                 // viewed in browsers, which don't support WebGL. The limitations of the canvas renderer 
 65                 // in contrast to the WebGL renderer will be explained in the tutorials, when there is a 
 66                 // difference. 
 67                 if(Detector.webgl){ 
 68                     renderer = new THREE.WebGLRenderer({antialias:true}); 
 69  
 70                 // If its not supported, instantiate the canvas renderer to support all non WebGL 
 71                 // browsers 
 72                 } else { 
 73                     renderer = new THREE.CanvasRenderer(); 
 74                 } 
 75  
 76                 // Set the background color of the renderer to black, with full opacity 
 77                 renderer.setClearColor(0x000000, 1); 
 78  
 79                 // Get the size of the inner window (content area) to create a full size renderer 
 80                 canvasWidth = window.innerWidth; 
 81                 canvasHeight = window.innerHeight; 
 82  
 83                 // Set the renderers size to the content areas size 
 84                 renderer.setSize(canvasWidth, canvasHeight); 
 85  
 86                 // Get the DIV element from the HTML document by its ID and append the renderers DOM 
 87                 // object to it 
 88                 document.getElementById("WebGLCanvas").appendChild(renderer.domElement); 
 89  
 90                 // Create the scene, in which all objects are stored (e. g. camera, lights, 
 91                 // geometries, ...) 
 92                 scene = new THREE.Scene(); 
 93  
 94                 // Now that we have a scene, we want to look into it. Therefore we need a camera. 
 95                 // Three.js offers three camera types: 
 96                 //  - PerspectiveCamera (perspective projection) 
 97                 //  - OrthographicCamera (parallel projection) 
 98                 //  - CombinedCamera (allows to switch between perspective / parallel projection 
 99                 //    during runtime) 
100                 // In this example we create a perspective camera. Parameters for the perspective 
101                 // camera are ... 
102                 // ... field of view (FOV), 
103                 // ... aspect ratio (usually set to the quotient of canvas width to canvas height) 
104                 // ... near and 
105                 // ... far. 
106                 // Near and far define the cliping planes of the view frustum. Three.js provides an 
107                 // example (http://mrdoob.github.com/three.js/examples/ 
108                 // -> canvas_camera_orthographic2.html), which allows to play around with these 
109                 // parameters. 
110                 // The camera is moved 10 units towards the z axis to allow looking to the center of 
111                 // the scene. 
112                 // After definition, the camera has to be added to the scene. 
113                 camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 100); 
114                 camera.position.set(0, 0, 10); 
115                 camera.lookAt(scene.position); 
116                 scene.add(camera); 
117  
118                 // Create the cube 
119                 var boxGeometry = new THREE.BoxGeometry(2.0, 2.0, 2.0); 
120  
121                 // When the CanvasRenderer is used, you will see, that the texture has some distortions. 
122                 // To get rid of this, you only have to increase the number of cube segments. The 
123                 // WebGLRenderer doesn't needs this workaround. 
124                 //var boxGeometry = new THREE.BoxGeometry(2.0, 2.0, 2.0, 4, 4, 4); 
125  
126                 // Load an image as texture 
127                 var neheTexture = new THREE.ImageUtils.loadTexture("NeHe.jpg"); 
128                 //neheTexture.min_filter = THREE.LinearFilter; 
129                 //neheTexture.mag_filter = THREE.LinearFilter; 
130                 //neheTexture.wrapS = THREE.RepeatWrapping; 
131                 //neheTexture.wrapT = THREE.RepeatWrapping; 
132                 //neheTexture.repeat.x = 2; 
133                 //neheTexture.repeat.y = 2; 
134  
135                 // After creating a THREE.BoxGeometry, we load the texture by 
136                 // 'THREE.ImageUtils.loadTexture()'. On this object, we can configure the texture 
137                 // filtering. If we don't configure it, default values will be used. If you uncomment 
138                 // the texture configuration lines, you can modify the texture filtering or enable 
139                 // texture repeating. There are more attributes, which can be seen here. 
140                 // Now that we have a texture object, we assign it to the material via the attribute 
141                 // 'map'. That's it. 
142  
143                 // Create a basic material with a texture. Activate the 'doubleSided' 
144                 // attribute to force the rendering of both sides of each face (front and back). 
145                 // This prevents the so called 'backface culling'. Usually, only the side is 
146                 // rendered, whose normal vector points towards the camera. The other side is not 
147                 // rendered (backface culling). But this performance optimization sometimes leads 
148                 // to wholes in the surface. When this happens in your surface, simply set 
149                 // 'doubleSided' to 'true'. 
150                 var boxMaterial = new THREE.MeshBasicMaterial({ 
151                     map:neheTexture, 
152                     side:THREE.DoubleSide 
153                 }); 
154  
155                 // Create a mesh and insert the geometry and the material. Translate the whole mesh 
156                 // by 1.5 on the x axis and by 4 on the z axis and add the mesh to the scene. 
157                 boxMesh = new THREE.Mesh(boxGeometry, boxMaterial); 
158                 boxMesh.position.set(0.0, 0.0, 4.0); 
159                 scene.add(boxMesh); 
160             } 
161  
162             /** 
163              * Animate the scene and call rendering. 
164              */ 
165             function animateScene(){ 
166                 // At last, we update the rotation values and assign it to the mesh's rotation. 
167  
168                 // Increase the x, y and z rotation of the cube 
169                 xRotation += 0.03; 
170                 yRotation += 0.02; 
171                 zRotation += 0.04; 
172                 boxMesh.rotation.set(xRotation, yRotation, zRotation); 
173  
174                 // Define the function, which is called by the browser supported timer loop. If the 
175                 // browser tab is not visible, the animation is paused. So 'animateScene()' is called 
176                 // in a browser controlled loop. 
177                 requestAnimationFrame(animateScene); 
178  
179                 // Map the 3D scene down to the 2D screen (render the frame) 
180                 renderScene(); 
181             } 
182  
183             /** 
184              * Render the scene. Map the 3D world to the 2D screen.
185              */ 
186             function renderScene(){ 
187                 renderer.render(scene, camera); 
188             } 
189         </script> 
190     </body> 
191 </html>
Live example