Created
October 19, 2011 08:11
-
-
Save SomMeri/1297724 to your computer and use it in GitHub Desktop.
Add Light to Canvas Scene in Internet Explorer r44
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html lang="en"> | |
| <head> | |
| <title>Voxels</title> | |
| <meta charset="utf-8"> | |
| <style type="text/css"> | |
| body { | |
| font-family: Monospace; | |
| font-size: 12px; | |
| background-color: #f0f0f0; | |
| margin: 0px; | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript" src="../js-src/Three.js"></script> | |
| <script type="text/javascript"> | |
| var Cube = function (width, height, depth) { | |
| THREE.Geometry.call(this); | |
| var scope = this, | |
| width_half = width / 2, | |
| height_half = height / 2, | |
| depth_half = depth / 2; | |
| v( width_half, height_half, -depth_half ); | |
| v( width_half, -height_half, -depth_half ); | |
| v( -width_half, -height_half, -depth_half ); | |
| v( -width_half, height_half, -depth_half ); | |
| v( width_half, height_half, depth_half ); | |
| v( width_half, -height_half, depth_half ); | |
| v( -width_half, -height_half, depth_half ); | |
| v( -width_half, height_half, depth_half ); | |
| f4( 0, 1, 2, 3 ); | |
| f4( 4, 7, 6, 5 ); | |
| f4( 0, 4, 5, 1 ); | |
| f4( 1, 5, 6, 2 ); | |
| f4( 2, 6, 7, 3 ); | |
| f4( 4, 0, 3, 7 ); | |
| function v(x, y, z) { | |
| scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) ); | |
| } | |
| function f4(a, b, c, d) { | |
| scope.faces.push( new THREE.Face4( a, b, c, d ) ); | |
| scope.faceVertexUvs[ 0 ].push( [ | |
| new THREE.UV( 0, 0 ), | |
| new THREE.UV( 0, 1 ), | |
| new THREE.UV( 1, 1 ), | |
| new THREE.UV( 1, 0 ) | |
| ] ); | |
| } | |
| this.computeCentroids(); | |
| this.computeFaceNormals(); | |
| this.computeVertexNormals(); | |
| }; | |
| Cube.prototype = new THREE.Geometry(); | |
| Cube.prototype.constructor = Cube; | |
| </script> | |
| <script type="text/javascript"> | |
| var container, camera, scene, renderer, | |
| projector, cube, ray, | |
| radious = 1600, theta = 45, onMouseDownTheta = 45, | |
| phi = 60, onMouseDownPhi = 60; | |
| init(); | |
| //render(); | |
| function init() { | |
| container = document.createElement( 'div' ); | |
| document.body.appendChild( container ); | |
| var info = document.createElement( 'div' ); | |
| info.style.position = 'absolute'; | |
| info.style.top = '5px'; | |
| info.style.width = '100%'; | |
| info.style.textAlign = 'center'; | |
| info.innerHTML = '<span style="color: #444; background-color: #fff; border-bottom: 1px solid #ddd; padding: 8px 10px; text-transform: uppercase;"><strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel, <strong>drag</strong>: rotate | <a id="link" href="" target="_blank">share</a> </span>'; | |
| container.appendChild( info ); | |
| camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 ); | |
| camera.position.x = 530; | |
| camera.position.y = 799; | |
| camera.position.z = 1280; | |
| camera.target.position.y = 200; | |
| scene = new THREE.Scene(); | |
| //projector = new THREE.Projector(); | |
| //ray = new THREE.Ray( camera.position, null ); | |
| //cube = new Cube( 50, 50, 50 ); | |
| // Lights | |
| var directionalLight = new THREE.DirectionalLight( 0x808080 ); | |
| directionalLight.position.x = - 1; | |
| directionalLight.position.y = 1; | |
| directionalLight.position.z = - 0.75; | |
| directionalLight.position.normalize(); | |
| //*********************************************************** | |
| // Next line is causing an error in Internet Explorer 8.0.6001 | |
| // Webpage error details | |
| // | |
| // User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) | |
| // Timestamp: Wed, 19 Oct 2011 08:02:36 UTC | |
| // | |
| // | |
| // Message: Object doesn't support this property or method | |
| // Line: 51 | |
| // Char: 505 | |
| // Code: 0 | |
| // URI: http://localhost:8080/ThreeDemo/js-src/Three.js | |
| // | |
| //**************************************************** | |
| scene.addLight( directionalLight ); | |
| //renderer = new THREE.CanvasRenderer(); | |
| //renderer.setSize( window.innerWidth, window.innerHeight ); | |
| //add voxels | |
| //var color = new THREE.MeshLambertMaterial( { color: 0xDF1F1F, opacity: 1} ); | |
| //addVoxel(-1, -1, color ); | |
| //addVoxel(-2, -2, color ); | |
| //addVoxel(-3, -3, color ); | |
| //addVoxel(-4, -4, color ); | |
| //container.appendChild(renderer.domElement); | |
| } | |
| function addVoxel(x, y, material) { | |
| var voxel = new THREE.Mesh( cube, material); | |
| voxel.position.x = x * 50 + 25; | |
| voxel.position.y = 0 * 50 + 25; | |
| voxel.position.z = y * 50 + 25; | |
| voxel.overdraw = true; | |
| scene.addObject( voxel ); | |
| return voxel; | |
| } | |
| function render() { | |
| renderer.render( scene, camera ); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment