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

   1 <!DOCTYPE html>
   2 <html lang="en">
   3         <head>
   4                 <title>threejs webgl - materials - hdr environment mapping</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                                 color: #fff;
  10                                 font-family:Monospace;
  11                                 font-size:13px;
  12                                 text-align:center;
  13
  14                                 background-color: #000;
  15
  16                                 margin: 0px;
  17                                 overflow: hidden;
  18                         }
  19                         a { color: #88f }
  20
  21                         #info {
  22                                 position: absolute;
  23                                 top: 0px; width: 100%;
  24                                 padding: 5px;
  25                         }
  26                 </style>
  27         </head>
  28         <body>
  29
  30                 <div id="container"></div>
  31                 <div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">threejs</a> - Standard Material Reflectivity (reflectance at F0) example by <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.</div>
  32
  33                 <script src="../build/three.js"></script>
  34                 <script src="js/controls/OrbitControls.js"></script>
  35                 <script src="js/loaders/RGBELoader.js"></script>
  36                 <script src="js/loaders/HDRCubeTextureLoader.js"></script>
  37
  38                 <script src="js/Detector.js"></script>
  39                 <script src="js/libs/stats.min.js"></script>
  40
  41                 <script src="js/pmrem/PMREMGenerator.js"></script>
  42                 <script src="js/pmrem/PMREMCubeUVPacker.js"></script>
  43                 <script src="js/libs/dat.gui.min.js"></script>
  44
  45                 <script src="js/postprocessing/EffectComposer.js"></script>
  46                 <script src="js/postprocessing/RenderPass.js"></script>
  47                 <script src="js/postprocessing/MaskPass.js"></script>
  48                 <script src="js/postprocessing/ShaderPass.js"></script>
  49                 <script src="js/shaders/CopyShader.js"></script>
  50                 <script src="js/shaders/FXAAShader.js"></script>
  51                 <script src="js/postprocessing/BloomPass.js"></script>
  52                 <script src="js/shaders/ConvolutionShader.js"></script>
  53
  54                 <script src="js/loaders/OBJLoader.js"></script>
  55                 <script>
  56
  57                         if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  58
  59                         var container, stats;
  60                         var params = {
  61                                 projection: 'normal',
  62                                 autoRotate: true,
  63                                 reflectivity: 1.0,
  64                                 background: false,
  65                                 exposure: 1.0,
  66                                 gemColor: 'Green'
  67                         };
  68                         var camera, scene, renderer, controls, objects = [];
  69                         var hdrCubeMap;
  70                         var composer;
  71                         var gemBackMaterial, gemFrontMaterial;
  72                         var hdrCubeRenderTarget;
  73
  74                         init();
  75                         animate();
  76
  77                         function init() {
  78
  79                                 container = document.createElement( 'div' );
  80                                 document.body.appendChild( container );
  81
  82                                 camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
  83                                 camera.position.set( 0.0, -10, 20 * 3.5 );
  84
  85                                 scene = new THREE.Scene();
  86                                 scene.background = new THREE.Color( 0x000000 );
  87
  88                                 renderer = new THREE.WebGLRenderer( { antialias: true } );
  89
  90                                 gemBackMaterial = new THREE.MeshPhysicalMaterial( {
  91                                         map: null,
  92                                         color: 0x0000ff,
  93                                         metalness: 1.0,
  94                                         roughness: 0,
  95                                         opacity: 0.5,
  96                                         side: THREE.BackSide,
  97                                         transparent: true,
  98                                         envMapIntensity: 5,
  99                                         premultipliedAlpha: true
 100                                         // TODO: Add custom blend mode that modulates background color by this materials color.
 101                                 } );
 102
 103                                 gemFrontMaterial = new THREE.MeshPhysicalMaterial( {
 104                                         map: null,
 105                                         color: 0x0000ff,
 106                                         metalness: 0.0,
 107                                         roughness: 0,
 108                                         opacity: 0.15,
 109                                         side: THREE.FrontSide,
 110                                         transparent: true,
 111                                         envMapIntensity: 5,
 112                                         premultipliedAlpha: true
 113                                 } );
 114
 115                                 var manager = new THREE.LoadingManager();
 116                                 manager.onProgress = function ( item, loaded, total ) {
 117
 118                                         console.log( item, loaded, total );
 119
 120                                 };
 121
 122                                 var loader = new THREE.OBJLoader( manager );
 123                                 loader.load( 'models/obj/emerald.obj', function ( object ) {
 124
 125                                         object.traverse( function ( child ) {
 126
 127                                                 if ( child instanceof THREE.Mesh ) {
 128
 129                                                         child.material = gemBackMaterial;
 130                                                         var second = child.clone();
 131                                                         second.material = gemFrontMaterial;
 132
 133                                                         var parent = new THREE.Group();
 134                                                         parent.add( second );
 135                                                         parent.add( child );
 136                                                         scene.add( parent );
 137
 138                                                         objects.push( parent );
 139
 140                                                 }
 141
 142                                         } );
 143
 144
 145                                 } );
 146
 147                                 var genCubeUrls = function( prefix, postfix ) {
 148                                         return [
 149                                                 prefix + 'px' + postfix, prefix + 'nx' + postfix,
 150                                                 prefix + 'py' + postfix, prefix + 'ny' + postfix,
 151                                                 prefix + 'pz' + postfix, prefix + 'nz' + postfix
 152                                         ];
 153                                 };
 154
 155                                 var hdrUrls = genCubeUrls( "./textures/cube/pisaHDR/", ".hdr" );
 156                                 new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
 157
 158                                         var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
 159                                         pmremGenerator.update( renderer );
 160
 161                                         var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
 162                                         pmremCubeUVPacker.update( renderer );
 163
 164                                         hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 165
 166                                         gemFrontMaterial.envMap = gemBackMaterial.envMap = hdrCubeRenderTarget.texture;
 167                                         gemFrontMaterial.needsUpdate = gemBackMaterial.needsUpdate = true;
 168
 169                                 } );
 170
 171
 172                                 // Lights
 173
 174                                 scene.add( new THREE.AmbientLight( 0x222222 ) );
 175
 176                                 var pointLight1 = new THREE.PointLight( 0xffffff );
 177                                 pointLight1.position.set( 150, 10, 0 );
 178                                 pointLight1.castShadow = false;
 179                                 scene.add( pointLight1 );
 180
 181                                 var pointLight2 = new THREE.PointLight( 0xffffff );
 182                                 pointLight2.position.set( -150, 0, 0 );
 183                                 scene.add( pointLight2 );
 184
 185                                 var pointLight3 = new THREE.PointLight( 0xffffff );
 186                                 pointLight3.position.set( 0, -10, -150 );
 187                                 scene.add( pointLight3 );
 188
 189                                 var pointLight4 = new THREE.PointLight( 0xffffff );
 190                                 pointLight4.position.set( 0, 0, 150 );
 191                                 scene.add( pointLight4 );
 192
 193                                 renderer.setPixelRatio( window.devicePixelRatio );
 194                                 renderer.setSize( window.innerWidth, window.innerHeight );
 195                                 renderer.shadowMap.enabled = true;
 196                                 container.appendChild( renderer.domElement );
 197
 198                                 renderer.gammaInput = true;
 199                                 renderer.gammaOutput = true;
 200
 201                                 stats = new Stats();
 202                                 container.appendChild( stats.dom );
 203
 204                                 controls = new THREE.OrbitControls( camera, renderer.domElement );
 205
 206                                 window.addEventListener( 'resize', onWindowResize, false );
 207
 208                                 var gui = new dat.GUI();
 209
 210                                 gui.add( params, 'reflectivity', 0, 1 );
 211                                 gui.add( params, 'exposure', 0.1, 2 );
 212                                 gui.add( params, 'autoRotate' );
 213                                 gui.add( params, 'gemColor', [ 'Blue', 'Green', 'Red', 'White', 'Black' ] );
 214                                 gui.open();
 215
 216                         }
 217
 218                         function onWindowResize() {
 219
 220                                 var width = window.innerWidth;
 221                                 var height = window.innerHeight;
 222
 223                                 camera.aspect = width / height;
 224                                 camera.updateProjectionMatrix();
 225
 226                                 renderer.setSize( width, height );
 227
 228                         }
 229
 230                         //
 231
 232                         function animate() {
 233
 234                                 requestAnimationFrame( animate );
 235
 236                                 stats.begin();
 237                                 render();
 238                                 stats.end();
 239
 240                         }
 241
 242                         function render() {
 243
 244                                 if ( gemBackMaterial !== undefined && gemFrontMaterial !== undefined ) {
 245
 246                                         gemFrontMaterial.reflectivity = gemBackMaterial.reflectivity = params.reflectivity;
 247
 248                                         var newColor = gemBackMaterial.color;
 249                                         switch( params.gemColor ) {
 250                                                 case 'Blue': newColor = new THREE.Color( 0x000088 ); break;
 251                                                 case 'Red': newColor = new THREE.Color( 0x880000 ); break;
 252                                                 case 'Green': newColor = new THREE.Color( 0x008800 ); break;
 253                                                 case 'White': newColor =  new THREE.Color( 0x888888 ); break;
 254                                                 case 'Black': newColor =  new THREE.Color( 0x0f0f0f ); break;
 255                                         }
 256                                         gemBackMaterial.color = gemFrontMaterial.color = newColor;
 257
 258
 259                                 }
 260
 261                                 renderer.toneMappingExposure = params.exposure;
 262
 263                                 var timer = Date.now() * 0.00025;
 264
 265                                 camera.lookAt( scene.position );
 266
 267                                 if( params.autoRotate ) {
 268                                         for ( var i = 0, l = objects.length; i < l; i ++ ) {
 269
 270                                                 var object = objects[ i ];
 271                                                 object.rotation.y += 0.005;
 272
 273                                         }
 274                                 }
 275
 276                                 renderer.render( scene, camera );
 277
 278                         }
 279
 280                 </script>
 281
 282         </body>
 283 </html>