<!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://threejs.org" 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.min.js"></script> <script src="js/controls/FirstPersonControls.js"></script> <script src="js/shaders/UnpackDepthRGBAShader.js"></script> <script src="js/Detector.js"></script> <script src="js/libs/stats.min.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 SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var FLOOR = -250; var camera, controls, scene, renderer; var container, stats; var NEAR = 5, FAR = 3000; 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 = 250; controls.lat = 30; // SCENE scene = new THREE.Scene(); scene.fog = new THREE.Fog( 0x59472b, 1000, FAR ); // LIGHTS var ambient = new THREE.AmbientLight( 0x444444 ); scene.add( ambient ); light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI/2, 1 ); light.position.set( 0, 1500, 1000 ); light.target.position.set( 0, 0, 0 ); light.castShadow = true; light.shadowCameraNear = 700; light.shadowCameraFar = camera.far; light.shadowCameraFov = 50; //light.shadowCameraVisible = true; light.shadowBias = 0.0001; light.shadowDarkness = 0.5; light.shadowMapWidth = SHADOW_MAP_WIDTH; light.shadowMapHeight = SHADOW_MAP_HEIGHT; scene.add( light ); createScene(); // RENDERER renderer = new THREE.WebGLRenderer( { antialias: false } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); container.appendChild( renderer.domElement ); renderer.setClearColor( scene.fog.color ); renderer.autoClear = false; // renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; // STATS stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; stats.domElement.style.zIndex = 100; container.appendChild( stats.domElement ); // window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { SCREEN_WIDTH = window.innerWidth; SCREEN_HEIGHT = window.innerHeight; camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT; camera.updateProjectionMatrix(); renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); controls.handleResize(); } function createScene( ) { // GROUND var geometry = new THREE.PlaneBufferGeometry( 100, 100 ); var planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffdd99 } ); 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.max.x - textGeo.boundingBox.min.x ); var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } ); 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.BoxGeometry( 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.BoxGeometry( 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 ) { material.color.offsetHSL( 0, Math.random() * 0.5 - 0.25, Math.random() * 0.5 - 0.25 ); } 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 = true; 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 ); var i = -600; while (i < 601){ addMorph( geometry, 550, 1000, 100 - Math.random() * 3000, FLOOR, i, true ); i += 2; } } ); /* 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 ); } </script> </body> </html>