Skip to content

Commit 273011d

Browse files
mrdoobmrdoob
authored
Merge pull request #21006 from Mugen87/dev2
Examples: Refactor subdivision example.
2 parents 6b2da21 + a45b79a commit 273011d

File tree

2 files changed

+29
-81
lines changed

2 files changed

+29
-81
lines changed

‎examples/screenshots/webgl_modifier_subdivision.jpg‎

-1.2 KB
Loading

‎examples/webgl_modifier_subdivision.html‎

Lines changed: 29 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -5,39 +5,24 @@
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
77
<link type="text/css" rel="stylesheet" href="main.css">
8-
<style>
9-
body {
10-
background-color: #f0f0f0;
11-
color: #444;
12-
}
13-
a {
14-
color: #08f;
15-
}
16-
</style>
178
</head>
189
<body>
1910
<div id="info">
20-
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - subdivision modifier<br/ >
21-
Original Geometry: <span id="original-vertex-count"></span> vertices and <span id="original-face-count"></span> faces<br/ >
22-
Smooth Geometry: <span id="smooth-vertex-count"></span> vertices and <span id="smooth-face-count"></span> faces<br/ >
11+
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - subdivision modifier
2312
</div>
2413

2514
<script type="module">
2615

2716
import * as THREE from '../build/three.module.js';
2817

29-
import Stats from './jsm/libs/stats.module.js';
30-
3118
import { GUI } from './jsm/libs/dat.gui.module.js';
3219
import { OrbitControls } from './jsm/controls/OrbitControls.js';
3320
import { SubdivisionModifier } from './jsm/modifiers/SubdivisionModifier.js';
3421

35-
let camera, scene, renderer, stats, smoothMesh, wireframe;
36-
37-
const smoothMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: true } );
38-
const wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, opacity: 0.15, transparent: true } );
22+
let camera, scene, renderer, smoothMesh;
3923

40-
const faceIndices = [ 'a', 'b', 'c' ];
24+
const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
25+
const wireframeMaterial = new THREE.LineBasicMaterial();
4126

4227
const params = {
4328
subdivisions: 2
@@ -51,36 +36,38 @@
5136
camera.position.z = 100;
5237

5338
scene = new THREE.Scene();
54-
scene.background = new THREE.Color( 0xf0f0f0 );
5539

56-
const light = new THREE.PointLight( 0xffffff, 1.5 );
57-
light.position.set( 1000, 1000, 2000 );
40+
scene.add( new THREE.AmbientLight( 0xffffff, 0.2 ) );
41+
42+
const light = new THREE.PointLight( 0xffffff, 0.8 );
43+
light.position.set( 0, 50, 100 );
5844
scene.add( light );
5945

6046
const loader = new THREE.BufferGeometryLoader();
61-
loader.load( 'models/json/WaltHeadLo_buffergeometry.json', function ( bufferGeometry ) {
62-
63-
// converting to legacy THREE.Geometry because SubdivisionModifier only returns THREE.Geometry
47+
loader.load( 'models/json/WaltHeadLo_buffergeometry.json', function ( geometry ) {
6448

65-
const geometry = new THREE.Geometry().fromBufferGeometry( bufferGeometry );
66-
geometry.mergeVertices();
67-
68-
const material = new THREE.MeshBasicMaterial( { color: 0xcccccc, wireframe: true } );
69-
const mesh = new THREE.Mesh( bufferGeometry, material );
49+
const mesh = new THREE.Mesh( geometry, material );
50+
mesh.position.x = 32;
7051
scene.add( mesh );
7152

53+
const wireframe = new THREE.WireframeGeometry( geometry );
54+
const line = new THREE.LineSegments( wireframe, wireframeMaterial );
55+
mesh.add( line );
56+
7257
const gui = new GUI();
7358

7459
gui.add( params, 'subdivisions', 0, 3 ).step( 1 ).onChange( function ( subdivisions ) {
7560

7661
subdivide( geometry, subdivisions );
62+
render();
7763

7864
} );
7965

8066
//
8167

8268
subdivide( geometry, params.subdivisions );
83-
animate();
69+
70+
render();
8471

8572
} );
8673

@@ -89,23 +76,15 @@
8976
renderer.setSize( window.innerWidth, window.innerHeight );
9077
document.body.appendChild( renderer.domElement );
9178

92-
stats = new Stats();
93-
document.body.appendChild( stats.dom );
94-
9579
//
9680

9781
const controls = new OrbitControls( camera, renderer.domElement );
82+
controls.addEventListener( 'change', render );
9883
controls.minDistance = 50;
9984
controls.maxDistance = 400;
10085

10186
window.addEventListener( 'resize', onWindowResize, false );
10287

103-
//
104-
105-
smoothMesh = new THREE.Mesh( undefined, smoothMaterial );
106-
wireframe = new THREE.Mesh( undefined, wireframeMaterial );
107-
scene.add( smoothMesh, wireframe );
108-
10988
}
11089

11190
function subdivide( geometry, subdivisions ) {
@@ -114,45 +93,23 @@
11493

11594
const smoothGeometry = modifier.modify( geometry );
11695

117-
// colorify faces
118-
119-
for ( let i = 0; i < smoothGeometry.faces.length; i ++ ) {
120-
121-
const face = smoothGeometry.faces[ i ];
96+
if ( smoothMesh !== undefined ) {
12297

123-
for ( let j = 0; j < 3; j ++ ) {
98+
smoothMesh.geometry.dispose();
99+
smoothMesh.children[ 0 ].geometry.dispose();
124100

125-
const vertexIndex = face[ faceIndices[ j ] ];
126-
const vertex = smoothGeometry.vertices[ vertexIndex ];
127-
128-
const hue = ( vertex.y / 200 ) + 0.5;
129-
const color = new THREE.Color().setHSL( hue, 1, 0.5 );
130-
face.vertexColors[ j ] = color;
131-
132-
}
101+
scene.remove( smoothMesh );
133102

134103
}
135104

136-
// convert to THREE.BufferGeometry
137-
138-
if ( smoothMesh.geometry ) smoothMesh.geometry.dispose();
139-
140-
smoothMesh.geometry = new THREE.BufferGeometry().fromGeometry( smoothGeometry );
141-
wireframe.geometry = smoothMesh.geometry;
105+
smoothMesh = new THREE.Mesh( smoothGeometry, material );
106+
smoothMesh.position.x = - 32;
142107

143-
//
108+
const wireframe = new THREE.WireframeGeometry( smoothGeometry );
109+
const line = new THREE.LineSegments( wireframe, wireframeMaterial );
110+
smoothMesh.add( line );
144111

145-
updateUI( geometry, smoothGeometry );
146-
147-
}
148-
149-
function updateUI( originalGeometry, smoothGeometry ) {
150-
151-
document.getElementById( 'original-vertex-count' ).textContent = originalGeometry.vertices.length;
152-
document.getElementById( 'original-face-count' ).textContent = originalGeometry.faces.length;
153-
154-
document.getElementById( 'smooth-vertex-count' ).textContent = smoothGeometry.vertices.length;
155-
document.getElementById( 'smooth-face-count' ).textContent = smoothGeometry.faces.length;
112+
scene.add( smoothMesh );
156113

157114
}
158115

@@ -163,16 +120,7 @@
163120

164121
renderer.setSize( window.innerWidth, window.innerHeight );
165122

166-
}
167-
168-
//
169-
170-
function animate() {
171-
172-
requestAnimationFrame( animate );
173-
174123
render();
175-
stats.update();
176124

177125
}
178126

0 commit comments

Comments
 (0)