|
|
@@ -24,7 +24,6 @@
|
|
|
font-family:Monospace;
|
|
|
font-size:13px;
|
|
|
text-align:center;
|
|
|
- z-index:1000;
|
|
|
}
|
|
|
|
|
|
#vt { display:none }
|
|
|
@@ -41,7 +40,7 @@
|
|
|
<body>
|
|
|
|
|
|
<div id="info">
|
|
|
- <a href="http://threejs.org" target="_blank">three.js</a> - (<span id="description">normal + ao + displacement + environment</span>) map demo.
|
|
|
+ <a href="http://threejs.org" target="_blank">three.js</a> - (<span id="description">normal + ao + displacement + environment</span>) map demo.<br />
|
|
|
ninja head from <a href="http://developer.amd.com/tools-and-sdks/archive/legacy-cpu-gpu-tools/amd-gpu-meshmapper/" target="_blank">AMD GPU MeshMapper</a>
|
|
|
|
|
|
<div id="vt">displacement mapping requires vertex textures</div>
|
|
|
@@ -64,7 +63,13 @@
|
|
|
var stats, loader;
|
|
|
|
|
|
var camera, scene, renderer, controls;
|
|
|
- var settings = { aoMapIntensity: 1.0, metalness: 1.0, roughness: 0.0, displacementScale: 1.0, normalScale: 1.0 };
|
|
|
+ var settings = {
|
|
|
+ metalness: 1.0,
|
|
|
+ roughness: 0.4,
|
|
|
+ aoMapIntensity: 1.0,
|
|
|
+ displacementScale: 1.0,
|
|
|
+ normalScale: 1.0
|
|
|
+ };
|
|
|
|
|
|
var mesh, material;
|
|
|
|
|
|
@@ -86,23 +91,39 @@
|
|
|
|
|
|
// Init gui
|
|
|
function initGui() {
|
|
|
+
|
|
|
var gui = new dat.GUI();
|
|
|
//var gui = gui.addFolder( "Material" );
|
|
|
gui.add( settings, "metalness" ).min( 0 ).max( 1 ).onChange( function( value ) {
|
|
|
+
|
|
|
material.metalness = value;
|
|
|
- } );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
gui.add( settings, "roughness" ).min( 0 ).max( 1 ).onChange( function( value ) {
|
|
|
+
|
|
|
material.roughness = value;
|
|
|
- } );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
gui.add( settings, "aoMapIntensity" ).min( 0 ).max( 1 ).onChange( function( value ) {
|
|
|
+
|
|
|
material.aoMapIntensity = value;
|
|
|
+
|
|
|
} );
|
|
|
+
|
|
|
gui.add( settings, "displacementScale" ).min( 0 ).max( 3.0 ).onChange( function( value ) {
|
|
|
+
|
|
|
material.displacementScale = value;
|
|
|
- } );
|
|
|
- gui.add( settings, "normalScale" ).min( -1 ).max( 1 ).onChange( function( value ) {
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ gui.add( settings, "normalScale" ).min( - 1 ).max( 1 ).onChange( function( value ) {
|
|
|
+
|
|
|
material.normalScale = new THREE.Vector2( 1, - 1 ).multiplyScalar( value );
|
|
|
- } );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
}
|
|
|
|
|
|
function init() {
|
|
|
@@ -175,7 +196,8 @@
|
|
|
material = new THREE.MeshStandardMaterial( {
|
|
|
|
|
|
color: 0x888888,
|
|
|
- roughness: 0.4,
|
|
|
+ roughness: settings.roughness,
|
|
|
+ metalness: settings.metalness,
|
|
|
|
|
|
normalMap: normalMap,
|
|
|
normalScale: new THREE.Vector2( 1, - 1 ), // why does the normal map require negation in this case?
|
Mr.doob