3D Geometry Experience (Spiral)

Readme
JavaScript 183 lines
HTML 6 lines
CSS 4 lines

Another experiment using mrdoob.three.js

3D Geometry Experience (Spiral)

3D Geometry Experience (Spiral)

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;}