webglFramework/Thirdparty/three.js-master/examples/webgl_materials_bumpmap.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3         <head>
   4                 <title>three.js webgl - materials - bump map [Lee Perry-Smith]</title>
   5                 <meta charset="utf-8">
   6                 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
   7                 <style>
   8                         body {
   9                                 background:#000;
  10                                 color:#fff;
  11                                 padding:0;
  12                                 margin:0;
  13                                 font-weight: bold;
  14                                 overflow:hidden;
  15                         }
  16
  17                         a {     color: #ffffff; }
  18
  19                         #info {
  20                                 position: absolute;
  21                                 top: 0px; width: 100%;
  22                                 color: #ffffff;
  23                                 padding: 5px;
  24                                 font-family:Monospace;
  25                                 font-size:13px;
  26                                 text-align:center;
  27                                 z-index:1000;
  28                         }
  29
  30                         #oldie {
  31                                 background:rgb(200,100,0) !important;
  32                                 color:#fff;
  33                         }
  34
  35                         #vt { display:none }
  36                         #vt, #vt a { color:orange; }
  37                 </style>
  38         </head>
  39
  40         <body>
  41                 <div id="info">
  42                         <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl bump mapping without tangents using <a href="http://mmikkelsen3d.blogspot.sk/2011/07/derivative-maps.html">Morten Mikkelsen's</a> method -
  43                         <a href="http://graphics.cs.williams.edu/data/meshes.xml#14" target="_blank" rel="noopener">Lee Perry-Smith</a> head
  44                 </div>
  45
  46                 <script src="../build/three.js"></script>
  47
  48                 <script src="js/Detector.js"></script>
  49                 <script src="js/libs/stats.min.js"></script>
  50
  51                 <script>
  52
  53                         if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  54
  55                         var statsEnabled = true;
  56
  57                         var container, stats, loader;
  58
  59                         var camera, scene, renderer;
  60
  61                         var mesh;
  62
  63                         var spotLight;
  64
  65                         var mouseX = 0;
  66                         var mouseY = 0;
  67
  68                         var targetX = 0;
  69                         var targetY = 0;
  70
  71                         var windowHalfX = window.innerWidth / 2;
  72                         var windowHalfY = window.innerHeight / 2;
  73
  74                         init();
  75                         animate();
  76
  77                         function init() {
  78
  79                                 container = document.createElement( 'div' );
  80                                 document.body.appendChild( container );
  81
  82                                 //
  83
  84                                 camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
  85                                 camera.position.z = 1200;
  86
  87                                 scene = new THREE.Scene();
  88                                 scene.background = new THREE.Color( 0x060708 );
  89
  90                                 // LIGHTS
  91
  92                                 scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
  93
  94                                 spotLight = new THREE.SpotLight( 0xffffbb, 2 );
  95                                 spotLight.position.set( 0.5, 0, 1 );
  96                                 spotLight.position.multiplyScalar( 700 );
  97                                 scene.add( spotLight );
  98
  99                                 spotLight.castShadow = true;
 100
 101                                 spotLight.shadow.mapSize.width = 2048;
 102                                 spotLight.shadow.mapSize.height = 2048;
 103
 104                                 spotLight.shadow.camera.near = 200;
 105                                 spotLight.shadow.camera.far = 1500;
 106
 107                                 spotLight.shadow.camera.fov = 40;
 108
 109                                 spotLight.shadow.bias = -0.005;
 110
 111                                 //
 112
 113                                 var mapHeight = new THREE.TextureLoader().load( "obj/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
 114
 115                                 var material = new THREE.MeshPhongMaterial( {
 116                                         color: 0x552811,
 117                                         specular: 0x222222,
 118                                         shininess: 25,
 119                                         bumpMap: mapHeight,
 120                                         bumpScale: 12
 121                                 } );
 122
 123                                 loader = new THREE.JSONLoader();
 124                                 loader.load( "obj/leeperrysmith/LeePerrySmith.js", function( geometry ) { createScene( geometry, 100, material ) } );
 125
 126                                 renderer = new THREE.WebGLRenderer( { antialias: false } );
 127                                 renderer.setPixelRatio( window.devicePixelRatio );
 128                                 renderer.setSize( window.innerWidth, window.innerHeight );
 129                                 container.appendChild( renderer.domElement );
 130
 131                                 renderer.shadowMap.enabled = true;
 132                                 renderer.shadowMap.renderReverseSided = false;
 133
 134                                 //
 135
 136                                 renderer.gammaInput = true;
 137                                 renderer.gammaOutput = true;
 138
 139                                 //
 140
 141                                 if ( statsEnabled ) {
 142
 143                                         stats = new Stats();
 144                                         container.appendChild( stats.dom );
 145
 146                                 }
 147
 148                                 // EVENTS
 149
 150                                 document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 151                                 window.addEventListener( 'resize', onWindowResize, false );
 152
 153                         }
 154
 155                         function createScene( geometry, scale, material ) {
 156
 157                                 mesh = new THREE.Mesh( geometry, material );
 158
 159                                 mesh.position.y = - 50;
 160                                 mesh.scale.set( scale, scale, scale );
 161
 162                                 mesh.castShadow = true;
 163                                 mesh.receiveShadow = true;
 164
 165                                 scene.add( mesh );
 166
 167                         }
 168
 169                         //
 170
 171                         function onWindowResize( event ) {
 172
 173                                 renderer.setSize( window.innerWidth, window.innerHeight );
 174
 175                                 camera.aspect = window.innerWidth / window.innerHeight;
 176                                 camera.updateProjectionMatrix();
 177
 178                         }
 179
 180                         function onDocumentMouseMove( event ) {
 181
 182                                 mouseX = ( event.clientX - windowHalfX );
 183                                 mouseY = ( event.clientY - windowHalfY );
 184
 185                         }
 186
 187                         //
 188
 189                         function animate() {
 190
 191                                 requestAnimationFrame( animate );
 192
 193                                 render();
 194                                 if ( statsEnabled ) stats.update();
 195
 196                         }
 197
 198                         function render() {
 199
 200                                 targetX = mouseX * .001;
 201                                 targetY = mouseY * .001;
 202
 203                                 if ( mesh ) {
 204
 205                                         mesh.rotation.y += 0.05 * ( targetX - mesh.rotation.y );
 206                                         mesh.rotation.x += 0.05 * ( targetY - mesh.rotation.x );
 207
 208                                 }
 209
 210                                 renderer.render( scene, camera );
 211
 212                         }
 213
 214                 </script>
 215
 216         </body>
 217 </html>