<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - io - UTF8 loader</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 { color: #fff; position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; display:block; } #info a, .button { 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> - <a href="http://code.google.com/p/webgl-loader/" target="_blank">UTF8 format</a> loader test - models from <a href="http://www.sci.utah.edu/~wald/animrep/" target="_blank">The Utah 3D Animation Repository</a> </div> <script src="../build/three.min.js"></script> <script src="js/loaders/UTF8Loader.js"></script> <script src="js/loaders/MTLLoader.js"></script> <script src="js/loaders/DDSLoader.js"></script> <script src="js/Detector.js"></script> <script src="js/libs/stats.min.js"></script> <script> var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var FLOOR = -150; var container, stats; var camera, scene, renderer; var mesh, zmesh, geometry; var mouseX = 0, mouseY = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; document.addEventListener('mousemove', onDocumentMouseMove, false); init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 20, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 2000 ); camera.position.z = 800; scene = new THREE.Scene(); scene.fog = new THREE.Fog( 0x000000, 800, 2000 ); var path = "textures/cube/SwedishRoyalCastle/"; var format = '.jpg'; var urls = [ path + 'px' + format, path + 'nx' + format, path + 'py' + format, path + 'ny' + format, path + 'pz' + format, path + 'nz' + format ]; reflectionCube = THREE.ImageUtils.loadTextureCube( urls ); // LIGHTS var ambient = new THREE.AmbientLight( 0x222222 ); scene.add( ambient ); var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.1 ); directionalLight.position.set( 0, 20, 300 ); scene.add( directionalLight ); directionalLight.castShadow = true; // directionalLight.shadowCameraVisible = true; directionalLight.shadowMapWidth = 2048; directionalLight.shadowMaHeight = 2048; var d = 150; directionalLight.shadowCameraLeft = -d * 1.2; directionalLight.shadowCameraRight = d * 1.2; directionalLight.shadowCameraTop = d; directionalLight.shadowCameraBottom = -d; directionalLight.shadowCameraNear = 200; directionalLight.shadowCameraFar = 500; // RENDERER renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setClearColor( scene.fog.color ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); renderer.domElement.style.position = "relative"; container.appendChild( renderer.domElement ); // renderer.gammaInput = true; renderer.gammaOutput = true; renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFShadowMap; // STATS stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; stats.domElement.style.zIndex = 100; container.appendChild( stats.domElement ); var start = Date.now(); THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() ); var loader = new THREE.UTF8Loader(); loader.load( "models/utf8/hand.js", function ( object ) { var end = Date.now(); console.log( "hand", end - start, "ms" ); var s = 350; object.scale.set( s, s, s ); object.position.x = 125; object.position.y = -125; scene.add( object ); object.traverse( function( node ) { node.castShadow = true; node.receiveShadow = true; if ( node.material && node.material.name === "skin" ) { node.material.wrapAround = true; node.material.wrapRGB.set( 0.6, 0.2, 0.1 ); } } ); }, { normalizeRGB: true } ); loader.load( "models/utf8/ben_dds.js", function ( object ) { var end = Date.now(); console.log( "ben", end - start, "ms" ); var s = 350; object.scale.set( s, s, s ); object.position.x = -125; object.position.y = -125; scene.add( object ); object.traverse( function( node ) { node.castShadow = true; node.receiveShadow = true; if ( node.material && ( node.material.name === "head" || node.material.name === "skinbody" ) ) { node.material.wrapAround = true; node.material.wrapRGB.set( 0.6, 0.2, 0.1 ); } } ); }, { normalizeRGB: true } ); // window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function onDocumentMouseMove( event ) { mouseX = ( event.clientX - windowHalfX ); mouseY = ( event.clientY - windowHalfY ); } // function animate() { requestAnimationFrame( animate ); render(); stats.update(); } function render() { camera.position.x += ( mouseX - camera.position.x ) * .05; camera.position.y += ( - mouseY - camera.position.y ) * .05; camera.lookAt( scene.position ); renderer.render( scene, camera ); } </script> </body> </html>