Skip to content

Commit a392c8d

Browse files
stevinzstevinz
authored
Examples: Updated external subdivision demo (mrdoob#24930)
* Updated demo to v1.1.2 * Separated wireframe * Updated screenshot * Dispose typo * Simplified lighting
1 parent f2fce01 commit a392c8d

File tree

2 files changed

+97
-29
lines changed

2 files changed

+97
-29
lines changed

‎examples/screenshots/webgl_modifier_subdivision.jpg

677 Bytes
Loading

‎examples/webgl_modifier_subdivision.html

Lines changed: 97 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"imports": {
2323
"three": "../build/three.module.js",
2424
"three/addons/": "./jsm/",
25-
"three-subdivide": "https://unpkg.com/three-subdivide@1.0.2/build/index.module.js"
25+
"three-subdivide": "https://unpkg.com/three-subdivide@1.1.2/build/index.module.js"
2626
}
2727
}
2828
</script>
@@ -36,16 +36,20 @@
3636

3737
let renderer, scene, camera;
3838
let texture;
39-
let meshMaterial, meshNormal, meshSmooth;
40-
let wireMaterial, wireNormal, wireSmooth;
39+
let meshNormal, meshSmooth;
40+
let wireNormal, wireSmooth;
41+
let wireMaterial;
4142

4243
const params = {
4344
geometry: 'Box',
4445
iterations: 3,
4546
split: true,
4647
uvSmooth: false,
48+
preserveEdges: false,
4749
flatOnly: false,
4850
maxTriangles: 25000,
51+
flatShading: false,
52+
textured: true,
4953
wireframe: false
5054
};
5155

@@ -70,6 +74,14 @@
7074
controls.target.set( 0, 0, 0 );
7175
controls.update();
7276

77+
scene.add( new THREE.HemisphereLight( 0xffffff, 0x737373, 1 ) );
78+
79+
const frontLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
80+
const backLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
81+
frontLight.position.set( 0, 1, 1 );
82+
backLight.position.set( 0, 1, - 1 );
83+
scene.add( frontLight, backLight );
84+
7385
texture = new THREE.TextureLoader().load( './textures/uv_grid_opengl.jpg', () => {
7486

7587
texture.wrapS = THREE.RepeatWrapping;
@@ -79,15 +91,8 @@
7991

8092
} );
8193

82-
meshMaterial = new THREE.MeshBasicMaterial( {
83-
map: texture,
84-
polygonOffset: true,
85-
polygonOffsetFactor: 1, // positive value pushes polygon further away
86-
polygonOffsetUnits: 1,
87-
side: THREE.DoubleSide
88-
} );
89-
meshNormal = new THREE.Mesh( new THREE.BufferGeometry(), meshMaterial );
90-
meshSmooth = new THREE.Mesh( new THREE.BufferGeometry(), meshMaterial );
94+
meshNormal = new THREE.Mesh( new THREE.BufferGeometry(), new THREE.MeshBasicMaterial() );
95+
meshSmooth = new THREE.Mesh( new THREE.BufferGeometry(), new THREE.MeshBasicMaterial() );
9196
meshNormal.position.set( - 0.7, 0, 0 );
9297
meshSmooth.position.set( 0.7, 0, 0 );
9398
scene.add( meshNormal, meshSmooth );
@@ -114,7 +119,7 @@
114119

115120
const geom = params.geometry.toLowerCase();
116121

117-
params.split = geom === 'box' || geom === 'ring';
122+
params.split = geom === 'box' || geom === 'ring' || geom === 'plane';
118123
params.uvSmooth = geom === 'circle' || geom === 'plane' || geom === 'ring';
119124

120125
refreshDisplay();
@@ -123,18 +128,22 @@
123128

124129
folder1.add( params, 'iterations' ).min( 0 ).max( 5 ).step( 1 ).onFinishChange( updateMeshes );
125130
const splitController = folder1.add( params, 'split' ).onFinishChange( updateMeshes );
126-
const smoothController = folder1.add( params, 'uvSmooth' ).onFinishChange( updateMeshes );
127-
folder1.add( params, 'flatOnly' ).onFinishChange ( updateMeshes );
131+
const uvSmoothController = folder1.add( params, 'uvSmooth' ).onFinishChange( updateMeshes );
132+
const preserveController = folder1.add( params, 'preserveEdges' ).onFinishChange( updateMeshes );
133+
folder1.add( params, 'flatOnly' ).onFinishChange( updateMeshes );
128134
folder1.add( params, 'maxTriangles' ).onFinishChange( updateMeshes );
129135

130-
const folder2 = gui.addFolder( 'View' );
131-
folder2.add( params, 'wireframe' ).onFinishChange( updateMeshes );
136+
const folder2 = gui.addFolder( 'Material' );
137+
folder2.add( params, 'flatShading' ).onFinishChange( updateMaterial );
138+
folder2.add( params, 'textured' ).onFinishChange( updateMaterial );
139+
folder2.add( params, 'wireframe' ).onFinishChange( updateWireframe );
132140

133141
function refreshDisplay() {
134142

135143
geomController.updateDisplay();
136144
splitController.updateDisplay();
137-
smoothController.updateDisplay();
145+
uvSmoothController.updateDisplay();
146+
preserveController.updateDisplay();
138147

139148
updateMeshes();
140149

@@ -159,7 +168,7 @@
159168
return new THREE.ConeGeometry( 0.6, 1.5, 5, 3 );
160169

161170
case 'cylinder':
162-
return new THREE.CylinderGeometry( 0.5, 0.5, 1, 5, 5 );
171+
return new THREE.CylinderGeometry( 0.5, 0.5, 1, 5, 4 );
163172

164173
case 'dodecahedron':
165174
return new THREE.DodecahedronGeometry( 0.6 );
@@ -175,8 +184,8 @@
175184

176185
for ( let i = 0; i < 65; i += 5 ) {
177186

178-
let x = ( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50 ) * 1.2;
179-
let y = ( i - 5 ) * 3;
187+
const x = ( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50 ) * 1.2;
188+
const y = ( i - 5 ) * 3;
180189
points.push( new THREE.Vector2( x * 0.0075, y * 0.005 ) );
181190

182191
}
@@ -214,14 +223,8 @@
214223
function updateMeshes() {
215224

216225
const normalGeometry = getGeometry();
217-
const smoothGeometry = LoopSubdivision.modify(
218-
normalGeometry,
219-
params.iterations,
220-
params.split,
221-
params.uvSmooth,
222-
params.flatOnly,
223-
params.maxTriangles
224-
);
226+
227+
const smoothGeometry = LoopSubdivision.modify( normalGeometry, params.iterations, params );
225228

226229
meshNormal.geometry.dispose();
227230
meshSmooth.geometry.dispose();
@@ -233,6 +236,71 @@
233236
wireNormal.geometry = normalGeometry.clone();
234237
wireSmooth.geometry = smoothGeometry.clone();
235238

239+
updateMaterial();
240+
241+
}
242+
243+
function disposeMaterial( material ) {
244+
245+
const materials = Array.isArray( material ) ? material : [ material ];
246+
247+
for ( let i = 0; i < materials.length; i ++ ) {
248+
249+
if ( materials[ i ].dispose ) materials[ i ].dispose();
250+
251+
}
252+
253+
}
254+
255+
function updateMaterial() {
256+
257+
disposeMaterial( meshNormal.material );
258+
disposeMaterial( meshSmooth.material );
259+
260+
const materialParams = {
261+
color: ( params.textured ) ? 0xffffff : 0x808080,
262+
flatShading: params.flatShading,
263+
map: ( params.textured ) ? texture : null,
264+
polygonOffset: true,
265+
polygonOffsetFactor: 1, // positive value pushes polygon further away
266+
polygonOffsetUnits: 1
267+
};
268+
269+
switch ( params.geometry.toLowerCase() ) {
270+
271+
case 'circle':
272+
case 'lathe':
273+
case 'plane':
274+
case 'ring':
275+
276+
materialParams.side = THREE.DoubleSide;
277+
break;
278+
279+
case 'box':
280+
case 'capsule':
281+
case 'cone':
282+
case 'cylinder':
283+
case 'dodecahedron':
284+
case 'icosahedron':
285+
case 'octahedron':
286+
case 'sphere':
287+
case 'tetrahedron':
288+
case 'torus':
289+
case 'torusknot':
290+
291+
materialParams.side = THREE.FrontSide;
292+
break;
293+
294+
}
295+
296+
meshNormal.material = meshSmooth.material = new THREE.MeshStandardMaterial( materialParams );
297+
298+
render();
299+
300+
}
301+
302+
function updateWireframe() {
303+
236304
wireNormal.visible = wireSmooth.visible = params.wireframe;
237305

238306
render();

0 commit comments

Comments
 (0)