Skip to content

Commit

Permalink
Examples: More usage of setAnimationLoop(). (#28250)
Browse files Browse the repository at this point in the history 
* Examples: More usage of `setAnimationLoop()`.

* Examples: Clean up.
  • Loading branch information
@Mugen87
Mugen87 committed May 1, 2024
1 parent 6d90513 commit 98c070e
Show file tree
Hide file tree
Showing 52 changed files with 101 additions and 241 deletions.
4 changes: 1 addition & 3 deletions examples/webgl_marchingcubes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@
const clock = new THREE.Clock();

init();
animate();

function init() {

Expand Down Expand Up @@ -104,6 +103,7 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
container.appendChild( renderer.domElement );

// CONTROLS
Expand Down Expand Up @@ -321,8 +321,6 @@

function animate() {

requestAnimationFrame( animate );

render();
stats.update();

Expand Down
4 changes: 1 addition & 3 deletions examples/webgl_materials_alphahash.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@
};

init();
animate();

function init() {

Expand Down Expand Up @@ -100,6 +99,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

//
Expand Down Expand Up @@ -190,8 +190,6 @@

function animate() {

requestAnimationFrame( animate );

render();

stats.update();
Expand Down
4 changes: 1 addition & 3 deletions examples/webgl_materials_blending.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
const textureLoader = new THREE.TextureLoader();

init();
animate();

function init() {

Expand Down Expand Up @@ -123,6 +122,7 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

// EVENTS
Expand Down Expand Up @@ -171,8 +171,6 @@

function animate() {

requestAnimationFrame( animate );

const time = Date.now() * 0.00025;
const ox = ( time * - 0.01 * mapBg.repeat.x ) % 1;
const oy = ( time * - 0.01 * mapBg.repeat.y ) % 1;
Expand Down
4 changes: 1 addition & 3 deletions examples/webgl_materials_blending_custom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@
const equations = { Add: THREE.AddEquation, Subtract: THREE.SubtractEquation, ReverseSubtract: THREE.ReverseSubtractEquation, Min: THREE.MinEquation, Max: THREE.MaxEquation };

init();
animate();

function init() {

Expand Down Expand Up @@ -174,6 +173,7 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

// EVENTS
Expand Down Expand Up @@ -237,8 +237,6 @@

function animate() {

requestAnimationFrame( animate );

const time = Date.now() * 0.00025;
const ox = ( time * - 0.01 * mapBg.repeat.x ) % 1;
const oy = ( time * - 0.01 * mapBg.repeat.y ) % 1;
Expand Down
4 changes: 1 addition & 3 deletions examples/webgl_materials_bumpmap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@
const windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

Expand Down Expand Up @@ -105,6 +104,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
container.appendChild( renderer.domElement );

renderer.shadowMap.enabled = true;
Expand Down Expand Up @@ -157,8 +157,6 @@

function animate() {

requestAnimationFrame( animate );

render();

stats.update();
Expand Down
4 changes: 2 additions & 2 deletions examples/webgl_materials_car.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( render );
renderer.setAnimationLoop( animate );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.85;
container.appendChild( renderer.domElement );
Expand Down Expand Up @@ -193,7 +193,7 @@

}

function render() {
function animate() {

controls.update();

Expand Down
22 changes: 8 additions & 14 deletions examples/webgl_materials_channels.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,18 +59,6 @@
const BIAS = - 0.428408; // from original model

init();
animate();
initGui();

// Init gui
function initGui() {

const gui = new GUI();
gui.add( params, 'material', [ 'standard', 'normal', 'velocity', 'depthBasic', 'depthRGBA' ] );
gui.add( params, 'camera', [ 'perspective', 'ortho' ] );
gui.add( params, 'side', [ 'front', 'back', 'double' ] );

}

function init() {

Expand All @@ -80,6 +68,7 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
container.appendChild( renderer.domElement );

//
Expand Down Expand Up @@ -223,6 +212,13 @@

//

const gui = new GUI();
gui.add( params, 'material', [ 'standard', 'normal', 'velocity', 'depthBasic', 'depthRGBA' ] );
gui.add( params, 'camera', [ 'perspective', 'ortho' ] );
gui.add( params, 'side', [ 'front', 'back', 'double' ] );

//

window.addEventListener( 'resize', onWindowResize );

}
Expand Down Expand Up @@ -250,8 +246,6 @@

function animate() {

requestAnimationFrame( animate );

stats.begin();
render();
stats.end();
Expand Down
9 changes: 1 addition & 8 deletions examples/webgl_materials_cubemap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@
let pointLight;

init();
animate();

function init() {

Expand Down Expand Up @@ -104,6 +103,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
container.appendChild( renderer.domElement );

//controls
Expand Down Expand Up @@ -132,13 +132,6 @@

function animate() {

requestAnimationFrame( animate );
render();

}

function render() {

renderer.render( scene, camera );
stats.update();

Expand Down
4 changes: 2 additions & 2 deletions examples/webgl_materials_cubemap_dynamic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animation );
renderer.setAnimationLoop( animate );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
document.body.appendChild( renderer.domElement );

Expand Down Expand Up @@ -124,7 +124,7 @@

}

function animation( msTime ) {
function animate( msTime ) {

const time = msTime / 1000;

Expand Down
3 changes: 1 addition & 2 deletions examples/webgl_materials_cubemap_mipmaps.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@
let camera, scene, renderer;

init();
animate();

//load customized cube texture
async function loadCubeTextureWithMipmaps() {
Expand Down Expand Up @@ -142,6 +141,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
container.appendChild( renderer.domElement );

//controls
Expand All @@ -164,7 +164,6 @@

function animate() {

requestAnimationFrame( animate );
renderer.render( scene, camera );

}
Expand Down
4 changes: 1 addition & 3 deletions examples/webgl_materials_cubemap_refraction.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@
let windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

Expand Down Expand Up @@ -83,6 +82,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
container.appendChild( renderer.domElement );

stats = new Stats();
Expand Down Expand Up @@ -148,8 +148,6 @@

function animate() {

requestAnimationFrame( animate );

render();
stats.update();

Expand Down
4 changes: 1 addition & 3 deletions examples/webgl_materials_cubemap_render_to_mipmaps.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,6 @@


init();
animate();


async function loadCubeTexture( urls ) {

Expand Down Expand Up @@ -169,6 +167,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
container.appendChild( renderer.domElement );

scene = new THREE.Scene();
Expand Down Expand Up @@ -229,7 +228,6 @@

function animate() {

requestAnimationFrame( animate );
renderer.render( scene, camera );

}
Expand Down
10 changes: 1 addition & 9 deletions examples/webgl_materials_curvature.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@
let ninjaMeshRaw, curvatureAttribute, bufferGeo;

init();
animate();

//returns average of elements in a dictionary
function average( dict ) {
Expand Down Expand Up @@ -137,6 +136,7 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
renderer.autoClear = false;
document.body.appendChild( renderer.domElement );

Expand Down Expand Up @@ -355,14 +355,6 @@

function animate() {

requestAnimationFrame( animate );

render();

}

function render() {

renderer.render( scene, camera );

}
Expand Down
4 changes: 1 addition & 3 deletions examples/webgl_materials_displacementmap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@
let r = 0.0;

init();
animate();
initGui();

// Init gui
Expand Down Expand Up @@ -115,6 +114,7 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
container.appendChild( renderer.domElement );

//
Expand Down Expand Up @@ -235,8 +235,6 @@

function animate() {

requestAnimationFrame( animate );

controls.update();

stats.begin();
Expand Down
Loading

0 comments on commit 98c070e

Please sign in to comment.