|
@@ -12,7 +12,7 @@
|
|
<div id="info">
|
|
<div id="info">
|
|
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> -
|
|
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> -
|
|
<a href="https://google.github.io/filament/Filament.md.html#toc4.7.2" target="_blank" rel="noopener">White Furnace</a> energy conservation test by <a href="https://jsantell.com/" target="_blank" rel="noopener">Jordan Santell</a>
|
|
<a href="https://google.github.io/filament/Filament.md.html#toc4.7.2" target="_blank" rel="noopener">White Furnace</a> energy conservation test by <a href="https://jsantell.com/" target="_blank" rel="noopener">Jordan Santell</a>
|
|
- <br>Rougnness increases left to right
|
|
|
|
|
|
+ <br>Roughness increases left to right
|
|
<br>Metalness increases top to bottom
|
|
<br>Metalness increases top to bottom
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -48,22 +48,24 @@
|
|
|
|
|
|
scene.traverse( function ( child ) {
|
|
scene.traverse( function ( child ) {
|
|
|
|
|
|
- if ( child.isMesh ) child.material.color.setHex( 0xccccff ); // tinted for visibility
|
|
|
|
- render();
|
|
|
|
|
|
+ if ( child.isMesh ) child.material.color.setHex( 0xffffff );
|
|
|
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
+ render();
|
|
|
|
+
|
|
} );
|
|
} );
|
|
|
|
|
|
document.body.addEventListener( 'mouseout', function () {
|
|
document.body.addEventListener( 'mouseout', function () {
|
|
|
|
|
|
scene.traverse( function ( child ) {
|
|
scene.traverse( function ( child ) {
|
|
|
|
|
|
- if ( child.isMesh ) child.material.color.setHex( 0xffffff );
|
|
|
|
- render();
|
|
|
|
|
|
+ if ( child.isMesh ) child.material.color.setHex( 0xccccff ); // tinted for visibility
|
|
|
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
+ render();
|
|
|
|
+
|
|
} );
|
|
} );
|
|
|
|
|
|
// scene
|
|
// scene
|
|
@@ -71,9 +73,8 @@
|
|
scene = new THREE.Scene();
|
|
scene = new THREE.Scene();
|
|
|
|
|
|
// camera
|
|
// camera
|
|
-
|
|
|
|
- camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 30 );
|
|
|
|
- camera.position.set( 0, 0, 10 );
|
|
|
|
|
|
+ camera = new THREE.PerspectiveCamera( 40, aspect, 1, 30 );
|
|
|
|
+ camera.position.set( 0, 0, 18 )
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
@@ -91,6 +92,7 @@
|
|
color: 0xffffff,
|
|
color: 0xffffff,
|
|
envMap: radianceMap,
|
|
envMap: radianceMap,
|
|
envMapIntensity: 1,
|
|
envMapIntensity: 1,
|
|
|
|
+ transmission: 0,
|
|
ior: 1.5
|
|
ior: 1.5
|
|
} );
|
|
} );
|
|
|
|
|
|
@@ -117,7 +119,7 @@
|
|
radianceMap = pmremGenerator.fromScene( envScene ).texture;
|
|
radianceMap = pmremGenerator.fromScene( envScene ).texture;
|
|
pmremGenerator.dispose();
|
|
pmremGenerator.dispose();
|
|
|
|
|
|
- scene.background = new THREE.Color( COLOR );
|
|
|
|
|
|
+ scene.background = radianceMap;
|
|
|
|
|
|
resolve();
|
|
resolve();
|
|
|
|
|