From d2ea31a0f7fdbc64ecd9ddb5c4ed3359aebcfbf7 Mon Sep 17 00:00:00 2001 From: alteredq Date: Fri, 15 Jun 2012 11:38:25 +0200 Subject: [PATCH] Another batch of examples resizing fixes. This thing is neverending story ... --- examples/canvas_geometry_cube.html | 4 ++-- examples/canvas_geometry_earth.html | 4 ++-- examples/canvas_geometry_hierarchy.html | 4 ++-- examples/canvas_geometry_terrain.html | 4 ++-- examples/canvas_geometry_text.html | 4 ++-- examples/canvas_lines.html | 4 ++-- examples/canvas_lines_sphere.html | 4 ++-- examples/canvas_materials_video.html | 4 ++-- examples/canvas_particles_floor.html | 4 ++-- examples/canvas_particles_random.html | 4 ++-- examples/canvas_particles_shapes.html | 8 ++++--- examples/canvas_particles_sprites.html | 4 ++-- examples/canvas_particles_waves.html | 4 ++-- examples/canvas_sandbox.html | 4 ++-- examples/webgl_lines_colors.html | 4 ++-- examples/webgl_loader_obj.html | 4 ++-- examples/webgl_loader_scene.html | 4 ++-- examples/webgl_loader_scene_blender.html | 4 ++-- examples/webgl_loader_utf8.html | 4 ++-- examples/webgl_lod.html | 4 ++-- examples/webgl_materials_cars.html | 4 ++-- examples/webgl_materials_cars_anaglyph.html | 4 ++-- examples/webgl_materials_cars_camaro.html | 4 ++-- ...webgl_materials_cars_camaro_crosseyed.html | 4 ++-- .../webgl_materials_cars_parallaxbarrier.html | 4 ++-- examples/webgl_materials_cubemap.html | 19 +++++++++++++++++ ...gl_materials_cubemap_balls_reflection.html | 20 +++++++++++++++++- ...als_cubemap_balls_reflection_anaglyph.html | 19 +++++++++++++++++ ...gl_materials_cubemap_balls_refraction.html | 19 +++++++++++++++++ ...ls_cubemap_balls_refraction_crosseyed.html | 18 +++++++++++++++- examples/webgl_materials_cubemap_escher.html | 16 ++++++++++++++ .../webgl_materials_cubemap_refraction.html | 19 +++++++++++++++++ examples/webgl_materials_grass.html | 14 +++++++++++++ examples/webgl_materials_normalmap.html | 20 ++++++++++++++++++ examples/webgl_materials_shaders.html | 17 +++++++++++++++ examples/webgl_materials_shaders_fresnel.html | 21 ++++++++++++++++++- 36 files changed, 252 insertions(+), 54 deletions(-) diff --git a/examples/canvas_geometry_cube.html b/examples/canvas_geometry_cube.html index 86737ebb4b..5f488c823a 100644 --- a/examples/canvas_geometry_cube.html +++ b/examples/canvas_geometry_cube.html @@ -100,8 +100,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/canvas_geometry_earth.html b/examples/canvas_geometry_earth.html index 1716b20d26..26944232f3 100644 --- a/examples/canvas_geometry_earth.html +++ b/examples/canvas_geometry_earth.html @@ -124,8 +124,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/canvas_geometry_hierarchy.html b/examples/canvas_geometry_hierarchy.html index d2df448800..1b73eff225 100644 --- a/examples/canvas_geometry_hierarchy.html +++ b/examples/canvas_geometry_hierarchy.html @@ -90,8 +90,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/canvas_geometry_terrain.html b/examples/canvas_geometry_terrain.html index 6a19899367..60e6f0eec7 100644 --- a/examples/canvas_geometry_terrain.html +++ b/examples/canvas_geometry_terrain.html @@ -106,8 +106,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/canvas_geometry_text.html b/examples/canvas_geometry_text.html index fcc413e6a5..141b4ef555 100644 --- a/examples/canvas_geometry_text.html +++ b/examples/canvas_geometry_text.html @@ -128,8 +128,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/canvas_lines.html b/examples/canvas_lines.html index 559bf3a218..c7c63ef904 100644 --- a/examples/canvas_lines.html +++ b/examples/canvas_lines.html @@ -106,8 +106,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/canvas_lines_sphere.html b/examples/canvas_lines_sphere.html index f6eb9bd2e7..307c897952 100644 --- a/examples/canvas_lines_sphere.html +++ b/examples/canvas_lines_sphere.html @@ -120,8 +120,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/canvas_materials_video.html b/examples/canvas_materials_video.html index 88af15b128..a4fc140870 100644 --- a/examples/canvas_materials_video.html +++ b/examples/canvas_materials_video.html @@ -174,8 +174,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/canvas_particles_floor.html b/examples/canvas_particles_floor.html index f800bd5d94..a94c335bfc 100644 --- a/examples/canvas_particles_floor.html +++ b/examples/canvas_particles_floor.html @@ -97,8 +97,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/canvas_particles_random.html b/examples/canvas_particles_random.html index 50883b0925..9ec018f0e5 100644 --- a/examples/canvas_particles_random.html +++ b/examples/canvas_particles_random.html @@ -90,8 +90,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/canvas_particles_shapes.html b/examples/canvas_particles_shapes.html index 81786669ee..fd5b47150f 100644 --- a/examples/canvas_particles_shapes.html +++ b/examples/canvas_particles_shapes.html @@ -190,9 +190,11 @@ }; - var onParticleCreated = function(p) { + var onParticleCreated = function( p ) { + var position = p.position; p.target.position = position; + }; var onParticleDead = function(particle) { @@ -246,8 +248,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/canvas_particles_sprites.html b/examples/canvas_particles_sprites.html index 2d7766bf66..c4004d3958 100644 --- a/examples/canvas_particles_sprites.html +++ b/examples/canvas_particles_sprites.html @@ -81,8 +81,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/canvas_particles_waves.html b/examples/canvas_particles_waves.html index 1bf25abd4b..7aaeb187b5 100644 --- a/examples/canvas_particles_waves.html +++ b/examples/canvas_particles_waves.html @@ -102,8 +102,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/canvas_sandbox.html b/examples/canvas_sandbox.html index 70bbd1ff21..df002ecb1f 100644 --- a/examples/canvas_sandbox.html +++ b/examples/canvas_sandbox.html @@ -164,8 +164,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/webgl_lines_colors.html b/examples/webgl_lines_colors.html index 2887d6cf02..59c1ba89ef 100644 --- a/examples/webgl_lines_colors.html +++ b/examples/webgl_lines_colors.html @@ -185,8 +185,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/webgl_loader_obj.html b/examples/webgl_loader_obj.html index 42d40a4b6a..dbeb3951ae 100644 --- a/examples/webgl_loader_obj.html +++ b/examples/webgl_loader_obj.html @@ -120,8 +120,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/webgl_loader_scene.html b/examples/webgl_loader_scene.html index cca6513c2b..70a64ac263 100644 --- a/examples/webgl_loader_scene.html +++ b/examples/webgl_loader_scene.html @@ -319,8 +319,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/webgl_loader_scene_blender.html b/examples/webgl_loader_scene_blender.html index 295a91b6bb..48411c419a 100644 --- a/examples/webgl_loader_scene_blender.html +++ b/examples/webgl_loader_scene_blender.html @@ -286,8 +286,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/webgl_loader_utf8.html b/examples/webgl_loader_utf8.html index cd95624180..499a3bd892 100644 --- a/examples/webgl_loader_utf8.html +++ b/examples/webgl_loader_utf8.html @@ -133,8 +133,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/webgl_lod.html b/examples/webgl_lod.html index 4760f76ee3..e148cc0ff3 100644 --- a/examples/webgl_lod.html +++ b/examples/webgl_lod.html @@ -134,8 +134,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/webgl_materials_cars.html b/examples/webgl_materials_cars.html index 28b85910ef..fbd3ad586f 100644 --- a/examples/webgl_materials_cars.html +++ b/examples/webgl_materials_cars.html @@ -475,8 +475,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/webgl_materials_cars_anaglyph.html b/examples/webgl_materials_cars_anaglyph.html index 4b1aa5aa17..fbaf27b5d8 100644 --- a/examples/webgl_materials_cars_anaglyph.html +++ b/examples/webgl_materials_cars_anaglyph.html @@ -470,8 +470,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/webgl_materials_cars_camaro.html b/examples/webgl_materials_cars_camaro.html index 3874dc6da4..5abe94b0c8 100644 --- a/examples/webgl_materials_cars_camaro.html +++ b/examples/webgl_materials_cars_camaro.html @@ -148,8 +148,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/webgl_materials_cars_camaro_crosseyed.html b/examples/webgl_materials_cars_camaro_crosseyed.html index edb947844f..2975451b1f 100644 --- a/examples/webgl_materials_cars_camaro_crosseyed.html +++ b/examples/webgl_materials_cars_camaro_crosseyed.html @@ -158,8 +158,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/webgl_materials_cars_parallaxbarrier.html b/examples/webgl_materials_cars_parallaxbarrier.html index 1b5417ff7b..c73a577299 100644 --- a/examples/webgl_materials_cars_parallaxbarrier.html +++ b/examples/webgl_materials_cars_parallaxbarrier.html @@ -470,8 +470,8 @@ function onWindowResize() { - windowHalfX = window.innerWidth / 2, - windowHalfY = window.innerHeight / 2, + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); diff --git a/examples/webgl_materials_cubemap.html b/examples/webgl_materials_cubemap.html index 5bedfaf04e..a6f78d2416 100644 --- a/examples/webgl_materials_cubemap.html +++ b/examples/webgl_materials_cubemap.html @@ -156,6 +156,25 @@ loader.load( "obj/walt/WaltHead_bin.js", function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } ); + // + + window.addEventListener( 'resize', onWindowResize, false ); + + } + + function onWindowResize() { + + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; + + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + + cameraCube.aspect = window.innerWidth / window.innerHeight; + cameraCube.updateProjectionMatrix(); + + renderer.setSize( window.innerWidth, window.innerHeight ); + } function createScene( geometry, m1, m2, m3 ) { diff --git a/examples/webgl_materials_cubemap_balls_reflection.html b/examples/webgl_materials_cubemap_balls_reflection.html index a0ee6ff35e..181b42982f 100644 --- a/examples/webgl_materials_cubemap_balls_reflection.html +++ b/examples/webgl_materials_cubemap_balls_reflection.html @@ -79,7 +79,6 @@ cameraCube = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 ); cubeTarget = new THREE.Vector3( 0, 0, 0 ); - sceneCube.add( cameraCube ); var geometry = new THREE.SphereGeometry( 100, 32, 16 ); @@ -136,6 +135,25 @@ renderer.autoClear = false; container.appendChild( renderer.domElement ); + // + + window.addEventListener( 'resize', onWindowResize, false ); + + } + + function onWindowResize() { + + windowHalfX = window.innerWidth / 2, + windowHalfY = window.innerHeight / 2, + + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + + cameraCube.aspect = window.innerWidth / window.innerHeight; + cameraCube.updateProjectionMatrix(); + + renderer.setSize( window.innerWidth, window.innerHeight ); + } function onDocumentMouseMove( event ) { diff --git a/examples/webgl_materials_cubemap_balls_reflection_anaglyph.html b/examples/webgl_materials_cubemap_balls_reflection_anaglyph.html index 785ea10973..23ff4c1eee 100644 --- a/examples/webgl_materials_cubemap_balls_reflection_anaglyph.html +++ b/examples/webgl_materials_cubemap_balls_reflection_anaglyph.html @@ -127,7 +127,26 @@ renderer = new THREE.WebGLRenderer(); container.appendChild( renderer.domElement ); + var width = window.innerWidth || 2; + var height = window.innerHeight || 2; + effect = new THREE.AnaglyphEffect( renderer ); + effect.setSize( width, height ); + + // + + window.addEventListener( 'resize', onWindowResize, false ); + + } + + function onWindowResize() { + + windowHalfX = window.innerWidth / 2, + windowHalfY = window.innerHeight / 2, + + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + effect.setSize( window.innerWidth, window.innerHeight ); } diff --git a/examples/webgl_materials_cubemap_balls_refraction.html b/examples/webgl_materials_cubemap_balls_refraction.html index 76dfac02ce..e97f6d096b 100644 --- a/examples/webgl_materials_cubemap_balls_refraction.html +++ b/examples/webgl_materials_cubemap_balls_refraction.html @@ -132,6 +132,25 @@ renderer.autoClear = false; container.appendChild( renderer.domElement ); + // + + window.addEventListener( 'resize', onWindowResize, false ); + + } + + function onWindowResize() { + + windowHalfX = window.innerWidth / 2, + windowHalfY = window.innerHeight / 2, + + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + + cameraCube.aspect = window.innerWidth / window.innerHeight; + cameraCube.updateProjectionMatrix(); + + renderer.setSize( window.innerWidth, window.innerHeight ); + } function onDocumentMouseMove(event) { diff --git a/examples/webgl_materials_cubemap_balls_refraction_crosseyed.html b/examples/webgl_materials_cubemap_balls_refraction_crosseyed.html index 4ba4dfc059..8882576206 100644 --- a/examples/webgl_materials_cubemap_balls_refraction_crosseyed.html +++ b/examples/webgl_materials_cubemap_balls_refraction_crosseyed.html @@ -130,9 +130,25 @@ effect = new THREE.CrosseyedEffect( renderer ); effect.setSize( window.innerWidth, window.innerHeight ); effect.separation = 90; - + document.addEventListener( 'keydown', onKeyDown, false ); + // + + window.addEventListener( 'resize', onWindowResize, false ); + + } + + function onWindowResize() { + + windowHalfX = window.innerWidth / 2, + windowHalfY = window.innerHeight / 2, + + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + + effect.setSize( window.innerWidth, window.innerHeight ); + } function onDocumentMouseMove( event ) { diff --git a/examples/webgl_materials_cubemap_escher.html b/examples/webgl_materials_cubemap_escher.html index a6090c9007..0e9fbbcda0 100644 --- a/examples/webgl_materials_cubemap_escher.html +++ b/examples/webgl_materials_cubemap_escher.html @@ -118,6 +118,22 @@ } + // + + window.addEventListener( 'resize', onWindowResize, false ); + + } + + function onWindowResize() { + + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; + + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + + renderer.setSize( window.innerWidth, window.innerHeight ); + } function onDocumentMouseMove(event) { diff --git a/examples/webgl_materials_cubemap_refraction.html b/examples/webgl_materials_cubemap_refraction.html index 5322a39f2d..5ff7cc3323 100644 --- a/examples/webgl_materials_cubemap_refraction.html +++ b/examples/webgl_materials_cubemap_refraction.html @@ -150,6 +150,25 @@ document.addEventListener('mousemove', onDocumentMouseMove, false); + // + + window.addEventListener( 'resize', onWindowResize, false ); + + } + + function onWindowResize() { + + windowHalfX = window.innerWidth / 2, + windowHalfY = window.innerHeight / 2, + + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + + cameraCube.aspect = window.innerWidth / window.innerHeight; + cameraCube.updateProjectionMatrix(); + + renderer.setSize( window.innerWidth, window.innerHeight ); + } function createScene( geometry, m1, m2, m3 ) { diff --git a/examples/webgl_materials_grass.html b/examples/webgl_materials_grass.html index 71b2fe3460..583eb99c2e 100644 --- a/examples/webgl_materials_grass.html +++ b/examples/webgl_materials_grass.html @@ -60,6 +60,19 @@ renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); + // + + window.addEventListener( 'resize', onWindowResize, false ); + + } + + function onWindowResize() { + + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + + renderer.setSize( window.innerWidth, window.innerHeight ); + } function generateTextureBase() { @@ -84,6 +97,7 @@ context.globalCompositeOperation = 'lighter'; return canvas; + } function generateTextureLevel( texture ) { diff --git a/examples/webgl_materials_normalmap.html b/examples/webgl_materials_normalmap.html index b50a0fc905..1e8fd21475 100644 --- a/examples/webgl_materials_normalmap.html +++ b/examples/webgl_materials_normalmap.html @@ -231,6 +231,26 @@ } + // + + window.addEventListener( 'resize', onWindowResize, false ); + + } + + function onWindowResize() { + + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; + + camera.left = window.innerWidth / - 2; + camera.right = window.innerWidth / 2; + camera.top = window.innerHeight / 2; + camera.bottom = window.innerHeight / - 2; + + camera.updateProjectionMatrix(); + + renderer.setSize( window.innerWidth, window.innerHeight ); + } function createScene( geometry, scale, material1, material2 ) { diff --git a/examples/webgl_materials_shaders.html b/examples/webgl_materials_shaders.html index 20b4ba5d9e..e64a70d2ab 100644 --- a/examples/webgl_materials_shaders.html +++ b/examples/webgl_materials_shaders.html @@ -189,6 +189,23 @@ document.addEventListener('mousemove', onDocumentMouseMove, false); + // + + window.addEventListener( 'resize', onWindowResize, false ); + + } + + function onWindowResize() { + + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; + + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + + if ( webglRenderer ) webglRenderer.setSize( window.innerWidth, window.innerHeight ); + if ( canvasRenderer ) canvasRenderer.setSize( window.innerWidth, window.innerHeight ); + } function addToruses( geometry ) { diff --git a/examples/webgl_materials_shaders_fresnel.html b/examples/webgl_materials_shaders_fresnel.html index ae34342e9b..63ea3a974c 100644 --- a/examples/webgl_materials_shaders_fresnel.html +++ b/examples/webgl_materials_shaders_fresnel.html @@ -143,9 +143,28 @@ renderer.autoClear = false; container.appendChild( renderer.domElement ); + // + + window.addEventListener( 'resize', onWindowResize, false ); + + } + + function onWindowResize() { + + windowHalfX = window.innerWidth / 2; + windowHalfY = window.innerHeight / 2; + + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + + cameraCube.aspect = window.innerWidth / window.innerHeight; + cameraCube.updateProjectionMatrix(); + + renderer.setSize( window.innerWidth, window.innerHeight ); + } - function onDocumentMouseMove(event) { + function onDocumentMouseMove( event ) { mouseX = ( event.clientX - windowHalfX ) * 10; mouseY = ( event.clientY - windowHalfY ) * 10; -- GitLab