threex
Version:
Game Extensions for three.js http://www.threejsgames.com/extensions/
111 lines (94 loc) • 4.02 kB
HTML
<script src="../../../../vendor/three.js/build/three.min.js"></script>
<script src="../../../../vendor/require.js/require.js"></script>
<!-- include for threex.glowdatgui -->
<script src='../../../vendor/three.js/examples/js/libs/dat.gui.min.js'></script>
<script src="../../threex.glowscene/threex.glowdatgui.js"></script>
<script src="../threex.scenemirror.js"></script>
<body style='margin: 0px; background-color: #bbbbbb;overflow: hidden;'><script>
require([ '../../threex.glowscene/package.require.js'
], function(){
// init renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 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 materialOn = new THREE.MeshBasicMaterial()
materialOn.color.set(0x88ccff)
var materialOff = new THREE.MeshBasicMaterial()
materialOff.color.set('black')
var glow = new THREEx.Glow(renderer, camera);
// add a DAT.gui for find tuning
new THREEx.addGlow2DatGui(glow)
var glowSceneMirror = new THREEx.SceneMirror(scene, {
dstScene: glow.scene,
onAdded : function(dstObject, srcObject){
var domClasses = srcObject.userData.domClasses
var glowing = domClasses && domClasses.match(/ glowing /)
var material = glowing ? materialOn : materialOff
dstObject.material = material
},
})
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
var geometry = new THREE.TorusGeometry( 0.5-0.15, 0.15)
var material = new THREE.MeshNormalMaterial()
var mesh = new THREE.Mesh( geometry, material )
mesh.userData.domClasses += ' glowing '
glowSceneMirror.add(mesh)
mesh.scale.set(1,1,1).multiplyScalar(2)
scene.add( mesh )
var geometry = new THREE.CubeGeometry( 1, 1, 1)
var material = new THREE.MeshNormalMaterial()
var cube1 = new THREE.Mesh( geometry, material )
glowSceneMirror.add(cube1)
cube1.position.x = 0.5;
cube1.scale.set(1,1,1).multiplyScalar(1/2)
mesh.add( cube1 )
var geometry = new THREE.CubeGeometry( 1, 1, 1)
var material = new THREE.MeshNormalMaterial()
var torus2 = new THREE.Mesh( geometry, material )
glowSceneMirror.add(torus2)
torus2.position.x = -0.5;
torus2.scale.set(1,1,1).multiplyScalar(1/2)
scene.add( torus2 )
//////////////////////////////////////////////////////////////////////////////////
// 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 = glow.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;
//////////////////////////////////////////////////////////////////////////////////
// rendering loop //
//////////////////////////////////////////////////////////////////////////////////
var lastTime = Date.now()/1000;
requestAnimationFrame(function animate(now){
// keep looping
requestAnimationFrame( animate );
// compute delta in seconds
var delta = (now - lastTime)/1000
lastTime = now;
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
glow.update(delta)
composer.render(delta);
})
})
</script></body>