Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
var _scene, _camera, _light, _renderer, _windowHalfX, _windowHalfY; var _mouseX = _mouseY = 0; // init function var createWorld = function(){ //threejs - demo - https://threejs.org/examples/webgl_particles_random.html var ele = document.createElement('div'); document.body.appendChild(ele); _windowHalfX = window.innerWidth / 2; _windowHalfY = window.innerHeight / 2; _camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000) _camera.position.z = 5250; // first view position, going zoom _scene = new THREE.Scene(); _scene.fog = new THREE.FogExp2(0x0f8ece, 0.0002); //color of fog - objects are all color _light = new THREE.DirectionalLight(0xffffff, 1); _scene.add(_light); _renderer = new THREE.WebGLRenderer(); _renderer.setSize(window.innerWidth, window.innerHeight); ele.appendChild(_renderer.domElement); _renderer.render(_scene, _camera); } // add element var addParticles = function(pre_sizeAr){ var geometry = new THREE.Geometry(); for (i = 0; i < 150; i ++){ var vertex = new THREE.Vector3(getRandOffsetNum(), getRandOffsetNum(), getRandOffsetNum()); geometry.vertices.push(vertex); } var textur = THREE.ImageUtils.loadTexture("https://dl.dropboxusercontent.com/u/90712768/img/circle_white.png"); for(var i = 0; i < pre_sizeAr.length; i++){ var material = new THREE.ParticleBasicMaterial({ color: 0xffffff, size: pre_sizeAr[i]*5, map: textur, blending: THREE.NormalBlending, transparent: true, }); var particles = new THREE.ParticleSystem(geometry, material); particles.rotation.set(Math.random() * 6, Math.random() * 6, Math.random() * 6); _scene.add(particles); } } var addOctahedronGeometry = function(pre_sizeAr){ for(var i = 0; i < pre_sizeAr.length; i++){ var cutNum =Math.floor(Math.random() * 3); var octa = new THREE.Mesh( new THREE.OctahedronGeometry( pre_sizeAr[i]*25,cutNum), new THREE.MeshBasicMaterial ( { color: 0xe44a81, ambient: 0xffffff, specular: 0xcccccc, shininess:1000, transparent :true, opacity :0.999 }) ); octa.position.x = getRandOffsetNum(); octa.position.y = getRandOffsetNum(); octa.position.z = getRandOffsetNum(); _scene.add( octa ); var octaWire = new THREE.Mesh( new THREE.OctahedronGeometry( pre_sizeAr[i]*25,cutNum), new THREE.MeshBasicMaterial( { color: 0xffffff ,wireframe: true} ) ); octaWire.position = octa.position; _scene.add( octaWire ); } } var addSphere = function(){ var cubeR = 120; var geometry = new THREE.SphereGeometry(cubeR, cubeR, cubeR); var textur = THREE.ImageUtils.loadTexture("https://dl.dropboxusercontent.com/u/90712768/img/earth.jpg"); var material = new THREE.MeshPhongMaterial ({ fog:false, color: 0xe44a81, ambient: 0xffffff, specular: 0xcccccc, shininess:1000, bumpMap:textur, bumpScale: 3 }); var mesh = new THREE.Mesh(geometry, material); _scene.add(mesh); }; var addWorldSphere = function(r) { var geometry = new THREE.SphereGeometry(r, 50, 50); var material = new THREE.MeshBasicMaterial({color: 0x0f8ece, wireframe: true, fog:false}); var sphere = new THREE.Mesh(geometry, material); _scene.add(sphere); }; var getRandOffsetNum = function(){ var num = Math.random() * 1800 + 250; if(Math.random() < 0.6){ num *= -1; } return num; } // render task var render = function() { requestAnimationFrame(render); _camera.position.x += ((_mouseX*4) - _camera.position.x) * .05; _camera.position.y += (( _mouseY*(-3)) - _camera.position.y) * .05; var posZ = _camera.position.z + (( _mouseY*(-3)) - _camera.position.z) * .05; if(posZ < 220) posZ = 220 + (220 - posZ); _camera.position.z = posZ; _light.position.set(_camera.position.x, _camera.position.y * 1.5, _camera.position.z); _camera.lookAt(new THREE.Vector3(0,0,0)); for (var i = 0; i < _scene.children.length; i++){ var object = _scene.children[i]; if (object instanceof THREE.ParticleSystem){ object.rotation.y += .0005; } } _renderer.render(_scene, _camera); } // main createWorld(); addWorldSphere(3000); addParticles([10,8,10,20,2,8]); addOctahedronGeometry([10,8,10,20,10,8,10,20,2,8]); addSphere(); render(); // event window.addEventListener('resize', onWindowResize, false); function onWindowResize(){ _windowHalfX = window.innerWidth / 2; _windowHalfY = window.innerHeight / 2; _camera.aspect = window.innerWidth / window.innerHeight; _camera.updateProjectionMatrix(); _renderer.setSize(window.innerWidth, window.innerHeight); } window.addEventListener('mousemove', onWindowMouseMove, false); function onWindowMouseMove(event){ _mouseX = event.clientX - _windowHalfX; _mouseY = event.clientY - _windowHalfY; }
CSS
body { background-color: #1f9ede; margin: 0; padding: 0; width: 100%; height: 100%; } * { margin: 0; padding: 0; width: 100%; height: 100%; }
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