threex
Version:
Game Extensions for three.js http://www.threejsgames.com/extensions/
147 lines (128 loc) • 5.62 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/postprocessing/SavePass.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="../threex.glowkeycolor.js"></script>
<!-- include for threex.glowdatgui -->
<script src='../../../vendor/three.js/examples/js/libs/dat.gui.min.js'></script>
<script src="../threex.glowdatgui.js"></script>
<!-- Start the code itself -->
<body style='margin: 0px; background-color: #bbbbbb;overflow: hidden;'><script>
// init renderer
var renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var updateFcts = [];
var scene = new THREE.Scene();
// init camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 3;
var keyColor = new THREE.Color('hotpink')
// var keyColor = new THREE.Color(0x88ccff)
var glowColor = new THREE.Color('blue')
var glowColor = new THREE.Color('white')
var glowColor = new THREE.Color('white')
var geometry = new THREE.TorusGeometry( 0.5-0.15, 0.15, 48, 16)
var material = new THREE.MeshNormalMaterial()
// var material = new THREE.MeshBasicMaterial({
// color : keyColor
// });
var mesh = new THREE.Mesh( geometry, material )
mesh.scale.set(1,1,1).multiplyScalar(2)
// mesh.visible = false
scene.add( mesh )
// var meshWire = new THREE.Mesh(geometry.clone(), new THREE.MeshBasicMaterial({
// color : keyColor,
// wireframe : true,
// wireframeLinewidth : 4,
// })
// )
// meshWire.scale.multiplyScalar(1.001)
// mesh.add( meshWire )
var geometry = new THREE.CubeGeometry( 1, 1, 1)
var material = new THREE.MeshNormalMaterial()
var torus1 = new THREE.Mesh( geometry, material )
torus1.position.x = 0.5;
torus1.scale.set(1,1,1).multiplyScalar(1/2)
mesh.add( torus1 )
var meshWire = new THREE.Mesh(geometry.clone(), new THREE.MeshBasicMaterial({
color : keyColor,
wireframe : true,
wireframeLinewidth : 4,
})
)
meshWire.scale.multiplyScalar(1.001)
torus1.add( meshWire )
var geometry = new THREE.CubeGeometry( 1, 1, 1)
var material = new THREE.MeshNormalMaterial()
var torus2 = new THREE.Mesh( geometry, material )
torus2.position.x = -0.5;
torus2.scale.set(1,1,1).multiplyScalar(1/2)
scene.add( torus2 )
updateFcts.push(function(delta, now){
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
})
//////////////////////////////////////////////////////////////////////////////////
// init glow //
//////////////////////////////////////////////////////////////////////////////////
var glow = new THREEx.GlowKeyColor(renderer, camera, undefined, scene)
glow.filterEffect.uniforms.keyColor.value.copy( keyColor )
glow.filterEffect.uniforms.glowColor.value.copy( glowColor )
//////////////////////////////////////////////////////////////////////////////////
// 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 )
// experiment to have only one renderPass
// add Render Pass
// var effect = new THREE.ShaderPass(THREE.CopyShader)
// effect.uniforms['tDiffuse' ].value = glow.renderTarget
// // glow.composer.passes[1].renderTarget;
// composer.addPass( effect )
// add Blend Pass - to blend with glow.renderTarget
var effect = new THREE.ShaderPass( THREEx.GlowKeyColor.BlendShader, 'tDiffuse1');
effect.uniforms['tDiffuse2' ].value = glow.renderTarget;
effect.uniforms['mixRatio' ].value = 0.5;
effect.uniforms['opacity' ].value = 2;
effect.uniforms['keyColor' ].value = keyColor;
effect.uniforms['glowColor' ].value = glowColor;
composer.addPass( effect );
// mark the last pass as ```renderToScreen```
composer.passes[composer.passes.length-1].renderToScreen = true;
//////////////////////////////////////////////////////////////////////////////////
// render the scene //
//////////////////////////////////////////////////////////////////////////////////
updateFcts.push(function(delta, now){
glow.update(delta)
composer.render(delta);
})
//////////////////////////////////////////////////////////////////////////////////
// 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>