Skip to content

Commit e0beb97

Browse files
mrdoobmrdoob
committed
Material variation examples clean up.
1 parent cb45c92 commit e0beb97

5 files changed

+88
-135
lines changed

‎examples/webgl_materials_variations_basic.html

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040

4141
var container, stats;
4242

43-
var camera, scene, renderer, controls, objects = [];
43+
var camera, scene, renderer, controls;
4444
var particleLight;
4545

4646
var loader = new THREE.FontLoader();
@@ -87,38 +87,38 @@
8787

8888
var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
8989

90-
for( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
90+
for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
9191

92-
var baseColor = new THREE.Color().setHSL( alpha, 0.5, 0.5 );
92+
for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
9393

94-
if( alpha >= 0.5 ) {
95-
reflectionCube = null;
96-
}
97-
98-
for( var beta = 0; beta <= 1.0; beta += stepSize ) {
99-
100-
var reflectivity = beta;
101-
102-
for( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
94+
for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
10395

104-
var diffuseColor = baseColor.clone().multiplyScalar( gamma );
96+
var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 );
10597

106-
var material = new THREE.MeshBasicMaterial( { map: imgTexture, color: diffuseColor, reflectivity: reflectivity, shading: THREE.SmoothShading, envMap: reflectionCube } )
98+
var material = new THREE.MeshBasicMaterial( {
99+
map: imgTexture,
100+
color: diffuseColor,
101+
reflectivity: beta,
102+
shading: THREE.SmoothShading,
103+
envMap: alpha < 0.5 ? reflectionCube : null
104+
} );
107105

108106
var mesh = new THREE.Mesh( geometry, material );
109107

110108
mesh.position.x = alpha * 400 - 200;
111109
mesh.position.y = beta * 400 - 200;
112110
mesh.position.z = gamma * 400 - 200;
113111

114-
objects.push( mesh );
115-
116112
scene.add( mesh );
113+
117114
}
115+
118116
}
117+
119118
}
120119

121120
function addLabel( name, location ) {
121+
122122
var textGeo = new THREE.TextGeometry( name, {
123123

124124
font: font,
@@ -133,6 +133,7 @@
133133
var textMesh = new THREE.Mesh( textGeo, textMaterial );
134134
textMesh.position.copy( location );
135135
scene.add( textMesh );
136+
136137
}
137138

138139
addLabel( "+hue", new THREE.Vector3( -350, 0, 0 ) );
@@ -213,14 +214,6 @@
213214

214215
camera.lookAt( scene.position );
215216

216-
for ( var i = 0, l = objects.length; i < l; i ++ ) {
217-
218-
var object = objects[ i ];
219-
220-
object.rotation.y += 0.005;
221-
222-
}
223-
224217
particleLight.position.x = Math.sin( timer * 7 ) * 300;
225218
particleLight.position.y = Math.cos( timer * 5 ) * 400;
226219
particleLight.position.z = Math.cos( timer * 3 ) * 300;

‎examples/webgl_materials_variations_lambert.html

Lines changed: 16 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040

4141
var container, stats;
4242

43-
var camera, scene, renderer, controls, objects = [];
43+
var camera, scene, renderer, controls;
4444
var particleLight;
4545

4646
var loader = new THREE.FontLoader();
@@ -87,44 +87,37 @@
8787

8888
var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
8989

90-
for( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
90+
for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
9191

92-
var baseColor = new THREE.Color().setHSL( alpha, 0.5, 0.5 );
92+
for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
9393

94-
if( alpha >= 0.5 ) {
95-
reflectionCube = null;
96-
}
97-
98-
for( var beta = 0, betaIndex = 0; beta <= 1.0; beta += stepSize, betaIndex ++ ) {
99-
100-
var reflectivity = beta;
101-
102-
var side = THREE.FrontSide;
103-
if( ( betaIndex % 2 ) === 0 ) {
104-
side = THREE.DoubleSide;
105-
}
94+
for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
10695

107-
for( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
96+
var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 );
10897

109-
var diffuseColor = baseColor.clone().multiplyScalar( gamma );
110-
111-
var material = new THREE.MeshLambertMaterial( { map: imgTexture, color: diffuseColor,
112-
reflectivity: reflectivity, envMap: reflectionCube, side: side } )
98+
var material = new THREE.MeshLambertMaterial( {
99+
map: imgTexture,
100+
color: diffuseColor,
101+
reflectivity: beta,
102+
envMap: alpha < 0.5 ? reflectionCube : null
103+
} );
113104

114105
var mesh = new THREE.Mesh( geometry, material );
115106

116107
mesh.position.x = alpha * 400 - 200;
117108
mesh.position.y = beta * 400 - 200;
118109
mesh.position.z = gamma * 400 - 200;
119110

120-
objects.push( mesh );
121-
122111
scene.add( mesh );
112+
123113
}
114+
124115
}
116+
125117
}
126118

127119
function addLabel( name, location ) {
120+
128121
var textGeo = new THREE.TextGeometry( name, {
129122

130123
font: font,
@@ -139,6 +132,7 @@
139132
var textMesh = new THREE.Mesh( textGeo, textMaterial );
140133
textMesh.position.copy( location );
141134
scene.add( textMesh );
135+
142136
}
143137

144138
addLabel( "+hue", new THREE.Vector3( -350, 0, 0 ) );
@@ -219,14 +213,6 @@
219213

220214
camera.lookAt( scene.position );
221215

222-
for ( var i = 0, l = objects.length; i < l; i ++ ) {
223-
224-
var object = objects[ i ];
225-
226-
object.rotation.y += 0.005;
227-
228-
}
229-
230216
particleLight.position.x = Math.sin( timer * 7 ) * 300;
231217
particleLight.position.y = Math.cos( timer * 5 ) * 400;
232218
particleLight.position.z = Math.cos( timer * 3 ) * 300;

‎examples/webgl_materials_variations_phong.html

Lines changed: 22 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
<div id="container"></div>
2929
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - Phong Material Variantions by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
3030

31-
3231
<script src="../build/three.js"></script>
3332
<script src="js/controls/OrbitControls.js"></script>
3433

@@ -41,7 +40,7 @@
4140

4241
var container, stats;
4342

44-
var camera, scene, renderer, controls, objects = [];
43+
var camera, scene, renderer, controls;
4544
var particleLight;
4645

4746
var loader = new THREE.FontLoader();
@@ -88,47 +87,47 @@
8887

8988
var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
9089

91-
92-
var localReflectionCube;
93-
94-
for( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
95-
96-
if( alphaIndex % 2 === 0 ) {
97-
localReflectionCube = null;
98-
}
99-
else {
100-
localReflectionCube = reflectionCube;
101-
}
90+
for ( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
10291

10392
var specularShininess = Math.pow( 2, alpha * 10 );
10493

105-
for( var beta = 0; beta <= 1.0; beta += stepSize ) {
94+
for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
10695

10796
var specularColor = new THREE.Color( beta * 0.2, beta * 0.2, beta * 0.2 );
108-
var reflectivity = beta;
10997

110-
for( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
98+
for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
11199

112100
// basic monochromatic energy preservation
113-
var diffuseColor = new THREE.Color( 0, 0, gamma ).multiplyScalar( 1 - beta * 0.2 );
114-
115-
var material = new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: diffuseColor, specular: specularColor, reflectivity: reflectivity, shininess: specularShininess, shading: THREE.SmoothShading, envMap: localReflectionCube } )
101+
var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 ).multiplyScalar( 1 - beta * 0.2 );
102+
103+
var material = new THREE.MeshPhongMaterial( {
104+
map: imgTexture,
105+
bumpMap: imgTexture,
106+
bumpScale: bumpScale,
107+
color: diffuseColor,
108+
specular: specularColor,
109+
reflectivity: beta,
110+
shininess: specularShininess,
111+
shading: THREE.SmoothShading,
112+
envMap: alphaIndex % 2 === 0 ? null : reflectionCube
113+
} );
116114

117115
var mesh = new THREE.Mesh( geometry, material );
118116

119117
mesh.position.x = alpha * 400 - 200;
120118
mesh.position.y = beta * 400 - 200;
121119
mesh.position.z = gamma * 400 - 200;
122120

123-
objects.push( mesh );
124-
125121
scene.add( mesh );
122+
126123
}
124+
127125
}
128-
}
129126

127+
}
130128

131129
function addLabel( name, location ) {
130+
132131
var textGeo = new THREE.TextGeometry( name, {
133132

134133
font: font,
@@ -143,6 +142,7 @@
143142
var textMesh = new THREE.Mesh( textGeo, textMaterial );
144143
textMesh.position.copy( location );
145144
scene.add( textMesh );
145+
146146
}
147147

148148
addLabel( "-shininess", new THREE.Vector3( -350, 0, 0 ) );
@@ -221,14 +221,6 @@
221221

222222
camera.lookAt( scene.position );
223223

224-
for ( var i = 0, l = objects.length; i < l; i ++ ) {
225-
226-
var object = objects[ i ];
227-
228-
object.rotation.y += 0.005;
229-
230-
}
231-
232224
particleLight.position.x = Math.sin( timer * 7 ) * 300;
233225
particleLight.position.y = Math.cos( timer * 5 ) * 400;
234226
particleLight.position.z = Math.cos( timer * 3 ) * 300;

‎examples/webgl_materials_variations_physical.html

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040

4141
var container, stats;
4242

43-
var camera, scene, renderer, controls, objects = [];
43+
var camera, scene, renderer, controls;
4444
var particleLight;
4545

4646
var loader = new THREE.FontLoader();
@@ -78,25 +78,21 @@
7878

7979
var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
8080

81-
for ( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
82-
83-
var clearCoat = 1.0 - alpha;
81+
for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
8482

8583
for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
8684

87-
var clearCoatRoughness = 1 - beta;
88-
8985
for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
9086

91-
var reflectivity = 1 - gamma;
87+
var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, 0.5 );
9288

9389
var material = new THREE.MeshPhysicalMaterial( {
94-
color: 0x880000,
90+
color: diffuseColor,
9591
metalness: 0,
9692
roughness: 0.5,
97-
clearCoat: clearCoat,
98-
clearCoatRoughness: clearCoatRoughness,
99-
reflectivity: reflectivity,
93+
clearCoat: 1.0 - alpha,
94+
clearCoatRoughness: 1.0 - beta,
95+
reflectivity: 1.0 - gamma,
10096
envMap: reflectionCube
10197
} );
10298

@@ -106,14 +102,16 @@
106102
mesh.position.y = beta * 400 - 200;
107103
mesh.position.z = gamma * 400 - 200;
108104

109-
objects.push( mesh );
110-
111105
scene.add( mesh );
106+
112107
}
108+
113109
}
110+
114111
}
115112

116113
function addLabel( name, location ) {
114+
117115
var textGeo = new THREE.TextGeometry( name, {
118116

119117
font: font,
@@ -128,6 +126,7 @@
128126
var textMesh = new THREE.Mesh( textGeo, textMaterial );
129127
textMesh.position.copy( location );
130128
scene.add( textMesh );
129+
131130
}
132131

133132
addLabel( "+clearCoat", new THREE.Vector3( -350, 0, 0 ) );
@@ -205,14 +204,6 @@
205204

206205
camera.lookAt( scene.position );
207206

208-
for ( var i = 0, l = objects.length; i < l; i ++ ) {
209-
210-
var object = objects[ i ];
211-
212-
object.rotation.y += 0.005;
213-
214-
}
215-
216207
particleLight.position.x = Math.sin( timer * 7 ) * 300;
217208
particleLight.position.y = Math.cos( timer * 5 ) * 400;
218209
particleLight.position.z = Math.cos( timer * 3 ) * 300;

0 commit comments

Comments
 (0)