709
edits
(Creating Collapsible Buttons) |
No edit summary |
||
Line 103: | Line 103: | ||
$( createCollapseButtons ); | $( createCollapseButtons ); | ||
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; | |||
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: 0xffffff, 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 ); | |||
} |