3D Geometry Experience (Spiral) cezinha Follow 2011-07-19 21:50:23 License: MIT License Fork4 Fav0 View11094 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 183 lines HTML 6 lines CSS 4 lines Another experiment using mrdoob.three.js 3D Geometry Experience (Spiral) (function() { /** * Following Aerotwist Tutorial * http://www.aerotwist.com/lab/getting-started-with-three-js/ */ // globals variables var mouseX = 0, mouseY = 0, windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHeight / 2, camera, scene, renderer; var main = function() { if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); init(); animate(); }; var init = function() { var container; container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 0.1, 10000 ); camera.position.z = 500; scene = new THREE.Scene(); renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); var startHex = 0xFFFF00; var endHex = 0xFF0000; var objects = []; var centerX = 0; var centerZ = 0; var posY = 80; var count = 0; var objsQty = 100; var radius = 10; var loops = 4; var degree = loops * 360 / objsQty; for (var i = 0; i < objsQty; i++) { var posX = centerX + ((radius * i * 0.1) * Math.cos(degToRad(degree * i))); var posZ = centerZ - ((radius * i * 0.1) * Math.sin(degToRad(degree * i))); var ratio = i / objsQty; color = fadeHex(startHex, endHex, ratio); var sphere = drawSphere(color, posX, posY, posZ); posY -= 1; // add the sphere to the scene scene.addChild(sphere); } // create a point light var pointLight = new THREE.PointLight( 0xcccccc ); // set its position pointLight.position.x = 10; pointLight.position.y = 50; pointLight.position.z = 130; // add to the scene scene.addLight( pointLight ); document.addEventListener( 'mousemove', onDocumentMouseMove, false ); document.addEventListener( 'touchstart', onDocumentTouchStart, false ); document.addEventListener( 'touchmove', onDocumentTouchMove, false ); //window.addEventListener( 'DOMMouseScroll', onWindowMouseWheel, false); window.onmousewheel = onWindowMouseWheel; }; var degToRad = function(degree) { radians = degree * (Math.PI/180); return radians; }; var fadeHex = function(hex, hex2, ratio){ var r = hex >> 16; var g = hex >> 8 & 0xFF; var b = hex & 0xFF; r += ((hex2 >> 16)-r)*ratio; g += ((hex2 >> 8 & 0xFF)-g)*ratio; b += ((hex2 & 0xFF)-b)*ratio; return(r<<16 | g<<8 | b); }; var drawSphere = function(color, x, y, z) { // create the sphere's material var sphereMaterial = new THREE.MeshLambertMaterial( { // a gorgeous red. color: color }); // set up the sphere vars var radius = 8, segments = 8, rings = 8; // create a new mesh with sphere geometry - // we will cover the sphereMaterial next! var sphere = new THREE.Mesh( new THREE.Sphere(radius, segments, rings), sphereMaterial); sphere.position.x = x; sphere.position.y = y; sphere.position.z = z; return sphere; }; var handle = function(delta) { if (delta > 0) { camera.position.z += ( delta - camera.position.z ) * 0.05; } else { camera.position.z += ( camera.position.z - delta ) * 0.05; } }; var onWindowMouseWheel = function(event) { event = event ? event : window.event; var delta = event.detail ? event.detail * -1 : event.wheelDelta / 40; if (delta) handle(delta); /** Prevent default actions caused by mouse wheel. * That might be ugly, but we handle scrolls somehow * anyway, so don't bother here.. */ if (event.preventDefault) event.preventDefault(); event.returnValue = false; }; var onDocumentMouseMove = function(event) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY; }; var onDocumentTouchStart = function( event ) { if ( event.touches.length > 1 ) { event.preventDefault(); mouseX = event.touches[ 0 ].pageX - windowHalfX; mouseY = event.touches[ 0 ].pageY - windowHalfY; } }; var onDocumentTouchMove = function( event ) { if ( event.touches.length == 1 ) { event.preventDefault(); mouseX = event.touches[ 0 ].pageX - windowHalfX; mouseY = event.touches[ 0 ].pageY - windowHalfY; } }; var animate = function() { requestAnimationFrame( animate ); render(); }; var render = function() { camera.position.x += ( mouseX - camera.position.x ) * 0.05; camera.position.y += ( - mouseY + 200 - camera.position.y ) * 0.05; camera.updateMatrix(); renderer.render( scene, camera ); }; main(); })(); <script type="text/javascript" src="http://www.cezinha.com.br/projects/js/mrdoob.three-r40/js/Three.js"></script> <script type="text/javascript" src="http://www.cezinha.com.br/projects/js/mrdoob.three-r42/examples/js/Detector.js"></script> <script type="text/javascript" src="http://www.cezinha.com.br/projects/js/mrdoob.three-r42/examples/js/RequestAnimationFrame.js"></script> <script type="text/javascript" src="http://www.cezinha.com.br/projects/js/mrdoob.three-r42/examples/js/Stats.js"></script> <h1>3D Geometry Experience (Spiral)</h1> <h2>Use your mouse wheel to zoom in / zoom out</h2> 3D Geometry Experience (Spiral) body{background-color:#000000;font:12px sans-serif;overflow:hidden;color:#fff} body, h1, h2{padding:0;margin:0} h1{font-size:12px;} h2{font-size:11px;} Another experiment using mrdoob.three.js (function() { /** * Following Aerotwist Tutorial * http://www.aerotwist.com/lab/getting-started-with-three-js/ */ // globals variables var mouseX = 0, mouseY = 0, windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHeight / 2, camera, scene, renderer; var main = function() { if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); init(); animate(); }; var init = function() { var container; container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 0.1, 10000 ); camera.position.z = 500; scene = new THREE.Scene(); renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); var startHex = 0xFFFF00; var endHex = 0xFF0000; var objects = []; var centerX = 0; var centerZ = 0; var posY = 80; var count = 0; var objsQty = 100; var radius = 10; var loops = 4; var degree = loops * 360 / objsQty; for (var i = 0; i < objsQty; i++) { var posX = centerX + ((radius * i * 0.1) * Math.cos(degToRad(degree * i))); var posZ = centerZ - ((radius * i * 0.1) * Math.sin(degToRad(degree * i))); var ratio = i / objsQty; color = fadeHex(startHex, endHex, ratio); var sphere = drawSphere(color, posX, posY, posZ); posY -= 1; // add the sphere to the scene scene.addChild(sphere); } // create a point light var pointLight = new THREE.PointLight( 0xcccccc ); // set its position pointLight.position.x = 10; pointLight.position.y = 50; pointLight.position.z = 130; // add to the scene scene.addLight( pointLight ); document.addEventListener( 'mousemove', onDocumentMouseMove, false ); document.addEventListener( 'touchstart', onDocumentTouchStart, false ); document.addEventListener( 'touchmove', onDocumentTouchMove, false ); //window.addEventListener( 'DOMMouseScroll', onWindowMouseWheel, false); window.onmousewheel = onWindowMouseWheel; }; var degToRad = function(degree) { radians = degree * (Math.PI/180); return radians; }; var fadeHex = function(hex, hex2, ratio){ var r = hex >> 16; var g = hex >> 8 & 0xFF; var b = hex & 0xFF; r += ((hex2 >> 16)-r)*ratio; g += ((hex2 >> 8 & 0xFF)-g)*ratio; b += ((hex2 & 0xFF)-b)*ratio; return(r<<16 | g<<8 | b); }; var drawSphere = function(color, x, y, z) { // create the sphere's material var sphereMaterial = new THREE.MeshLambertMaterial( { // a gorgeous red. color: color }); // set up the sphere vars var radius = 8, segments = 8, rings = 8; // create a new mesh with sphere geometry - // we will cover the sphereMaterial next! var sphere = new THREE.Mesh( new THREE.Sphere(radius, segments, rings), sphereMaterial); sphere.position.x = x; sphere.position.y = y; sphere.position.z = z; return sphere; }; var handle = function(delta) { if (delta > 0) { camera.position.z += ( delta - camera.position.z ) * 0.05; } else { camera.position.z += ( camera.position.z - delta ) * 0.05; } }; var onWindowMouseWheel = function(event) { event = event ? event : window.event; var delta = event.detail ? event.detail * -1 : event.wheelDelta / 40; if (delta) handle(delta); /** Prevent default actions caused by mouse wheel. * That might be ugly, but we handle scrolls somehow * anyway, so don't bother here.. */ if (event.preventDefault) event.preventDefault(); event.returnValue = false; }; var onDocumentMouseMove = function(event) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY; }; var onDocumentTouchStart = function( event ) { if ( event.touches.length > 1 ) { event.preventDefault(); mouseX = event.touches[ 0 ].pageX - windowHalfX; mouseY = event.touches[ 0 ].pageY - windowHalfY; } }; var onDocumentTouchMove = function( event ) { if ( event.touches.length == 1 ) { event.preventDefault(); mouseX = event.touches[ 0 ].pageX - windowHalfX; mouseY = event.touches[ 0 ].pageY - windowHalfY; } }; var animate = function() { requestAnimationFrame( animate ); render(); }; var render = function() { camera.position.x += ( mouseX - camera.position.x ) * 0.05; camera.position.y += ( - mouseY + 200 - camera.position.y ) * 0.05; camera.updateMatrix(); renderer.render( scene, camera ); }; main(); })(); <script type="text/javascript" src="http://www.cezinha.com.br/projects/js/mrdoob.three-r40/js/Three.js"></script> <script type="text/javascript" src="http://www.cezinha.com.br/projects/js/mrdoob.three-r42/examples/js/Detector.js"></script> <script type="text/javascript" src="http://www.cezinha.com.br/projects/js/mrdoob.three-r42/examples/js/RequestAnimationFrame.js"></script> <script type="text/javascript" src="http://www.cezinha.com.br/projects/js/mrdoob.three-r42/examples/js/Stats.js"></script> <h1>3D Geometry Experience (Spiral)</h1> <h2>Use your mouse wheel to zoom in / zoom out</h2> body{background-color:#000000;font:12px sans-serif;overflow:hidden;color:#fff} body, h1, h2{padding:0;margin:0} h1{font-size:12px;} h2{font-size:11px;} use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Another experiment using mrdoob.three.js Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author cezinha URLhttp://www.cezinha.com.br @cezinha coder, gamer, flash addict, js addict Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/nVUM/js"></script> 3D color geometry mousemove mousewheel three.js Tweet Twitter Discussion Questions on this code? Tags 3D color geometry mousemove mousewheel three.js Forked sort by latest page views favorite forked forked: 3D Geometry Experience karmakat 00 138 184/6/4 3D color geometry mousemove mousewheel three.js forked: 3D Geometry Experience karmakat 00 123 185/6/4 3D color geometry mousemove mousewheel three.js forked: 3D Geometry Experience sokercap 00 148 217/10/4 3D art&design color geometry mousemove mousewheel three.js forked: 3D Geometry Experience napthats 00 239 184/6/4 3D color geometry mousemove mousewheel three.js