|
|
@@ -0,0 +1,233 @@
|
|
|
+<!DOCTYPE HTML>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <title>three.js - webgl normal map</title>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <style type="text/css">
|
|
|
+ body {
|
|
|
+ background:#000;
|
|
|
+ color:#fff;
|
|
|
+ padding:0;
|
|
|
+ margin:0;
|
|
|
+ font-weight: bold;
|
|
|
+ overflow:hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ a { color: #ffffff; }
|
|
|
+
|
|
|
+ #info {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px; width: 100%;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 5px;
|
|
|
+ font-family:Monospace;
|
|
|
+ font-size:13px;
|
|
|
+ text-align:center;
|
|
|
+ z-index:1000;
|
|
|
+ }
|
|
|
+
|
|
|
+ #oldie {
|
|
|
+ font-family:monospace;
|
|
|
+ font-size:13px;
|
|
|
+
|
|
|
+ text-align:center;
|
|
|
+ background:rgb(200,100,0);
|
|
|
+ color:#fff;
|
|
|
+ padding:1em;
|
|
|
+
|
|
|
+ width:475px;
|
|
|
+ margin:5em auto 0;
|
|
|
+
|
|
|
+ border:solid 2px #fff;
|
|
|
+ border-radius:10px;
|
|
|
+
|
|
|
+ display:none;
|
|
|
+ }
|
|
|
+
|
|
|
+ #vt { display:none }
|
|
|
+ #vt, #vt a { color:orange; }
|
|
|
+ .code { }
|
|
|
+
|
|
|
+ #log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+
|
|
|
+ <body>
|
|
|
+ <pre id="log"></pre>
|
|
|
+
|
|
|
+ <div id="info">
|
|
|
+ <a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl normalmap demo.
|
|
|
+ <a href="http://www.ir-ltd.net/infinite-3d-head-scan-released/" target="_blank">Lee Perry-Smith</a> head.
|
|
|
+
|
|
|
+ <div id="vt">displacement mapping needs vertex textures (GPU with Shader Model 3.0)<br/>
|
|
|
+ on Windows use <span class="code">Chrome --use-gl=desktop</span> or Firefox 4<br/>
|
|
|
+ please star this <a href="http://code.google.com/p/chromium/issues/detail?id=52497">Chrome issue</a> to get ANGLE support
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <center>
|
|
|
+ <div id="oldie">
|
|
|
+ Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>
|
|
|
+ and <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>.<br/>
|
|
|
+ <br/>
|
|
|
+ Please try in
|
|
|
+ <a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
|
|
|
+ <a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
|
|
|
+ <a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
|
|
|
+ </div>
|
|
|
+ </center>
|
|
|
+
|
|
|
+ <script type="text/javascript" src="../build/ThreeExtras.js"></script>
|
|
|
+ <script type="text/javascript" src="js/Stats.js"></script>
|
|
|
+
|
|
|
+ <script type="text/javascript">
|
|
|
+
|
|
|
+ if ( !is_browser_compatible() ) {
|
|
|
+
|
|
|
+ document.getElementById( "oldie" ).style.display = "block";
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ var statsEnabled = true;
|
|
|
+
|
|
|
+ var container, stats, loader;
|
|
|
+
|
|
|
+ var camera, scene, webglRenderer;
|
|
|
+
|
|
|
+ var mesh, zmesh, lightMesh, geometry;
|
|
|
+ var mesh1;
|
|
|
+
|
|
|
+ var directionalLight, pointLight, ambientLight;
|
|
|
+
|
|
|
+ var mouseX = 0;
|
|
|
+ var mouseY = 0;
|
|
|
+
|
|
|
+ var windowHalfX = window.innerWidth / 2;
|
|
|
+ var windowHalfY = window.innerHeight / 2;
|
|
|
+
|
|
|
+ var r = 0.0;
|
|
|
+
|
|
|
+ document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
+
|
|
|
+ init();
|
|
|
+ setInterval( loop, 1000 / 60 );
|
|
|
+
|
|
|
+ function init() {
|
|
|
+
|
|
|
+ container = document.createElement('div');
|
|
|
+ document.body.appendChild(container);
|
|
|
+
|
|
|
+ camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
|
+ camera.position.z = 800;
|
|
|
+
|
|
|
+ scene = new THREE.Scene();
|
|
|
+
|
|
|
+ // LIGHTS
|
|
|
+
|
|
|
+ ambientLight = new THREE.AmbientLight( 0x222233 );
|
|
|
+ scene.addLight( ambientLight );
|
|
|
+
|
|
|
+ pointLight = new THREE.PointLight( 0xffffAA, 0.5 );
|
|
|
+ pointLight.position.z = 10000;
|
|
|
+ scene.addLight( pointLight );
|
|
|
+
|
|
|
+ directionalLight = new THREE.DirectionalLight( 0xffff88 );
|
|
|
+ directionalLight.position.x = 1;
|
|
|
+ directionalLight.position.y = 1;
|
|
|
+ directionalLight.position.z = 0.5;
|
|
|
+ directionalLight.position.normalize();
|
|
|
+ scene.addLight( directionalLight );
|
|
|
+
|
|
|
+ // light representation
|
|
|
+
|
|
|
+ var sphere = new Sphere( 100, 16, 8, 1 );
|
|
|
+ lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color:0xffaa00 } ) );
|
|
|
+ lightMesh.position = pointLight.position;
|
|
|
+ lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
|
|
|
+ scene.addObject(lightMesh);
|
|
|
+
|
|
|
+ var material = new THREE.MeshLambertMaterial( { map: ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" ) } );
|
|
|
+
|
|
|
+ loader = new THREE.Loader( true );
|
|
|
+ document.body.appendChild( loader.statusDomElement );
|
|
|
+
|
|
|
+ loader.loadAscii( "obj/leeperrysmith/LeePerrySmith.js", function( geometry ) { createScene( geometry, 100, material ) }, "obj/leeperrysmith" );
|
|
|
+
|
|
|
+ webglRenderer = new THREE.WebGLRenderer( scene );
|
|
|
+ webglRenderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+ container.appendChild( webglRenderer.domElement );
|
|
|
+
|
|
|
+ if ( statsEnabled ) {
|
|
|
+
|
|
|
+ stats = new Stats();
|
|
|
+ stats.domElement.style.position = 'absolute';
|
|
|
+ stats.domElement.style.top = '0px';
|
|
|
+ stats.domElement.style.zIndex = 100;
|
|
|
+ container.appendChild( stats.domElement );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function createScene( geometry, scale, material ) {
|
|
|
+
|
|
|
+ geometry.computeTangents();
|
|
|
+
|
|
|
+ mesh1 = SceneUtils.addMesh( scene, geometry, scale, 0, - 50, 0, 0, 0, 0, material );
|
|
|
+
|
|
|
+ loader.statusDomElement.style.display = "none";
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function onDocumentMouseMove(event) {
|
|
|
+
|
|
|
+ mouseX = ( event.clientX - windowHalfX ) * 10;
|
|
|
+ mouseY = ( event.clientY - windowHalfY ) * 10;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function loop() {
|
|
|
+
|
|
|
+ var ry = mouseX * 0.0003, rx = mouseY * 0.0003;
|
|
|
+
|
|
|
+ if( mesh1 ) {
|
|
|
+
|
|
|
+ mesh1.rotation.y = ry;
|
|
|
+ mesh1.rotation.x = rx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ lightMesh.position.x = 2500 * Math.cos( r );
|
|
|
+ lightMesh.position.z = 2500 * Math.sin( r );
|
|
|
+
|
|
|
+ r += 0.01;
|
|
|
+
|
|
|
+ webglRenderer.render( scene, camera );
|
|
|
+
|
|
|
+ if ( statsEnabled ) stats.update();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function log( text ) {
|
|
|
+
|
|
|
+ var e = document.getElementById("log");
|
|
|
+ e.innerHTML = text + "<br/>" + e.innerHTML;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function is_browser_compatible() {
|
|
|
+
|
|
|
+ // WebGL support
|
|
|
+
|
|
|
+ try { var test = new Float32Array(1); } catch(e) { return false; }
|
|
|
+
|
|
|
+ // Web workers
|
|
|
+
|
|
|
+ return !!window.Worker;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+ </body>
|
|
|
+</html>
|
Mr.doob