Skip to content

Commit 472749e

Browse files
mrdoobmrdoob
authored
Merge pull request #14205 from WestLangley/dev-simplifier
Improve SimplifyModifier example and clean up
2 parents e026f4f + ae61b61 commit 472749e

File tree

1 file changed

+44
-90
lines changed

1 file changed

+44
-90
lines changed

‎examples/webgl_modifier_simplifier.html‎

Lines changed: 44 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -7,140 +7,94 @@
77
<style>
88
body {
99
font-family: Monospace;
10-
background-color: #f0f0f0;
10+
color: #fff;
1111
margin: 0px;
1212
overflow: hidden;
1313
}
14+
a {
15+
color: #ffffff;
16+
}
1417
</style>
1518
</head>
1619
<body>
1720

1821
<script src="../build/three.js"></script>
1922
<script src="js/controls/OrbitControls.js"></script>
2023
<script src="js/modifiers/SimplifyModifier.js"></script>
21-
<script src="js/libs/stats.min.js"></script>
2224

2325
<script>
2426

25-
var container, stats;
26-
27-
var camera, controls, scene, renderer;
28-
29-
var boxGeometry = new THREE.BoxBufferGeometry( 80, 80, 80, 4, 4, 4 );
30-
var torusGeometry = new THREE.TorusBufferGeometry( 50, 25, 8, 8, Math.PI * 2 );
31-
var sphereGeometry = new THREE.SphereBufferGeometry( 50, 15, 15 );
32-
var planeGeometry = new THREE.PlaneBufferGeometry( 100, 100, 6, 6 );
33-
34-
var modifer = new THREE.SimplifyModifier();
35-
var meshes = [];
36-
var count = 0;
37-
38-
var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
27+
var renderer, scene, camera;
3928

4029
init();
41-
animate();
42-
43-
44-
function addStuff( geometry ) {
45-
46-
count ++;
47-
48-
var mesh, wireframe;
49-
50-
var material = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } );
51-
52-
var vertexCount = geometry.attributes.position.count;
53-
54-
var simplified = modifer.modify( geometry, Math.floor( vertexCount * 0.5 ) );
55-
56-
mesh = new THREE.Mesh( simplified, material );
57-
wireframe = new THREE.Mesh( simplified, wireframeMaterial );
58-
mesh.add( wireframe );
59-
mesh.position.x = - 200;
60-
mesh.position.y = count * 150 - 300;
61-
62-
scene.add( mesh );
63-
meshes.push( mesh );
64-
65-
mesh = new THREE.Mesh( geometry, material );
66-
wireframe = new THREE.Mesh( geometry, wireframeMaterial );
67-
mesh.add( wireframe );
68-
mesh.position.x = 200;
69-
mesh.position.y = count * 150 - 300;
70-
71-
scene.add( mesh );
72-
meshes.push ( mesh );
73-
74-
}
7530

7631
function init() {
7732

78-
container = document.createElement( 'div' );
79-
document.body.appendChild( container );
80-
8133
var info = document.createElement( 'div' );
8234
info.style.position = 'absolute';
8335
info.style.top = '10px';
8436
info.style.width = '100%';
8537
info.style.textAlign = 'center';
86-
info.innerHTML = '50% Vertex Reduction using SimplifyModifier';
87-
container.appendChild( info );
38+
info.innerHTML = '<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Vertex Reduction using SimplifyModifier';
39+
document.body.appendChild( info );
8840

89-
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
90-
camera.position.z = 500;
41+
renderer = new THREE.WebGLRenderer( { antialias: true } );
42+
renderer.setPixelRatio( window.devicePixelRatio );
43+
renderer.setSize( window.innerWidth, window.innerHeight );
44+
document.body.appendChild( renderer.domElement );
9145

9246
scene = new THREE.Scene();
93-
scene.background = new THREE.Color( 0xf0f0f0 );
9447

95-
var light = new THREE.PointLight( 0xffffff, 1.5 );
96-
light.position.set( 1000, 1000, 2000 );
97-
scene.add( light );
48+
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
49+
camera.position.z = 15;
9850

99-
addStuff( planeGeometry );
100-
addStuff( boxGeometry );
101-
addStuff( sphereGeometry );
102-
addStuff( torusGeometry );
51+
var controls = new THREE.OrbitControls( camera, renderer.domElement );
52+
controls.addEventListener( 'change', render ); // use if there is no animation loop
53+
controls.enablePan = false;
54+
controls.enableZoom = false;
10355

104-
renderer = new THREE.WebGLRenderer( { antialias: true } );
105-
renderer.setPixelRatio( window.devicePixelRatio );
106-
renderer.setSize( window.innerWidth, window.innerHeight );
107-
container.appendChild( renderer.domElement );
56+
scene.add( new THREE.AmbientLight( 0xffffff, 0.2 ) );
10857

109-
stats = new Stats();
110-
container.appendChild( stats.dom );
58+
var light = new THREE.PointLight( 0xffffff, 0.7 );
59+
camera.add( light );
60+
scene.add( camera );
11161

112-
//
62+
new THREE.JSONLoader().load( "models/json/leeperrysmith/LeePerrySmith.json", function ( geometry ) {
11363

114-
controls = new THREE.OrbitControls( camera, renderer.domElement );
64+
var material = new THREE.MeshPhongMaterial( { color: 0xAEAED5, shininess: 1 } );
11565

116-
window.addEventListener( 'resize', onWindowResize, false );
66+
var mesh = new THREE.Mesh( geometry, material );
67+
mesh.position.x = - 3;
68+
mesh.rotation.y = Math.PI / 2;
69+
scene.add( mesh );
11770

118-
}
71+
var modifer = new THREE.SimplifyModifier();
11972

120-
function onWindowResize() {
73+
var simplified = modifer.modify( geometry, Math.floor( geometry.vertices.length * 0.9375 ) ); // number of vertices to remove
12174

122-
camera.aspect = window.innerWidth / window.innerHeight;
123-
camera.updateProjectionMatrix();
75+
var material = new THREE.MeshPhongMaterial( { color: 0xAEAED5, shininess: 1, flatShading: true } );
12476

125-
renderer.setSize( window.innerWidth, window.innerHeight );
77+
var mesh = new THREE.Mesh( simplified, material );
78+
mesh.position.x = 3;
79+
mesh.rotation.y = - Math.PI / 2;
80+
scene.add( mesh );
12681

127-
}
82+
render();
12883

129-
//
84+
} );
13085

131-
function animate() {
86+
window.addEventListener( 'resize', onWindowResize, false );
13287

133-
meshes.forEach( function( m ) {
134-
m.rotation.x += 0.01;
135-
m.rotation.y += 0.01;
136-
m.rotation.z += 0.01;
137-
} );
88+
}
89+
90+
function onWindowResize() {
91+
92+
renderer.setSize( window.innerWidth, window.innerHeight );
13893

139-
requestAnimationFrame( animate );
94+
camera.aspect = window.innerWidth / window.innerHeight;
95+
camera.updateProjectionMatrix();
14096

141-
stats.begin();
14297
render();
143-
stats.end();
14498

14599
}
146100

0 commit comments

Comments
 (0)