CSS
html {
width: 100%;
height: 100%;
background: #11e8bb; /* Old browsers */
background: -moz-linear-gradient(top, #11e8bb 0%, #FDA5D2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #11e8bb 0%,#FDA5D2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #11e8bb 0%,#FDA5D2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11e8bb', endColorstr='#FDA5D2',GradientType=0 ); /* IE6-9 */
}
JAVASCRIPT
function init(){renderer=new THREE.WebGLRenderer({antialias:!0,alpha:!0}),renderer.setPixelRatio(window.devicePixelRatio?window.devicePixelRatio:1),renderer.setSize(window.innerWidth,window.innerHeight),renderer.autoClear=!1,renderer.setClearColor(0,0),document.getElementById("canvas").appendChild(renderer.domElement),scene=new THREE.Scene,camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1e3),camera.position.z=400,scene.add(camera),triangle=new THREE.Object3D,particle=new THREE.Object3D,ball=new THREE.Object3D,scene.add(triangle),scene.add(particle),scene.add(ball);for(var e=new THREE.TetrahedronGeometry(2,0),n=new THREE.TetrahedronGeometry(16,0),a=new THREE.TetrahedronGeometry(8,4),r=new THREE.MeshPhongMaterial({color:16777215,shading:THREE.FlatShading}),i=new THREE.MeshPhongMaterial({color:16777215,wireframe:!0,side:THREE.DoubleSide}),t=new THREE.MeshPhongMaterial({color:16777215,shading:THREE.FlatShading}),o=0;1e3>o;o++){var d=new THREE.Mesh(e,r);d.position.set(Math.random()-.5,Math.random()-.5,Math.random()-.5).normalize(),d.position.multiplyScalar(90+700*Math.random()),d.rotation.set(2*Math.random(),2*Math.random(),2*Math.random()),particle.add(d)}var l=new THREE.Mesh(n,i);l.scale.x=l.scale.y=l.scale.z=15,triangle.add(l);var c=new THREE.Mesh(a,t);c.scale.x=c.scale.y=c.scale.z=12,ball.add(c);var s=new THREE.AmbientLight(10066329);scene.add(s);var E=[];E[0]=new THREE.DirectionalLight(16777215,1),E[0].position.set(1,0,0),E[1]=new THREE.DirectionalLight(1173691,1),E[1].position.set(.75,1,.5),E[2]=new THREE.DirectionalLight(8519881,1),E[2].position.set(-.75,-1,.5),scene.add(E[0]),scene.add(E[1]),scene.add(E[2]),window.addEventListener("resize",onWindowResize,!1)}function onWindowResize(){camera.aspect=window.innerWidth/window.innerHeight,camera.updateProjectionMatrix(),renderer.setSize(window.innerWidth,window.innerHeight)}function animate(){requestAnimationFrame(animate),particle.rotation.x+=0,particle.rotation.y-=.004,triangle.rotation.x+=.005,triangle.rotation.y+=.005,ball.rotation.y+=.002,renderer.clear(),renderer.render(scene,camera)}var renderer,scene,camera,composer,controls,triangle,particle,ball;window.onload=function(){init(),animate()};
