Skip to content

Commit 9ea1815

Browse files
mrdoobmrdoob
committed
Improved webgl_objects_update example.
1 parent de26cee commit 9ea1815

1 file changed

Lines changed: 59 additions & 85 deletions

File tree

‎examples/webgl_objects_update.html‎

Lines changed: 59 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,19 @@
1818
<script src="../build/three.js"></script>
1919

2020
<script src="js/Detector.js"></script>
21-
<script src="js/libs/stats.min.js"></script>
2221

2322
<script>
2423

2524
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
2625

27-
var container, stats;
26+
var container;
2827

2928
var camera, scene, renderer;
3029

3130
var objectNewGeometry;
3231
var objectToggleAddRemove;
3332
var objectRandomizeFaces;
33+
var objectRandomizeMaterialIndices;
3434

3535
init();
3636
animate();
@@ -41,68 +41,32 @@
4141
document.body.appendChild( container );
4242

4343
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
44-
camera.position.y = 1500;
44+
camera.position.z = 600;
4545

4646
scene = new THREE.Scene();
4747

48-
var light, object;
49-
50-
scene.add( new THREE.AmbientLight( 0x404040 ) );
51-
52-
light = new THREE.DirectionalLight( 0xffffff );
53-
light.position.set( 0, 1, 0 );
54-
scene.add( light );
55-
56-
var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
57-
map.wrapS = map.wrapT = THREE.RepeatWrapping;
58-
map.anisotropy = 16;
59-
60-
//var material = new THREE.MeshLambertMaterial( { map: map, side: THREE.DoubleSide } );
61-
6248
//
6349

64-
object = createObject( createMultiMaterial(), 4 );
65-
object.position.set( -400, 0, 200 );
50+
var object = createObject( createMultiMaterial(), 1 );
51+
object.position.set( -100, 100, 0 );
6652
scene.add( object );
6753
objectNewGeometry = object;
6854

69-
object = createObject( createMultiMaterial(), 4 );
70-
object.position.set( -200, 0, 200 );
55+
object = createObject( createMultiMaterial(), 1 );
56+
object.position.set( 100, 100, 0 );
7157
scene.add( object );
7258
objectToggleAddRemove = object;
7359

7460
object = createObject( createMultiMaterial(), 4 );
75-
object.position.set( 0, 0, 200 );
61+
object.position.set( -100, -100, 0 );
7662
scene.add( object );
7763
objectRandomizeFaces = object;
78-
/*
79-
These are not yet used but they are ready to be shown
80-
object = createObject( createMultiMaterial(), 4 );
81-
object.position.set( 200, 0, 200 );
82-
scene.add( object );
83-
84-
//
85-
86-
object = createObject( createMultiMaterial(), 4 );
87-
object.position.set( -400, 0, 0 );
88-
scene.add( object );
89-
90-
object = createObject( createMultiMaterial(), 4 );
91-
object.position.set( -200, 0, 0 );
92-
scene.add( object );
93-
94-
object = createObject( createMultiMaterial(), 4 );
95-
object.position.set( 0, 0, 0 );
96-
scene.add( object );
9764

9865
object = createObject( createMultiMaterial(), 4 );
99-
object.position.set( 200, 0, 0 );
66+
object.position.set( 100, -100, 0 );
10067
scene.add( object );
68+
objectRandomizeMaterialIndices = object;
10169

102-
object = createObject( createMultiMaterial(), 4 );
103-
object.position.set( 400, 0, 0 );
104-
scene.add( object );
105-
*/
10670
//
10771

10872
//
@@ -112,38 +76,40 @@
11276
renderer.setSize( window.innerWidth, window.innerHeight );
11377
container.appendChild( renderer.domElement );
11478

115-
stats = new Stats();
116-
container.appendChild( stats.dom );
117-
11879
//
11980

12081
window.addEventListener( 'resize', onWindowResize, false );
12182

12283
}
12384

124-
function createObject(material, segments ){
125-
var geometry = createGeometry(segments);
126-
var mesh = new THREE.Mesh( geometry , material);
127-
return mesh;
85+
function createObject( material, segments ){
86+
87+
var geometry = createGeometry( segments );
88+
return new THREE.Mesh( geometry, material );
89+
12890
}
129-
function createGeometry(segments){
91+
92+
function createGeometry( segments ) {
93+
13094
var matrix = new THREE.Matrix4();
13195
var euler = new THREE.Euler();
13296
var geometry = new THREE.BoxGeometry( 100, 100, 100, segments, segments, segments );
133-
geometry.applyMatrix(matrix.makeRotationFromEuler(euler.set(parseInt(Math.random()*2,10)*Math.PI,parseInt(Math.random()*2,10)*Math.PI,parseInt(Math.random()*2,10)*Math.PI)));
97+
geometry.applyMatrix(matrix.makeRotationFromEuler(euler.set(Math.random()*2*Math.PI,Math.random()*2*Math.PI,Math.random()*2*Math.PI)));
13498
return geometry;
99+
135100
}
136101

137102
function createMultiMaterial(){
138-
var materials = [];
139-
materials.push(new THREE.MeshBasicMaterial({color: 0xff0000}));
140-
materials.push(new THREE.MeshBasicMaterial({color: 0xffff00}));
141-
materials.push(new THREE.MeshBasicMaterial({color: 0x00ff00}));
142-
materials.push(new THREE.MeshBasicMaterial({color: 0x00ffff}));
143-
materials.push(new THREE.MeshBasicMaterial({color: 0x0000ff}));
144-
materials.push(new THREE.MeshBasicMaterial({color: 0xff00ff}));
145-
var material = new THREE.MultiMaterial(materials);
146-
return material;
103+
var materials = [
104+
new THREE.MeshBasicMaterial( { color: 0xff0000 } ),
105+
new THREE.MeshBasicMaterial( { color: 0xffff00 } ),
106+
new THREE.MeshBasicMaterial( { color: 0x00ff00 } ),
107+
new THREE.MeshBasicMaterial( { color: 0x00ffff } ),
108+
new THREE.MeshBasicMaterial( { color: 0x0000ff } ),
109+
new THREE.MeshBasicMaterial( { color: 0xff00ff } )
110+
];
111+
112+
return new THREE.MultiMaterial( materials );
147113
}
148114

149115
function onWindowResize() {
@@ -159,52 +125,60 @@
159125

160126
function animate() {
161127

162-
requestAnimationFrame( animate );
128+
setTimeout( animate, 1000 );
163129

164130
render();
165-
stats.update();
166131

167132
}
168133

169-
function randomizeFaces(object){
170-
for(var i = 0,l=object.geometry.faces.length;i<l;i++){
134+
function randomizeFaces( object ) {
135+
136+
var geometry = object.geometry;
137+
var faces = geometry.faces;
171138

172-
object.geometry.faces[i].materialIndex = Math.floor(Math.random() * 6);
139+
for ( var i = 0, l = faces.length; i < l; i ++ ) {
140+
141+
faces[ i ].a = Math.floor( Math.random() * geometry.vertices.length );
142+
faces[ i ].b = Math.floor( Math.random() * geometry.vertices.length );
143+
faces[ i ].c = Math.floor( Math.random() * geometry.vertices.length );
173144

174145
}
175-
object.geometry.groupsNeedUpdate = true;
146+
147+
geometry.elementsNeedUpdate = true;
148+
176149
}
177150

178-
function render() {
151+
function randomizeMaterialIndices( object ) {
179152

180-
var timer = Date.now() * 0.001;
153+
var geometry = object.geometry;
154+
var faces = geometry.faces;
181155

182-
if (parseInt(timer,10)%2 === 0){
156+
for ( var i = 0, l = faces.length; i < l; i ++ ) {
183157

184-
if (scene.children.indexOf(objectToggleAddRemove) === -1) {
158+
faces[ i ].materialIndex = Math.floor( Math.random() * 6 );
185159

160+
}
186161

187-
objectNewGeometry.geometry = createGeometry(1);
188-
randomizeFaces(objectRandomizeFaces);
162+
geometry.groupsNeedUpdate = true;
189163

190-
scene.add(objectToggleAddRemove);
164+
}
191165

192-
}
166+
function render() {
193167

194-
} else {
168+
objectNewGeometry.geometry = createGeometry( 1 );
195169

196-
if (scene.children.indexOf(objectToggleAddRemove) !== -1) {
170+
if ( scene.children.indexOf( objectToggleAddRemove ) === -1 ) {
197171

198-
objectNewGeometry.geometry = createGeometry(1);
199-
randomizeFaces(objectRandomizeFaces);
172+
scene.add( objectToggleAddRemove );
200173

201-
scene.remove(objectToggleAddRemove);
174+
} else {
202175

203-
}
176+
scene.remove( objectToggleAddRemove );
204177

205178
}
206179

207-
camera.lookAt( scene.position );
180+
randomizeFaces( objectRandomizeFaces );
181+
randomizeMaterialIndices( objectRandomizeMaterialIndices );
208182

209183
renderer.render( scene, camera );
210184

0 commit comments

Comments
 (0)