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

   1 <!DOCTYPE html>
   2 <html lang="en">
   3         <head>
   4                 <title>three.js webgl - materials</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                                 margin: 0px;
  16                                 overflow: hidden;
  17                         }
  18
  19                         #info {
  20                                 position: absolute;
  21                                 top: 0px; width: 100%;
  22                                 padding: 5px;
  23                         }
  24                 </style>
  25         </head>
  26         <body>
  27
  28                 <div id="container"></div>
  29                 <div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Physical Material Variations by <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.<br/><br/>
  30                 Note: Every second sphere has an IBL environment map on it.</div>
  31
  32                 <script src="../build/three.js"></script>
  33                 <script src="js/controls/OrbitControls.js"></script>
  34                 <script src="js/loaders/RGBELoader.js"></script>
  35                 <script src="js/loaders/HDRCubeTextureLoader.js"></script>
  36
  37                 <script src="js/pmrem/PMREMGenerator.js"></script>
  38                 <script src="js/pmrem/PMREMCubeUVPacker.js"></script>
  39
  40                 <script src="js/Detector.js"></script>
  41                 <script src="js/libs/stats.min.js"></script>
  42                 <script src="js/libs/dat.gui.min.js"></script>
  43
  44                 <script>
  45
  46                         if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  47
  48                         var container, stats;
  49
  50                         var camera, scene, renderer, controls;
  51                         var particleLight;
  52
  53                         var loader = new THREE.FontLoader();
  54                         loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
  55
  56                                 init( font );
  57                                 animate();
  58
  59                         } );
  60
  61                         function init( font ) {
  62
  63                                 container = document.createElement( 'div' );
  64                                 document.body.appendChild( container );
  65
  66                                 camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
  67                                 camera.position.set( 0.0, 400, 400 * 3.5 );
  68
  69                                 //
  70
  71                                 var genCubeUrls = function( prefix, postfix ) {
  72                                         return [
  73                                                 prefix + 'px' + postfix, prefix + 'nx' + postfix,
  74                                                 prefix + 'py' + postfix, prefix + 'ny' + postfix,
  75                                                 prefix + 'pz' + postfix, prefix + 'nz' + postfix
  76                                         ];
  77                                 };
  78
  79
  80                                 var textureCube = new THREE.CubeTextureLoader()
  81                                         .setPath( 'textures/cube/pisa/' )
  82                                         .load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );
  83
  84                                 scene = new THREE.Scene();
  85                                 scene.background = textureCube;
  86
  87                                 var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
  88                                 var hdrCubeRenderTarget = null;
  89
  90                                 new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
  91
  92                                         var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
  93                                         pmremGenerator.update( renderer );
  94
  95                                         var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
  96                                         pmremCubeUVPacker.update( renderer );
  97
  98                                         hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
  99
 100                                         // Materials
 101
 102                                         var cubeWidth = 400;
 103                                         var numberOfSphersPerSide = 5;
 104                                         var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
 105                                         var stepSize = 1.0 / numberOfSphersPerSide;
 106
 107                                         var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 108
 109                                         var index = 0;
 110
 111                                         for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 112
 113                                                 for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
 114
 115                                                         for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 116
 117                                                                 var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, 0.25 );
 118
 119                                                                 var material = new THREE.MeshPhysicalMaterial( {
 120                                                                         color: diffuseColor,
 121                                                                         metalness: 0,
 122                                                                         roughness: 0.5,
 123                                                                         clearCoat:  1.0 - alpha,
 124                                                                         clearCoatRoughness: 1.0 - beta,
 125                                                                         reflectivity: 1.0 - gamma,
 126                                                                         envMap: ( index % 2 ) == 1 ? hdrCubeRenderTarget.texture : null
 127                                                                 } );
 128
 129                                                                 index ++;
 130
 131                                                                 var mesh = new THREE.Mesh( geometry, material );
 132
 133                                                                 mesh.position.x = alpha * 400 - 200;
 134                                                                 mesh.position.y = beta * 400 - 200;
 135                                                                 mesh.position.z = gamma * 400 - 200;
 136
 137                                                                 scene.add( mesh );
 138
 139                                                         }
 140                                                         index ++;
 141
 142                                                 }
 143                                                 index ++;
 144
 145                                         }
 146                                 });
 147
 148                                 function addLabel( name, location ) {
 149
 150                                         var textGeo = new THREE.TextBufferGeometry( name, {
 151
 152                                                 font: font,
 153
 154                                                 size: 20,
 155                                                 height: 1,
 156                                                 curveSegments: 1
 157
 158                                         });
 159
 160                                         var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 161                                         var textMesh = new THREE.Mesh( textGeo, textMaterial );
 162                                         textMesh.position.copy( location );
 163                                         scene.add( textMesh );
 164
 165                                 }
 166
 167                                 addLabel( "+clearCoat", new THREE.Vector3( -350, 0, 0 ) );
 168                                 addLabel( "-clearCoat", new THREE.Vector3( 350, 0, 0 ) );
 169
 170                                 addLabel( "+clearCoatRoughness", new THREE.Vector3( 0, -300, 0 ) );
 171                                 addLabel( "-clearCoatRoughness", new THREE.Vector3( 0, 300, 0 ) );
 172
 173                                 addLabel( "+reflectivity", new THREE.Vector3( 0, 0, -300 ) );
 174                                 addLabel( "-reflectivity", new THREE.Vector3( 0, 0, 300 ) );
 175
 176                                 particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
 177                                 scene.add( particleLight );
 178
 179                                 // Lights
 180
 181                                 scene.add( new THREE.AmbientLight( 0x222222 ) );
 182
 183                                 var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 184                                 directionalLight.position.set( 1, 1, 1 ).normalize();
 185                                 scene.add( directionalLight );
 186
 187                                 var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 188                                 particleLight.add( pointLight );
 189
 190                                 //
 191
 192                                 renderer = new THREE.WebGLRenderer( { antialias: true } );
 193                                 renderer.setPixelRatio( window.devicePixelRatio );
 194                                 renderer.setSize( window.innerWidth, window.innerHeight );
 195                                 container.appendChild( renderer.domElement );
 196
 197                                 renderer.gammaInput = true;
 198                                 renderer.gammaOutput = true;
 199                                 renderer.toneMapping = THREE.Uncharted2ToneMapping;
 200                                 renderer.toneMappingExposure = 0.75;
 201
 202                                 //
 203
 204                                 stats = new Stats();
 205                                 container.appendChild( stats.dom );
 206
 207                                 controls = new THREE.OrbitControls( camera );
 208
 209                                 window.addEventListener( 'resize', onWindowResize, false );
 210
 211                         }
 212
 213                         function onWindowResize() {
 214
 215                                 camera.aspect = window.innerWidth / window.innerHeight;
 216                                 camera.updateProjectionMatrix();
 217
 218                                 renderer.setSize( window.innerWidth, window.innerHeight );
 219
 220                         }
 221
 222                         //
 223
 224                         function animate() {
 225
 226                                 requestAnimationFrame( animate );
 227
 228                                 render();
 229                                 stats.update();
 230
 231                         }
 232
 233                         function render() {
 234
 235                                 var timer = Date.now() * 0.00025;
 236
 237                                 //camera.position.x = Math.cos( timer ) * 800;
 238                                 //camera.position.z = Math.sin( timer ) * 800;
 239
 240                                 camera.lookAt( scene.position );
 241
 242                                 particleLight.position.x = Math.sin( timer * 7 ) * 300;
 243                                 particleLight.position.y = Math.cos( timer * 5 ) * 400;
 244                                 particleLight.position.z = Math.cos( timer * 3 ) * 300;
 245
 246                                 renderer.render( scene, camera );
 247
 248                         }
 249
 250                 </script>
 251
 252         </body>
 253 </html>