var camera, scene, renderer, geometry, material, mesh; init(); animate(); function init() { stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); clock = new THREE.Clock(); renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; scene.add( camera ); geometry = new THREE.CubeGeometry( 200, 200, 200 ); material = new THREE.MeshLambertMaterial( { color: 0xaa6666, wireframe: false } ); mesh = new THREE.Mesh( geometry, material ); //scene.add( mesh ); cubeSineDriver = 0; textGeo = new THREE.PlaneGeometry(300,300); THREE.ImageUtils.crossOrigin = ''; //Need this to pull in crossdomain images from AWS textTexture = THREE.ImageUtils.loadTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/quickText.png'); textMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff, opacity: 1, map: textTexture, transparent: true, blending: THREE.AdditiveBlending}) text = new THREE.Mesh(textGeo,textMaterial); text.position.z = 800; scene.add(text); light = new THREE.DirectionalLight(0xffffff,0.5); light.position.set(-1,0,1); scene.add(light); smokeTexture = THREE.ImageUtils.loadTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/Smoke-Element.png'); smokeMaterial = new THREE.MeshLambertMaterial({color: 0x00dddd, map: smokeTexture, transparent: true}); smokeGeo = new THREE.PlaneGeometry(300,300); smokeParticles = []; for (p = 0; p < 150; p++) { var particle = new THREE.Mesh(smokeGeo,smokeMaterial); particle.position.set(Math.random()*500-250,Math.random()*500-250,Math.random()*1000-100); particle.rotation.z = Math.random() * 360; scene.add(particle); smokeParticles.push(particle); } document.body.appendChild( renderer.domElement ); } function animate() { // note: three.js includes requestAnimationFrame shim stats.begin(); delta = clock.getDelta(); requestAnimationFrame( animate ); evolveSmoke(); render(); stats.end(); } function evolveSmoke() { var sp = smokeParticles.length; while(sp--) { smokeParticles[sp].rotation.z += (delta * 0.2); } } function render() { mesh.rotation.x += 0.005; mesh.rotation.y += 0.01; cubeSineDriver += .01; mesh.position.z = 100 + (Math.sin(cubeSineDriver) * 500); renderer.render( scene, camera ); }