threex
Version:
Game Extensions for three.js http://www.threejsgames.com/extensions/
113 lines (95 loc) • 3.65 kB
HTML
<script src="../../../vendor/three.js/build/three.min.js"></script>
<script src="../../../vendor/require.js/require.js"></script>
<body style='margin: 0px; background-color: #bbbbbb;overflow: hidden;'><script>
require([ '../../threex.effectcomposer/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;
var geometry = new THREE.TorusGeometry( 0.5-0.15, 0.15)
var material = new THREE.MeshNormalMaterial()
var mesh = new THREE.Mesh( geometry, material )
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 torus1 = new THREE.Mesh( geometry, material )
torus1.position.x = 0.5;
torus1.scale.set(1,1,1).multiplyScalar(1/2)
scene.add( torus1 )
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 )
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
var sceneGlow = new THREE.Scene();
var materialOn = new THREE.MeshBasicMaterial()
materialOn.color.set(0x88ccff)
var materialOff = new THREE.MeshBasicMaterial()
materialOff.color.set('black')
var meshGlow = new THREE.Mesh( mesh.geometry.clone(), materialOn )
meshGlow.position = mesh.position
meshGlow.rotation = mesh.rotation
meshGlow.scale = mesh.scale
sceneGlow.add( meshGlow )
var torus1Glow = new THREE.Mesh( torus1.geometry.clone(), materialOff )
torus1Glow.position = torus1.position
torus1Glow.rotation = torus1.rotation
torus1Glow.scale = torus1.scale
sceneGlow.add( torus1Glow )
var torus2Glow = new THREE.Mesh( torus2.geometry.clone(), materialOff )
torus2Glow.position = torus2.position
torus2Glow.rotation = torus2.rotation
torus2Glow.scale = torus2.scale
sceneGlow.add( torus2Glow )
// setup the RenderTarget
var textureW = window.innerWidth
var textureH = window.innerHeight
var textureW = 256*4
var textureH = 256*4
var renderTarget= new THREE.WebGLRenderTarget(textureW, textureH, {
minFilter : THREE.LinearFilter,
magFilter : THREE.NearestFilter,
format : THREE.RGBFormat
})
var blurHLevel = 6
var blurVLevel = 3
var glowComposer= new THREEx.EffectComposer(renderer, renderTarget)
.renderPass(sceneGlow, camera)
.horizontalBlur(blurHLevel).verticalBlur(blurVLevel)
.horizontalBlur(blurHLevel)
.horizontalBlur(blurHLevel)
.finish()
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
var composer = new THREEx.EffectComposer(renderer)
.renderPass(scene, camera)
.blendPass(renderTarget, 0.5, 2)
.finish()
var lastTime = null;
requestAnimationFrame(function(now){
// keep looping
requestAnimationFrame( arguments.callee );
// compute delta in seconds
var delta = (now - (lastTime ? lastTime : now-1000/60)) / 1000
lastTime = now;
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
glowComposer.update(delta)
composer.update(delta);
});
})
</script></body>