#three.js javascript 3D Library.
This sphere was created with a pointlight and basic material color. Interestingly, rather than pulsate the light in and out, pulsating the red-black hue had the same effect. Various mouse event handlers were implemented for movement. Camera stays focused looking at origin of sphere/world.
Press D to see DEBUG information.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta site="chrisincode.com" content=""> | |
| <meta name="Christopher Robert Brasington" content=""> | |
| <title>dev</title> | |
| <style> | |
| body { | |
| background:#fff; | |
| color:#fff; | |
| padding:0; | |
| margin:0; | |
| overflow:hidden; | |
| font-family:georgia; | |
| } | |
| a { color: #ff0080; text-decoration: none; } | |
| a:hover { color: #0080ff; } | |
| p {color: #ff0080; margin:0;} | |
| #debug {font-size:12px;width: 300px; opacity: 0.9; cursor: pointer; position: absolute; top: 30px;color:white;display:none;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="debug">loading...</div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> | |
| <script src="http://threejs.org/build/three.min.js"></script> | |
| <script src="http://threejs.org/examples/js/libs/stats.min.js"></script> | |
| <script src="http://mrdoob.github.io/three.js/examples/fonts/helvetiker_regular.typeface.js"></script> | |
| <script> | |
| // frame counter | |
| var count = 0 | |
| // mouse | |
| var mouse = {X:0,Y:0} | |
| // event handlers | |
| document.addEventListener( 'mousemove', onDocumentMouseMove, false ); | |
| window.addEventListener( 'resize', onWindowResize, false ); | |
| document.addEventListener( 'mousewheel', onMouseWheel, false ); | |
| document.addEventListener( 'keypress', onKeyPress, false); | |
| // drawing board: entire window | |
| var container = $('#container'), renderer = new THREE.WebGLRenderer() | |
| var canvas = {width:1000,height:500} | |
| canvas.halfX=canvas.width/2 | |
| canvas.halfY=canvas.height/2 | |
| renderer.setSize(canvas.width,canvas.height) | |
| // camera: viewing angle, aspect, near, far | |
| var camera = new THREE.PerspectiveCamera(55,canvas.width/canvas.height,0.1,10000) | |
| // pull back camera | |
| camera.position.z = 300 | |
| // scene | |
| var scene = new THREE.Scene() | |
| scene.add(camera) | |
| container.append(renderer.domElement) | |
| // game objects | |
| var obj = [] | |
| // sphere object: radius, segments, rings, and material | |
| obj['sphere'] = new THREE.Mesh( | |
| new THREE.SphereGeometry(100,300,30), | |
| new THREE.MeshLambertMaterial({color:0xCC0000}) | |
| ); | |
| // add the sphere to the scene | |
| scene.add(obj['sphere']) | |
| // point light | |
| var light = [] | |
| light['pointLight'] = new THREE.PointLight(0xFFFFFF) | |
| // point light position | |
| light['pointLight'].position.x = 10 | |
| light['pointLight'].position.y = 50 | |
| light['pointLight'].position.z = 130 | |
| // add to scene | |
| scene.add(light['pointLight']) | |
| // variable to toggle glow affect | |
| var up = true; | |
| // text to find light source, hidden | |
| obj['lightText'] = new THREE.Mesh( | |
| new THREE.TextGeometry( 'LIGHT', { | |
| size:2,height:2,curveSegments:4, | |
| font:"helvetiker", | |
| }), | |
| new THREE.MeshBasicMaterial({color: 0x11ff00})); | |
| obj['lightText'].position.x = light['pointLight'].position.x | |
| obj['lightText'].position.y = light['pointLight'].position.y | |
| obj['lightText'].position.z = light['pointLight'].position.z | |
| obj['lightText'].visible = false | |
| scene.add(obj['lightText']); | |
| // event: keypress | |
| function onKeyPress(event) { | |
| // press D, debug | |
| if(event.charCode == 'D'.charCodeAt(0) || event.charCode == 'd'.charCodeAt(0)) { | |
| $('#debug').toggle() | |
| obj['lightText'].visible = !obj['lightText'].visible | |
| } | |
| } | |
| // event: mouse movement | |
| function onDocumentMouseMove(event) { | |
| mouse.X = ( event.clientX - canvas.halfX ); | |
| mouse.Y = ( event.clientY - canvas.halfY ); | |
| } | |
| // event: mouse wheel | |
| function onMouseWheel(event) { | |
| // zoom out | |
| if(event.wheelDelta>0) | |
| camera.position.z += 20 | |
| // zoom out, but not through object | |
| else | |
| if(camera.position.z >100) | |
| camera.position.z -= 20 | |
| } | |
| // event: window resize | |
| function onWindowResize() { | |
| windowHalfX = window.innerWidth / 2; | |
| windowHalfY = window.innerHeight / 2; | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| } | |
| // draw loop | |
| function draw() { | |
| // debug output | |
| debug(); | |
| // brightening the sphere | |
| if(up) { | |
| obj['sphere'].material.color.r = obj['sphere'].material.color.r + 0.005 | |
| if(obj['sphere'].material.color.r >= 0.99) { | |
| up = false | |
| } | |
| } | |
| // darkening the sphere | |
| else { | |
| obj['sphere'].material.color.r = obj['sphere'].material.color.r - 0.005 | |
| if(obj['sphere'].material.color.r <= 0.2) { | |
| up = true | |
| } | |
| } | |
| camera.position.x += ( mouse.X - camera.position.x ) * .05; | |
| camera.position.y += ( - mouse.Y - camera.position.y ) * .05; | |
| camera.lookAt(scene.position) | |
| // draw! | |
| renderer.render(scene,camera); | |
| } | |
| // browser drawing magic | |
| animate(); | |
| function animate() { | |
| requestAnimationFrame( animate ); | |
| draw(); | |
| } | |
| // debugging output | |
| function debug() { | |
| count = count + 1; | |
| $('#debug').html('frame: '+count) | |
| $('#debug').append('<p>'+(up?'brighten ':'darken ')+Math.round(obj['sphere'].material.color.r*100)) | |
| $('#debug').append('mouse X: '+mouse.X+' mouse Y: '+mouse.Y) | |
| $('#debug').append('<p>zoom level: '+camera.position.z) | |
| } | |
| </script> | |
| </body> | |
| </html> |
