mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-19 09:56:12 +10:00
alteredq
4be5880b0f
Also some refactoring in plugins. Still not really satisfied with a solution, will need to handle somehow ordering of plugins (both among them and with respect to rest of rendering, this would be needed for example to be able to redo shadow maps as a plugin).
262 lines
6.3 KiB
HTML
262 lines
6.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - lensflares</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<style type="text/css">
|
|
body {
|
|
background:#000;
|
|
padding:0;
|
|
margin:0;
|
|
font-weight: bold;
|
|
overflow:hidden;
|
|
}
|
|
#info {
|
|
position: absolute;
|
|
top: 10px; width: 100%;
|
|
color: #ffffff;
|
|
padding: 5px;
|
|
font-family: Monospace;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
z-index:100;
|
|
}
|
|
|
|
a {
|
|
color: orange;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: #0080ff;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="info">
|
|
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - lensflares -
|
|
textures from <a href="http://ro.me">ro.me</a> - fly with WASD/RF/QE + mouse
|
|
</div>
|
|
|
|
<script src="../build/Three.js"></script>
|
|
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script src="js/Stats.js"></script>
|
|
|
|
<script>
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, renderer;
|
|
|
|
var clock = new THREE.Clock();
|
|
|
|
var composer;
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
container = document.createElement( 'div' );
|
|
document.body.appendChild( container );
|
|
|
|
// camera
|
|
|
|
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 15000 );
|
|
camera.position.z = 250;
|
|
|
|
controls = new THREE.FlyControls( camera );
|
|
|
|
controls.movementSpeed = 2500;
|
|
controls.domElement = container;
|
|
controls.rollSpeed = Math.PI / 6;
|
|
controls.autoForward = false;
|
|
controls.dragToLook = false
|
|
|
|
// scene
|
|
|
|
scene = new THREE.Scene();
|
|
scene.add( camera );
|
|
|
|
scene.fog = new THREE.Fog( 0x000000, 3500, 15000 );
|
|
scene.fog.color.setHSV( 0.51, 0.6, 0.025 );
|
|
|
|
// world
|
|
|
|
var s = 250;
|
|
|
|
var cube = new THREE.CubeGeometry( s, s, s );
|
|
var material = new THREE.MeshPhongMaterial( { ambient: 0x333333, color: 0xffffff, specular: 0xffffff, shininess: 50, perPixel: true } );
|
|
|
|
|
|
for ( var i = 0; i < 3000; i ++ ) {
|
|
|
|
var mesh = new THREE.Mesh( cube, material );
|
|
|
|
mesh.position.x = 8000 * ( 2.0 * Math.random() - 1.0 );
|
|
mesh.position.y = 8000 * ( 2.0 * Math.random() - 1.0 );
|
|
mesh.position.z = 8000 * ( 2.0 * Math.random() - 1.0 );
|
|
|
|
mesh.rotation.x = Math.random() * Math.PI;
|
|
mesh.rotation.y = Math.random() * Math.PI;
|
|
mesh.rotation.z = Math.random() * Math.PI;
|
|
|
|
mesh.matrixAutoUpdate = false;
|
|
mesh.updateMatrix();
|
|
|
|
scene.add( mesh );
|
|
|
|
}
|
|
|
|
|
|
// lights
|
|
|
|
var ambient = new THREE.AmbientLight( 0xffffff );
|
|
ambient.color.setHSV( 0.1, 0.5, 0.3 );
|
|
scene.add( ambient );
|
|
|
|
|
|
var dirLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
|
|
dirLight.position.set( 0, -1, 0 ).normalize();
|
|
scene.add( dirLight );
|
|
|
|
dirLight.color.setHSV( 0.1, 0.725, 0.9 );
|
|
|
|
// lens flares
|
|
|
|
var textureFlare0 = THREE.ImageUtils.loadTexture( "textures/lensflare/lensflare0.png" );
|
|
var textureFlare2 = THREE.ImageUtils.loadTexture( "textures/lensflare/lensflare2.png" );
|
|
var textureFlare3 = THREE.ImageUtils.loadTexture( "textures/lensflare/lensflare3.png" );
|
|
|
|
addLight( 0.55, 0.825, 0.99, 5000, 0, -1000 );
|
|
addLight( 0.08, 0.825, 0.99, 0, 0, -1000 );
|
|
addLight( 0.995, 0.025, 0.99, 5000, 5000, -1000 );
|
|
|
|
function addLight( h, s, v, x, y, z ) {
|
|
|
|
var light = new THREE.PointLight( 0xffffff, 1.5, 4500 );
|
|
light.position.set( x, y, z );
|
|
scene.add( light );
|
|
|
|
light.color.setHSV( h, s, v );
|
|
|
|
var flareColor = new THREE.Color( 0xffffff );
|
|
flareColor.copy( light.color );
|
|
THREE.ColorUtils.adjustHSV( flareColor, 0, -0.5, 0.5 );
|
|
|
|
var lensFlare = new THREE.LensFlare( textureFlare0, 700, 0.0, THREE.AdditiveBlending, flareColor );
|
|
|
|
lensFlare.add( textureFlare2, 512, 0.0, THREE.AdditiveBlending );
|
|
lensFlare.add( textureFlare2, 512, 0.0, THREE.AdditiveBlending );
|
|
lensFlare.add( textureFlare2, 512, 0.0, THREE.AdditiveBlending );
|
|
|
|
lensFlare.add( textureFlare3, 60, 0.6, THREE.AdditiveBlending );
|
|
lensFlare.add( textureFlare3, 70, 0.7, THREE.AdditiveBlending );
|
|
lensFlare.add( textureFlare3, 120, 0.9, THREE.AdditiveBlending );
|
|
lensFlare.add( textureFlare3, 70, 1.0, THREE.AdditiveBlending );
|
|
|
|
lensFlare.customUpdateCallback = lensFlareUpdateCallback;
|
|
lensFlare.position = light.position;
|
|
|
|
scene.add( lensFlare );
|
|
|
|
}
|
|
|
|
// renderer
|
|
|
|
renderer = new THREE.WebGLRenderer( { antialias: true, maxLights: 8 } );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
renderer.setClearColor( scene.fog.color, 1 );
|
|
|
|
container.appendChild( renderer.domElement );
|
|
|
|
//
|
|
|
|
renderer.gammaInput = true;
|
|
renderer.gammaOutput = true;
|
|
renderer.physicallyBasedShading = true;
|
|
|
|
// stats
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
stats.domElement.style.zIndex = 100;
|
|
container.appendChild( stats.domElement );
|
|
|
|
stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
|
|
stats.domElement.children[ 0 ].style.background = "transparent";
|
|
stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
|
|
|
|
// events
|
|
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function lensFlareUpdateCallback( object ) {
|
|
|
|
var f, fl = object.lensFlares.length;
|
|
var flare;
|
|
var vecX = -object.positionScreen.x * 2;
|
|
var vecY = -object.positionScreen.y * 2;
|
|
|
|
|
|
for( f = 0; f < fl; f++ ) {
|
|
|
|
flare = object.lensFlares[ f ];
|
|
|
|
flare.x = object.positionScreen.x + vecX * flare.distance;
|
|
flare.y = object.positionScreen.y + vecY * flare.distance;
|
|
|
|
flare.rotation = 0;
|
|
|
|
}
|
|
|
|
object.lensFlares[ 2 ].y += 0.025;
|
|
object.lensFlares[ 3 ].rotation = object.positionScreen.x * 0.5 + 45 * Math.PI / 180;
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function onWindowResize( event ) {
|
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
var delta = clock.getDelta();
|
|
|
|
controls.update( delta );
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|