Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
/* * Copyright MIT © <2013>
* * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated * documentation files (the "Software"), to deal in the Software without restriction, including without limitation * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and * to permit persons to whom the Software is furnished to do so, subject to the following conditions: * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE * FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, * ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ var self = window; ;(function(self) { var container, scene, camera, renderer, stats, mouse = { x: 0, y: 0 }, colors = []; window.addEventListener ? window.addEventListener('load', init, false) : window.onload = init; render(); /* * Init. */ function init() { var body = document.querySelector('body'); container = document.createElement('div'); container.width = innerWidth; container.height = innerHeight; container.style.position = 'absolute'; container.style.top = 0; container.style.bottom = 0; container.style.left = 0; container.style.right = 0; body.appendChild(container); // Setup camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000); camera.position.z = 100; scene = new THREE.Scene(); var geometry = new THREE.Geometry(); for(var quantity = 0, len = 500000; quantity < len; quantity++) { geometry.vertices.push(new THREE.Vector3(3000 * Math.random() - 2000, 3000 * Math.random() - 2000, 100 * Math.random() - Math.random() * 20)); colors[quantity] = new THREE.Color(); colors[quantity].setRGB(Math.random(), Math.random(), Math.random()); } geometry.colors = colors; var particles = new THREE.ParticleSystem(geometry, new THREE.ParticleBasicMaterial({ size: 1, vertexColors: true })); scene.add(particles); renderer = new THREE.WebGLRenderer({ antialias: true, clearAlpha: 1 }); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); // Stats stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; container.appendChild(stats.domElement); // Listeners document.addEventListener( 'mousemove', onMouseMove, false ); document.addEventListener( 'touchmove', onTouchMove, false ); window.onresize = onResize; } /* * Mouse move event. */ function onMouseMove(event) { event.preventDefault(); mouse.x = event.pageX - (window.innerWidth * 0.5); mouse.y = event.pageY - (window.innerHeight * 0.5); } /* * Touch move event. */ function onTouchMove(event) { event.preventDefault(); var touch = event.touches[0]; if(event.touches.length === 1) { mouse.x = touch.pageX - (window.innerWidth * 0.5); mouse.y = touch.pageY - (window.innerHeight * 0.5); } } /* * On resize event. */ function onResize(event) { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } /* * Render the animation. */ function render() { requestAnimationFrame(render); camera.position.x += (mouse.x - camera.position.x) * 0.05; camera.position.y += (-mouse.y - camera.position.y) * 0.05; camera.lookAt(scene.position); stats.update(); renderer.render(scene, camera); } })(self);
CSS
/* Use your mouse :) */ body { margin: 0px; overflow: hidden; }
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email