threex
Version:
Game Extensions for three.js http://www.threejsgames.com/extensions/
179 lines (157 loc) • 6.92 kB
HTML
<script src="../../../vendor/three.js/build/three.min.js"></script>
<!-- includes for THREE.EffectComposer -->
<script src="../../../vendor/three.js/examples/js/postprocessing/EffectComposer.js"></script>
<script src="../../../vendor/three.js/examples/js/postprocessing/RenderPass.js"></script>
<script src="../../../vendor/three.js/examples/js/postprocessing/ShaderPass.js"></script>
<script src="../../../vendor/three.js/examples/js/postprocessing/MaskPass.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/CopyShader.js"></script>
<!-- includes for threex.glow -->
<script src="../../../vendor/three.js/examples/js/shaders/HorizontalBlurShader.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/VerticalBlurShader.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/BasicShader.js"></script>
<script src="../threex.radialblurshader.js"></script>
<script src="../threex.godrays.js"></script>
<!-- include for threex.glowdatgui -->
<script src='../../../vendor/three.js/examples/js/libs/dat.gui.min.js'></script>
<script src="../threex.godrays2datgui.js"></script>
<!-- includes for the examples to blend the output of threex.glow -->
<script src="../../../vendor/three.js/examples/js/shaders/BlendShader.js"></script>
<!-- Start the code itself -->
<body style='margin: 0px; background-color: #bbbbbb;overflow: hidden;'><script>
// init renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var updateFcts = [];
// init scene
var scene = new THREE.Scene();
// init camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 3;
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
var light = new THREE.AmbientLight( 0x444444 )
scene.add( light )
var light = new THREE.DirectionalLight(0xcccccc, 1)
scene.add( light )
var light = new THREE.PointLight(0x88ccff, 1)
scene.add( light )
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
;(function(){
var geometry = new THREE.TorusGeometry(0.5-0.1, 0.1, 32, 16)
var material = new THREE.MeshPhongMaterial()
material.color.set('red')
var mesh = new THREE.Mesh( geometry, material)
mesh.scale.set(1,1,1).multiplyScalar(2)
mesh.position.x = 1;
mesh.rotation.y = Math.PI/2
scene.add( mesh )
})()
;(function(){
var geometry = new THREE.TorusGeometry(0.5-0.1, 0.1, 32, 16)
var material = new THREE.MeshPhongMaterial()
material.color.set('green')
var mesh = new THREE.Mesh( geometry, material)
mesh.scale.set(1,1,1).multiplyScalar(2)
mesh.position.x = 0;
mesh.rotation.y = Math.PI/2
scene.add( mesh )
})()
;(function(){
var geometry = new THREE.TorusGeometry(0.5-0.1, 0.1, 32, 16)
var material = new THREE.MeshPhongMaterial()
material.color.set('blue')
var mesh = new THREE.Mesh( geometry, material)
mesh.scale.set(1,1,1).multiplyScalar(2)
mesh.position.x = -1;
mesh.rotation.y = Math.PI/2
scene.add( mesh )
})()
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
var geometry = new THREE.SphereGeometry( 0.4 )
var material = new THREE.MeshNormalMaterial()
var mesh = new THREE.Mesh( geometry, material )
mesh.scale.set(1,1,1).multiplyScalar(1)
scene.add( mesh )
mesh.userData.domClasses += ' godRays'
updateFcts.push(function(delta, now){
mesh.position.x = Math.cos(0.2 *now * Math.PI*2)*2.5
mesh.position.z = Math.sin(0.1 *now * Math.PI*2)*1
})
light.position = mesh.position
mesh.visible = false
//////////////////////////////////////////////////////////////////////////////////
// init glow //
//////////////////////////////////////////////////////////////////////////////////
var materialOn = new THREE.MeshBasicMaterial()
materialOn.color.set(0x88ccff)
var materialOff = new THREE.MeshBasicMaterial()
materialOff.color.set('black')
var godRays = new THREEx.GodRays(renderer, camera)
godRays.copyScene(scene, function(srcObject){
var domClasses = srcObject.userData.domClasses
var godRays = domClasses && domClasses.match(/godRays/)
var material = godRays ? materialOn : materialOff
return material
})
// add a DAT.gui for find tuning
new THREEx.addGodRays2DatGui(godRays)
// update sun position
updateFcts.push(function(delta, now){
godRays.updateSunPosition(mesh)
})
//////////////////////////////////////////////////////////////////////////////////
// blend main scene with glow.renderTexture //
//////////////////////////////////////////////////////////////////////////////////
var composer = new THREE.EffectComposer(renderer)
// add Render Pass
var effect = new THREE.RenderPass(scene, camera)
composer.addPass( effect )
// add Blend Pass - to blend with glow.renderTarget
var effect = new THREE.ShaderPass( THREE.BlendShader, 'tDiffuse1')
effect.uniforms['tDiffuse2' ].value = godRays.renderTarget
effect.uniforms['mixRatio' ].value = 0.5
effect.uniforms['opacity' ].value = 2
composer.addPass( effect )
// mark the last pass as ```renderToScreen```
composer.passes[composer.passes.length-1].renderToScreen = true;
updateFcts.push(function(delta, now){
godRays.update(delta)
composer.render(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)
updateFcts.push(function(delta, now){
camera.position.x += (mouse.x*8 - camera.position.x) * (delta*3)
camera.position.y += (mouse.y*8 - camera.position.y) * (delta*3)
camera.lookAt( scene.position )
})
//////////////////////////////////////////////////////////////////////////////////
// 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
updateFcts.forEach(function(updateFn){
updateFn(deltaMsec/1000, nowMsec/1000)
})
})
</script></body>