mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-22 19:36:13 +10:00
alteredq
942a6c89c9
Lots of code got cleaner with seconds, seems we used them before all around. Also changed examples that didn't need deltas to simple Date.now() plus some more examples cleaning, trying to get rid of obsolescence warnings.
401 lines
9.9 KiB
HTML
401 lines
9.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - shadow map</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<style>
|
|
body {
|
|
font-family: Monospace;
|
|
background-color: #000;
|
|
color: #fff;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
#info {
|
|
position: absolute;
|
|
top: 10px;
|
|
width: 100%;
|
|
text-align: center;
|
|
z-index: 100;
|
|
display:block;
|
|
}
|
|
#info a { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="info">
|
|
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - shadowmap - models by <a href="http://mirada.com/">mirada</a> from <a href="http://ro.me">rome</a></br>
|
|
move camera with WASD / RF + mouse
|
|
</div>
|
|
|
|
<script src="../build/Three.js"></script>
|
|
|
|
<script src="js/ShaderExtras.js"></script>
|
|
|
|
<script src="js/Detector.js"></script>
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script src="js/Stats.js"></script>
|
|
|
|
<script src="fonts/helvetiker_bold.typeface.js"></script>
|
|
|
|
<script>
|
|
|
|
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
|
|
|
|
var MARGIN = 100;
|
|
|
|
var SCREEN_WIDTH = window.innerWidth;
|
|
var SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
|
|
var FLOOR = -250;
|
|
|
|
var camera, controls, scene, renderer;
|
|
var container, stats;
|
|
|
|
var NEAR = 5, FAR = 3000;
|
|
|
|
var sceneHUD, cameraOrtho, hudMaterial;
|
|
|
|
var morph, morphs = [];
|
|
|
|
var light;
|
|
|
|
var clock = new THREE.Clock();
|
|
|
|
init();
|
|
animate();
|
|
|
|
|
|
function init() {
|
|
|
|
container = document.createElement( 'div' );
|
|
document.body.appendChild( container );
|
|
|
|
// SCENE CAMERA
|
|
|
|
camera = new THREE.PerspectiveCamera( 23, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
|
|
camera.position.set( 700, 50, 1900 );
|
|
|
|
controls = new THREE.FirstPersonControls( camera );
|
|
|
|
controls.lookSpeed = 0.0125;
|
|
controls.movementSpeed = 500;
|
|
controls.noFly = false;
|
|
controls.lookVertical = true;
|
|
controls.constrainVertical = true;
|
|
controls.verticalMin = 1.5;
|
|
controls.verticalMax = 2.0;
|
|
|
|
controls.lon = -110;
|
|
|
|
// SCENE
|
|
|
|
scene = new THREE.Scene();
|
|
scene.fog = new THREE.Fog( 0xffaa55, 1000, FAR );
|
|
THREE.ColorUtils.adjustHSV( scene.fog.color, 0.02, -0.15, -0.65 );
|
|
|
|
// LIGHTS
|
|
|
|
var ambient = new THREE.AmbientLight( 0x444444 );
|
|
scene.add( ambient );
|
|
|
|
light = new THREE.SpotLight( 0xffffff );
|
|
light.position.set( 0, 1500, 1000 );
|
|
light.target.position.set( 0, 0, 0 );
|
|
light.castShadow = true;
|
|
scene.add( light );
|
|
|
|
createHUD();
|
|
createScene();
|
|
|
|
// RENDERER
|
|
|
|
renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
|
|
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
renderer.domElement.style.position = "relative";
|
|
renderer.domElement.style.top = MARGIN + 'px';
|
|
container.appendChild( renderer.domElement );
|
|
|
|
renderer.setClearColor( scene.fog.color, 1 );
|
|
renderer.autoClear = false;
|
|
|
|
renderer.shadowCameraNear = 3;
|
|
renderer.shadowCameraFar = camera.far;
|
|
renderer.shadowCameraFov = 50;
|
|
|
|
renderer.shadowMapBias = 0.0039;
|
|
renderer.shadowMapDarkness = 0.5;
|
|
renderer.shadowMapWidth = SHADOW_MAP_WIDTH;
|
|
renderer.shadowMapHeight = SHADOW_MAP_HEIGHT;
|
|
|
|
renderer.shadowMapEnabled = true;
|
|
renderer.shadowMapSoft = true;
|
|
|
|
// STATS
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
stats.domElement.style.zIndex = 100;
|
|
//container.appendChild( stats.domElement );
|
|
|
|
}
|
|
|
|
function createHUD() {
|
|
|
|
cameraOrtho = new THREE.OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10, 1000 );
|
|
cameraOrtho.position.z = 10;
|
|
|
|
var shader = THREE.ShaderExtras[ "screen" ];
|
|
var uniforms = new THREE.UniformsUtils.clone( shader.uniforms );
|
|
|
|
hudMaterial = new THREE.ShaderMaterial( { vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, uniforms: uniforms } );
|
|
|
|
var hudGeo = new THREE.PlaneGeometry( SHADOW_MAP_WIDTH / 2, SHADOW_MAP_HEIGHT / 2 );
|
|
var hudMesh = new THREE.Mesh( hudGeo, hudMaterial );
|
|
hudMesh.position.x = ( SCREEN_WIDTH - SHADOW_MAP_WIDTH / 2 ) * -0.5;
|
|
hudMesh.position.y = ( SCREEN_HEIGHT - SHADOW_MAP_HEIGHT / 2 ) * -0.5;
|
|
|
|
sceneHUD = new THREE.Scene();
|
|
sceneHUD.add( hudMesh );
|
|
|
|
cameraOrtho.lookAt( sceneHUD.position );
|
|
|
|
}
|
|
|
|
function createScene( ) {
|
|
|
|
// GROUND
|
|
|
|
var geometry = new THREE.PlaneGeometry( 100, 100 );
|
|
var planeMaterial = new THREE.MeshLambertMaterial( { color: 0xffdd99 } );
|
|
THREE.ColorUtils.adjustHSV( planeMaterial.color, 0, 0, 0.9 );
|
|
|
|
var ground = new THREE.Mesh( geometry, planeMaterial );
|
|
|
|
ground.position.set( 0, FLOOR, 0 );
|
|
ground.rotation.x = -Math.PI/2;
|
|
ground.scale.set( 100, 100, 100 );
|
|
|
|
ground.castShadow = false;
|
|
ground.receiveShadow = true;
|
|
|
|
scene.add( ground );
|
|
|
|
// TEXT
|
|
|
|
var textGeo = new THREE.TextGeometry( "THREE.JS", {
|
|
|
|
size: 200,
|
|
height: 50,
|
|
curveSegments: 12,
|
|
|
|
font: "helvetiker",
|
|
weight: "bold",
|
|
style: "normal",
|
|
|
|
bevelThickness: 2,
|
|
bevelSize: 5,
|
|
bevelEnabled: true
|
|
|
|
});
|
|
|
|
textGeo.computeBoundingBox();
|
|
var centerOffset = -0.5 * ( textGeo.boundingBox.x[ 1 ] - textGeo.boundingBox.x[ 0 ] );
|
|
|
|
var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff, ambient: 0xaa0000 } );
|
|
|
|
var mesh = new THREE.Mesh( textGeo, textMaterial );
|
|
mesh.position.x = centerOffset;
|
|
mesh.position.y = FLOOR + 67;
|
|
|
|
mesh.castShadow = true;
|
|
mesh.receiveShadow = true;
|
|
|
|
scene.add( mesh );
|
|
|
|
// CUBES
|
|
|
|
var mesh = new THREE.Mesh( new THREE.CubeGeometry( 1500, 220, 150 ), planeMaterial );
|
|
|
|
mesh.position.y = FLOOR - 50;
|
|
mesh.position.z = 20;
|
|
|
|
mesh.castShadow = true;
|
|
mesh.receiveShadow = true;
|
|
|
|
scene.add( mesh );
|
|
|
|
var mesh = new THREE.Mesh( new THREE.CubeGeometry( 1600, 170, 250 ), planeMaterial );
|
|
|
|
mesh.position.y = FLOOR - 50;
|
|
mesh.position.z = 20;
|
|
|
|
mesh.castShadow = true;
|
|
mesh.receiveShadow = true;
|
|
|
|
scene.add( mesh );
|
|
|
|
// MORPHS
|
|
|
|
function addMorph( geometry, speed, duration, x, y, z, fudgeColor ) {
|
|
|
|
var material = new THREE.MeshLambertMaterial( { color: 0xffaa55, morphTargets: true, vertexColors: THREE.FaceColors } );
|
|
|
|
if ( fudgeColor ) THREE.ColorUtils.adjustHSV( material.color, 0, 0.5 - Math.random(), 0.5 - Math.random() );
|
|
|
|
var meshAnim = new THREE.MorphAnimMesh( geometry, material );
|
|
|
|
meshAnim.speed = speed;
|
|
meshAnim.duration = duration;
|
|
meshAnim.time = 600 * Math.random();
|
|
|
|
meshAnim.position.set( x, y, z );
|
|
meshAnim.rotation.y = Math.PI/2;
|
|
|
|
meshAnim.castShadow = true;
|
|
meshAnim.receiveShadow = false;
|
|
|
|
scene.add( meshAnim );
|
|
|
|
morphs.push( meshAnim );
|
|
|
|
}
|
|
|
|
function morphColorsToFaceColors( geometry ) {
|
|
|
|
if ( geometry.morphColors && geometry.morphColors.length ) {
|
|
|
|
var colorMap = geometry.morphColors[ 0 ];
|
|
|
|
for ( var i = 0; i < colorMap.colors.length; i ++ ) {
|
|
|
|
geometry.faces[ i ].color = colorMap.colors[ i ];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var loader = new THREE.JSONLoader();
|
|
|
|
loader.load( "models/animated/horse.js", function( geometry ) {
|
|
|
|
morphColorsToFaceColors( geometry );
|
|
|
|
addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, 300, true );
|
|
addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, 450, true );
|
|
addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, 600, true );
|
|
|
|
addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, -300, true );
|
|
addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, -450, true );
|
|
addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, -600, true );
|
|
|
|
} );
|
|
|
|
/*
|
|
loader.load( "obj/morphs/fox.js", function( geometry ) {
|
|
|
|
morphColorsToFaceColors( geometry );
|
|
addMorph( geometry, 200, 1000, 100 - Math.random() * 500, FLOOR - 5, 600 );
|
|
|
|
} );
|
|
|
|
loader.load( "obj/morphs/shdw3walk.js", function( geometry ) {
|
|
|
|
morphColorsToFaceColors( geometry );
|
|
addMorph( geometry, 40, 2000, -500, FLOOR + 60, 245 );
|
|
|
|
} );
|
|
|
|
loader.load( "obj/morphs/flamingo.js", function( geometry ) {
|
|
|
|
morphColorsToFaceColors( geometry );
|
|
addMorph( geometry, 500, 1000, 500 - Math.random() * 500, FLOOR + 350, 40 );
|
|
|
|
} );
|
|
|
|
loader.load( "obj/morphs/stork.js", function( geometry ) {
|
|
|
|
morphColorsToFaceColors( geometry );
|
|
addMorph( geometry, 350, 1000, 500 - Math.random() * 500, FLOOR + 350, 340 );
|
|
|
|
} );
|
|
|
|
loader.load( "obj/morphs/mountainlion.js", function( geometry ) {
|
|
|
|
morphColorsToFaceColors( geometry );
|
|
addMorph( geometry, 400, 1000, 500 - Math.random() * 500, FLOOR - 5, 700 );
|
|
|
|
} );
|
|
|
|
loader.load( "obj/morphs/bearBrown.js", function( geometry ) {
|
|
|
|
morphColorsToFaceColors( geometry );
|
|
addMorph( geometry, 300, 2500, -500, FLOOR - 5, -750 );
|
|
|
|
} );
|
|
|
|
loader.load( "obj/morphs/parrot.js", function( geometry ) {
|
|
|
|
morphColorsToFaceColors( geometry );
|
|
addMorph( geometry, 450, 500, 500 - Math.random() * 500, FLOOR + 300, 700 );
|
|
|
|
} );
|
|
*/
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
var delta = clock.getDelta();
|
|
|
|
for ( var i = 0; i < morphs.length; i ++ ) {
|
|
|
|
morph = morphs[ i ];
|
|
|
|
morph.updateAnimation( 1000 * delta );
|
|
|
|
morph.position.x += morph.speed * delta;
|
|
|
|
if ( morph.position.x > 2000 ) {
|
|
|
|
morph.position.x = -1000 - Math.random() * 500;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
controls.update( delta );
|
|
|
|
renderer.clear();
|
|
renderer.render( scene, camera );
|
|
|
|
// Render debug HUD with shadow map
|
|
|
|
//hudMaterial.uniforms.tDiffuse.texture = renderer.shadowMap[ 0 ];
|
|
//renderer.render( sceneHUD, cameraOrtho );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|