Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
207 lines (177 sloc) 6.31 KB
<!DOCTYPE html>
<script src='vendor/three.js/build/three-min.js'></script>
<script src='vendor/require.js/require.js'></script>
<script src='vendor/three.js/examples/js/ImprovedNoise.js'></script>
<script src='../threex.cubecamera.js'></script>
<body style='margin: 0px; background-color: #bbbbbb; overflow: hidden;'><script>
require([ 'bower_components/threex.skymap/package.require.js'
], function(){
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var onRenderFcts= [];
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.z = 3;
//////////////////////////////////////////////////////////////////////////////////
// add some disco lights //
//////////////////////////////////////////////////////////////////////////////////
;(function(){
var light = new THREE.PointLight('white');
light.intensity = 1
scene.add(light)
var helper = new THREE.PointLightHelper(light, 0.05)
light.add(helper)
// move the light
onRenderFcts.push(function(delta, now){
var angle = 0.05 * now * Math.PI*2
light.position.x= Math.cos(angle*1)*3;
light.position.y= Math.sin(angle*3)*3;
light.position.z= Math.sin(angle*3.2)*3;
helper && helper.update()
})
// change hue with perlin
var perlin = new ImprovedNoise();
onRenderFcts.push(function(delta, now){
var hue = perlin.noise(5*now, 0, 0) + 0.5
light.color.setHSL(hue, 1, 0.5)
light.intensity = 4*(perlin.noise(3*now,0,0)+0.5)
});
})()
;(function(){
var light = new THREE.PointLight('purple');
light.intensity = 3
scene.add(light)
var helper = new THREE.PointLightHelper(light, 0.05)
light.add(helper)
// move the light
onRenderFcts.push(function(delta, now){
var angle = 0.08 * now * Math.PI*2
light.position.x= Math.cos(angle*6.3)*3;
light.position.y= Math.sin(angle*2.3)*3;
light.position.z= Math.sin(angle*2)*3;
helper && helper.update()
})
// change hue with perlin
var perlin = new ImprovedNoise();
onRenderFcts.push(function(delta, now){
var noiseAge = 0.1*now
var hue = perlin.noise(noiseAge, 0, 0) + 0.5
light.color.setHSL(hue, 1, 0.5)
});
})()
;(function(){
var light = new THREE.DirectionalLight('red');
light.intensity = 4
var helper = new THREE.DirectionalLightHelper(light, 0.05)
scene.add(helper)
// move the light
onRenderFcts.push(function(delta, now){
var angle = 0.1 * now * Math.PI*2
light.position.x= Math.cos(angle*5.4);
light.position.y= Math.sin(angle*3.2);
light.position.z= Math.sin(angle*1.4);
helper && helper.update()
})
// change hue with perlin
var perlin = new ImprovedNoise();
onRenderFcts.push(function(delta, now){
var noiseAge = 0.1*now
var hue = perlin.noise(noiseAge, 0, 0) + 0.5
light.color.setHSL(hue, 1, 0.5)
});
})()
;(function(){
var light = new THREE.DirectionalLight('blue');
light.intensity = 2
var helper = new THREE.DirectionalLightHelper(light, 0.05)
scene.add(helper)
// move the light
onRenderFcts.push(function(delta, now){
var angle = 0.15 * now * Math.PI*2
light.position.x= Math.cos(angle*2);
light.position.y= Math.sin(angle*3.4);
light.position.z= Math.cos(angle*1.5);
helper.update()
})
})()
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
var mesh = THREEx.createSkymap('swedishroyalcastle')
scene.add( mesh )
var textureCube = mesh.material.uniforms.tCube.value
//////////////////////////////////////////////////////////////////////////////////
// add an object and make it move //
//////////////////////////////////////////////////////////////////////////////////
// add the base texture
var texture = THREE.ImageUtils.loadTexture('images/water.jpg')
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(2,2);
var geometry = new THREE.IcosahedronGeometry( 1, 4 )
// put some noise in the geometry
geometry.vertices.forEach(function(vertex){
var length = vertex.length()
length += (Math.random()-0.5)*0.003
vertex.setLength( length )
})
geometry.computeFaceNormals()
var material = new THREE.MeshPhongMaterial({
map : texture,
envMap : textureCube,
reflectivity : 3.5,
//combine : THREE.MultiplyOperation,
//combine : THREE.MixOperation,
combine : THREE.AddOperation,
// specularMap : texture,
shading : THREE.FlatShading,
color : 'gray',
specular : 'white',
emissive : '#222',
shininess : 50,
metal : true,
//perPixel : false,
//opacity : 0.2,
});
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
onRenderFcts.push(function(delta, now){
mesh.rotation.y += 0.1 * delta;
})
//////////////////////////////////////////////////////////////////////////////////
// Camera Controls //
//////////////////////////////////////////////////////////////////////////////////
var mouse = {x : 0, y : 0}
document.addEventListener('mousemove', function(event){
mouse.x = (event.clientX / window.innerWidth ) - 0.5
mouse.y = (event.clientY / window.innerHeight) - 0.5
}, false)
onRenderFcts.push(function(delta, now){
camera.position.x += (mouse.x*5 - camera.position.x) * (delta*3)
camera.position.y += (mouse.y*5 - camera.position.y) * (delta*3)
camera.lookAt( scene.position )
})
//////////////////////////////////////////////////////////////////////////////////
// render the scene //
//////////////////////////////////////////////////////////////////////////////////
onRenderFcts.push(function(){
renderer.render( scene, camera );
})
//////////////////////////////////////////////////////////////////////////////////
// loop runner //
//////////////////////////////////////////////////////////////////////////////////
var lastTimeMsec= null
requestAnimationFrame(function animate(nowMsec){
// keep looping
requestAnimationFrame( animate );
// measure time
lastTimeMsec = lastTimeMsec || nowMsec-1000/60
var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
lastTimeMsec = nowMsec
// call each update function
onRenderFcts.forEach(function(updateFn){
updateFn(deltaMsec/1000, nowMsec/1000)
})
})
})
</script></body>
You can’t perform that action at this time.