Skip to content

Commit 9297fb9

Browse files
mrdoobmrdoob
committed
All examples now use RequestAnimationFrame.js (pheww!)
1 parent f474b91 commit 9297fb9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1825
-1504
lines changed

‎examples/canvas_interactive_voxelpainter.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@
145145

146146
} else {
147147

148-
var position = new THREE.Vector3().add( intersects[ 0 ].point, intersects[ 0 ].object.rotationMatrix.multiplyVector3( intersects[ 0 ].face.normal.clone() ) );
148+
var position = new THREE.Vector3().add( intersects[ 0 ].point, intersects[ 0 ].object.matrixRotation.multiplyVector3( intersects[ 0 ].face.normal.clone() ) );
149149

150150
var voxel = new THREE.Mesh( new Cube( 50, 50, 50 ), [ new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading } ), new THREE.MeshFaceMaterial() ] );
151151
voxel.position.x = Math.floor( position.x / 50 ) * 50 + 25;

‎examples/misc_lights_test.html

+21-29
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE HTML>
22
<html lang="en">
33
<head>
4-
<title>three.js - lights - point + directional - webgl</title>
4+
<title>three.js misc - lights - point + directional</title>
55
<meta charset="utf-8">
66
<style type="text/css">
77

@@ -116,7 +116,7 @@ <h1>lights test</h1>
116116
<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
117117
<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
118118

119-
119+
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
120120
<script type="text/javascript" src="js/Stats.js"></script>
121121

122122
<script type="text/javascript">
@@ -144,18 +144,15 @@ <h1>lights test</h1>
144144
var bcanvas = document.getElementById( 'rcanvas' );
145145
var bwebgl = document.getElementById( 'rwebgl' );
146146

147-
document.addEventListener('mousemove', onDocumentMouseMove, false);
147+
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
148148

149149
init();
150-
151-
loop();
150+
animate();
152151

153152
//render_canvas = !has_gl;
154153
bwebgl.style.display = has_gl ? 'inline' : 'none';
155154
bcanvas.className = render_canvas ? 'button' : 'button inactive';
156155

157-
setInterval(loop, 1000/60);
158-
159156
function init() {
160157

161158
container = document.createElement('div');
@@ -180,8 +177,7 @@ <h1>lights test</h1>
180177
mesh.position.z = 500 * ( Math.random() - 0.5 );
181178
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * ( Math.random() + 0.5 );
182179
mesh.overdraw = true;
183-
mesh.updateMatrix();
184-
scene.addObject(mesh);
180+
scene.addObject( mesh );
185181

186182
}
187183

@@ -206,7 +202,6 @@ <h1>lights test</h1>
206202
lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
207203
lightMesh.position = pointLight.position;
208204
lightMesh.overdraw = true;
209-
lightMesh.updateMatrix();
210205
scene.addObject(lightMesh);
211206

212207

@@ -270,24 +265,25 @@ <h1>lights test</h1>
270265

271266
}
272267

268+
//
269+
270+
function animate() {
271+
272+
requestAnimationFrame( animate );
273+
274+
render();
275+
stats.update();
276+
277+
}
278+
273279
var r = 0, counter = 0;
274280

275-
function loop() {
281+
function render() {
282+
283+
counter == 30 ? scene.removeLight( directionalLight ) : counter ++;
276284

277-
if( counter == 30 ) {
278-
279-
scene.removeLight( directionalLight );
280-
281-
} else {
282-
283-
counter++;
284-
285-
}
286-
287285
camera.position.x += ( mouseX - camera.position.x ) * .05;
288286
camera.position.y += ( - mouseY - camera.position.y ) * .05;
289-
camera.updateMatrix();
290-
291287

292288
for ( var i = 0, l = scene.objects.length; i < l; i ++ ) {
293289

@@ -303,21 +299,17 @@ <h1>lights test</h1>
303299

304300
scene.objects[i].rotation.z += 0.05;
305301

306-
scene.objects[i].updateMatrix();
307302
}
308303

309304

310-
lightMesh.position.x = 200*Math.cos(r);
311-
lightMesh.position.z = 200*Math.sin(r);
312-
lightMesh.updateMatrix();
305+
lightMesh.position.x = 200 * Math.cos( r );
306+
lightMesh.position.z = 200 * Math.sin( r );
313307

314308
r += 0.1;
315309

316310
if ( render_canvas ) canvasRenderer.render( scene, camera );
317311
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
318312

319-
stats.update();
320-
321313
}
322314

323315
function log(text) {

‎examples/misc_materials_multimaterials.html

+15-8
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ <h1>Multi-materials test</h1>
4646
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
4747
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
4848

49+
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
4950
<script type="text/javascript" src="js/Stats.js"></script>
5051

5152
<script type="text/javascript">
@@ -80,15 +81,12 @@ <h1>Multi-materials test</h1>
8081
document.addEventListener('mousemove', onDocumentMouseMove, false);
8182

8283
init();
83-
84-
loop();
84+
animate();
8585

8686
//render_canvas = !has_gl;
8787
bwebgl.style.display = has_gl ? "inline" : "none";
8888
bcanvas.className = render_canvas ? "button" : "button inactive";
8989

90-
setInterval(loop, 1000/60);
91-
9290
function init() {
9391

9492
container = document.createElement('div');
@@ -167,7 +165,7 @@ <h1>Multi-materials test</h1>
167165

168166
var loader = new THREE.Loader(),
169167
callback = function( geometry ) { createScene( geometry) };
170-
168+
171169
loader.loadAscii( { model: "obj/female02/Female02_slim.js", callback: callback } );
172170
//loader.loadBinary( { model: "obj/female02/Female02_bin.js", callback: callback } );
173171

@@ -284,7 +282,18 @@ <h1>Multi-materials test</h1>
284282

285283
}
286284

287-
function loop() {
285+
//
286+
287+
function animate() {
288+
289+
requestAnimationFrame( animate );
290+
291+
render();
292+
stats.update();
293+
294+
}
295+
296+
function render() {
288297

289298
camera.position.x += ( mouseX - camera.position.x ) * .05;
290299
camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -293,8 +302,6 @@ <h1>Multi-materials test</h1>
293302
if ( render_canvas ) canvasRenderer.render( scene, camera );
294303
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
295304

296-
stats.update();
297-
298305
}
299306

300307
function log(text) {

‎examples/misc_uqbiquity_test.html

+17-11
Original file line numberDiff line numberDiff line change
@@ -87,14 +87,12 @@
8787
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
8888
<script type="text/javascript" src="../src/extras/primitives/Cylinder.js"></script>
8989
<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
90-
<script type="text/javascript" src="../src/extras/MiscUtils.js"></script>
9190

91+
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
9292
<script type="text/javascript" src="js/Stats.js"></script>
9393

9494
<script type="text/javascript">
9595

96-
window.onload = init;
97-
9896
var SCREEN_WIDTH = window.innerWidth / 3;
9997
var SCREEN_HEIGHT = window.innerHeight;
10098
var AMOUNT = 100;
@@ -111,7 +109,8 @@
111109
var windowHalfX = window.innerWidth / 2;
112110
var windowHalfY = window.innerHeight / 2;
113111

114-
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
112+
init();
113+
animate();
115114

116115
function init() {
117116

@@ -234,8 +233,8 @@
234233
stats.domElement.style.position = 'absolute';
235234
stats.domElement.style.top = '0px';
236235
container.appendChild( stats.domElement );
237-
238-
loop();
236+
237+
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
239238

240239
}
241240

@@ -246,9 +245,18 @@
246245

247246
}
248247

249-
function loop() {
250-
251-
requestAnimationFrame( loop, container );
248+
//
249+
250+
function animate() {
251+
252+
requestAnimationFrame( animate );
253+
254+
render();
255+
stats.update();
256+
257+
}
258+
259+
function render() {
252260

253261
camera.position.x += ( mouseX - camera.position.x ) * .05;
254262
camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -266,8 +274,6 @@
266274
svgRenderer.render( scene, camera );
267275
webglRenderer.render( scene, camera );
268276

269-
stats.update();
270-
271277
}
272278

273279
</script>

‎examples/misc_webglrenderer2_sandbox.html

+16-8
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101
<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
102102
<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
103103

104+
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
104105
<script type="text/javascript" src="js/Stats.js"></script>
105106

106107
<script type="text/javascript">
@@ -118,12 +119,8 @@
118119
var windowHalfX = window.innerWidth / 2;
119120
var windowHalfY = window.innerHeight / 2;
120121

121-
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
122-
123122
init();
124-
// loop();
125-
setInterval( loop, 1000 / 60 );
126-
123+
animate();
127124

128125
function init() {
129126

@@ -212,6 +209,8 @@
212209

213210
}
214211

212+
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
213+
215214
}
216215

217216
function generateTexture( r, g, b ) {
@@ -252,15 +251,24 @@
252251

253252
}
254253

255-
function loop() {
254+
//
255+
256+
function animate() {
257+
258+
requestAnimationFrame( animate );
259+
260+
render();
261+
if ( statsEnabled ) stats.update();
262+
263+
}
264+
265+
function render() {
256266

257267
camera.position.x += ( mouseX - camera.position.x ) * .05;
258268
camera.position.y += ( - mouseY - camera.position.y ) * .05;
259269

260270
renderer.render( scene, camera );
261271

262-
if ( statsEnabled ) stats.update();
263-
264272
}
265273

266274
function log( text ) {

0 commit comments

Comments
 (0)