Skip to content

Commit 860c4c1

Browse files
Mugen87Mugen87
authored
Examples: Add GUI to normal and bump map demo. (#31077)
1 parent b9ba3b4 commit 860c4c1

File tree

3 files changed

+64
-92
lines changed

3 files changed

+64
-92
lines changed

‎examples/screenshots/webgl_materials_normalmap.jpg

23 KB
Loading

‎examples/webgl_materials_bumpmap.html

Lines changed: 29 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -26,26 +26,22 @@
2626

2727
import * as THREE from 'three';
2828

29-
import Stats from 'three/addons/libs/stats.module.js';
29+
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
3030

3131
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
32+
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
3233

33-
let container, stats, loader;
34+
let container, loader;
3435

35-
let camera, scene, renderer;
36+
let camera, scene, renderer, controls;
3637

3738
let mesh;
3839

3940
let spotLight;
4041

41-
let mouseX = 0;
42-
let mouseY = 0;
43-
44-
let targetX = 0;
45-
let targetY = 0;
46-
47-
const windowHalfX = window.innerWidth / 2;
48-
const windowHalfY = window.innerHeight / 2;
42+
const params = {
43+
enableBumpMap: true
44+
};
4945

5046
init();
5147

@@ -109,16 +105,31 @@
109105

110106
renderer.shadowMap.enabled = true;
111107

112-
//
113-
114-
stats = new Stats();
115-
container.appendChild( stats.dom );
116-
117108
// EVENTS
118109

119-
document.addEventListener( 'mousemove', onDocumentMouseMove );
120110
window.addEventListener( 'resize', onWindowResize );
121111

112+
// GUI
113+
114+
const gui = new GUI();
115+
116+
gui.add( params, 'enableBumpMap' ).name( 'enable bump map' ).onChange( ( value ) => {
117+
118+
mesh.material.bumpMap = ( value === true ) ? mapHeight : null;
119+
mesh.material.needsUpdate = true;
120+
121+
} );
122+
gui.add( material, 'bumpScale', 0, 40 ).name( 'bump scale' );
123+
gui.open();
124+
125+
// CONTROLS
126+
127+
controls = new OrbitControls( camera, renderer.domElement );
128+
controls.minDistance = 8;
129+
controls.maxDistance = 50;
130+
controls.enablePan = false;
131+
controls.enableDamping = true;
132+
122133
}
123134

124135
function createScene( geometry, scale, material ) {
@@ -146,34 +157,11 @@
146157

147158
}
148159

149-
function onDocumentMouseMove( event ) {
150-
151-
mouseX = ( event.clientX - windowHalfX );
152-
mouseY = ( event.clientY - windowHalfY );
153-
154-
}
155-
156160
//
157161

158162
function animate() {
159163

160-
render();
161-
162-
stats.update();
163-
164-
}
165-
166-
function render() {
167-
168-
targetX = mouseX * .001;
169-
targetY = mouseY * .001;
170-
171-
if ( mesh ) {
172-
173-
mesh.rotation.y += 0.05 * ( targetX - mesh.rotation.y );
174-
mesh.rotation.x += 0.05 * ( targetY - mesh.rotation.x );
175-
176-
}
164+
controls.update();
177165

178166
renderer.render( scene, camera );
179167

‎examples/webgl_materials_normalmap.html

Lines changed: 35 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -26,35 +26,32 @@
2626

2727
import * as THREE from 'three';
2828

29-
import Stats from 'three/addons/libs/stats.module.js';
29+
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
3030

31+
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
3132
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
3233
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
3334
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
3435
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
3536
import { BleachBypassShader } from 'three/addons/shaders/BleachBypassShader.js';
3637
import { ColorCorrectionShader } from 'three/addons/shaders/ColorCorrectionShader.js';
37-
import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
38+
import { FXAAPass } from 'three/addons/postprocessing/FXAAPass.js';
3839
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
3940

40-
let container, stats, loader;
41+
let container, loader;
4142

42-
let camera, scene, renderer;
43+
let camera, scene, renderer, controls;
4344

4445
let mesh;
4546

4647
let directionalLight, pointLight, ambientLight;
4748

48-
let mouseX = 0;
49-
let mouseY = 0;
49+
let composer;
5050

51-
let targetX = 0;
52-
let targetY = 0;
53-
54-
const windowHalfX = window.innerWidth / 2;
55-
const windowHalfY = window.innerHeight / 2;
56-
57-
let composer, effectFXAA;
51+
const params = {
52+
enableNormalMap: true,
53+
normalScale: 1
54+
};
5855

5956
init();
6057

@@ -63,7 +60,7 @@
6360
container = document.createElement( 'div' );
6461
document.body.appendChild( container );
6562

66-
camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
63+
camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 0.1, 100 );
6764
camera.position.z = 12;
6865

6966
scene = new THREE.Scene();
@@ -100,7 +97,7 @@
10097
map: diffuseMap,
10198
specularMap: specularMap,
10299
normalMap: normalMap,
103-
normalScale: new THREE.Vector2( 0.8, 0.8 )
100+
normalScale: new THREE.Vector2( params.normalScale, params.normalScale )
104101
} );
105102

106103
loader = new GLTFLoader();
@@ -122,12 +119,6 @@
122119
renderer.setAnimationLoop( animate );
123120
container.appendChild( renderer.domElement );
124121

125-
//
126-
127-
stats = new Stats();
128-
container.appendChild( stats.dom );
129-
130-
131122
// COMPOSER
132123

133124
renderer.autoClear = false;
@@ -137,9 +128,7 @@
137128
const effectBleach = new ShaderPass( BleachBypassShader );
138129
const effectColor = new ShaderPass( ColorCorrectionShader );
139130
const outputPass = new OutputPass();
140-
effectFXAA = new ShaderPass( FXAAShader );
141-
142-
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
131+
const effectFXAA = new FXAAPass();
143132

144133
effectBleach.uniforms[ 'opacity' ].value = 0.2;
145134

@@ -158,9 +147,29 @@
158147

159148
// EVENTS
160149

161-
document.addEventListener( 'mousemove', onDocumentMouseMove );
162150
window.addEventListener( 'resize', onWindowResize );
163151

152+
// GUI
153+
154+
const gui = new GUI();
155+
156+
gui.add( params, 'enableNormalMap' ).name( 'enable normal map' ).onChange( ( value ) => {
157+
158+
material.normalMap = ( value === true ) ? normalMap : null;
159+
material.needsUpdate = true;
160+
161+
} );
162+
gui.add( params, 'normalScale', 0, 2 ).name( 'normal scale' ).onChange( ( value )=> material.normalScale.setScalar( value ) );
163+
gui.open();
164+
165+
// CONTROLS
166+
167+
controls = new OrbitControls( camera, renderer.domElement );
168+
controls.minDistance = 8;
169+
controls.maxDistance = 50;
170+
controls.enablePan = false;
171+
controls.enableDamping = true;
172+
164173
}
165174

166175
//
@@ -176,38 +185,13 @@
176185
renderer.setSize( width, height );
177186
composer.setSize( width, height );
178187

179-
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
180-
181-
}
182-
183-
function onDocumentMouseMove( event ) {
184-
185-
mouseX = ( event.clientX - windowHalfX );
186-
mouseY = ( event.clientY - windowHalfY );
187-
188188
}
189189

190190
//
191191

192192
function animate() {
193193

194-
render();
195-
196-
stats.update();
197-
198-
}
199-
200-
function render() {
201-
202-
targetX = mouseX * .001;
203-
targetY = mouseY * .001;
204-
205-
if ( mesh ) {
206-
207-
mesh.rotation.y += 0.05 * ( targetX - mesh.rotation.y );
208-
mesh.rotation.x += 0.05 * ( targetY - mesh.rotation.x );
209-
210-
}
194+
controls.update();
211195

212196
composer.render();
213197

0 commit comments

Comments
 (0)