forked: 3D Geometry Experience (Spiral)

Readme
JavaScript 184 lines
HTML 6 lines
CSS 4 lines

forked: 3D Geometry Experience (Spiral)

// forked from cezinha's "3D Geometry Experience (Spiral)" http://jsdo.it/cezinha/nVUM
(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();
})();

forked: 3D Geometry Experience (Spiral)

// forked from cezinha's "3D Geometry Experience (Spiral)" http://jsdo.it/cezinha/nVUM (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;}