From 6857b6d5d398d7b465d58ea478bfa34610ac0096 Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Mon, 18 Jan 2016 16:06:04 +0100 Subject: [PATCH 1/2] removed deprecated THREE.ImageUtils.loadTexture --- docs/api/objects/Sprite.html | 4 +- docs/api/textures/Texture.html | 4 +- docs/scenes/js/material.js | 2 +- examples/canvas_materials.html | 15 +++++-- examples/canvas_materials_reflection.html | 5 ++- examples/canvas_sandbox.html | 5 ++- examples/js/GPUParticleSystem.js | 6 ++- examples/js/MD2Character.js | 7 ++-- examples/js/MD2CharacterComplex.js | 5 ++- examples/js/UCSCharacter.js | 39 ++++++++++--------- examples/js/loaders/sea3d/SEA3DLoader.js | 4 +- examples/misc_animation_authoring.html | 3 +- examples/misc_controls_deviceorientation.html | 2 +- examples/misc_controls_transform.html | 4 +- examples/misc_fps.html | 2 +- examples/misc_ubiquity_test.html | 6 ++- examples/misc_ubiquity_test2.html | 9 +++-- ...rgeometry_custom_attributes_particles.html | 2 +- ..._buffergeometry_instancing_billboards.html | 2 +- ...bgl_buffergeometry_instancing_dynamic.html | 2 +- ...ometry_instancing_interleaved_dynamic.html | 2 +- examples/webgl_custom_attributes.html | 2 +- examples/webgl_custom_attributes_points.html | 2 +- examples/webgl_custom_attributes_points2.html | 2 +- examples/webgl_custom_attributes_points3.html | 2 +- examples/webgl_geometries.html | 2 +- examples/webgl_geometries2.html | 2 +- examples/webgl_geometry_convex.html | 2 +- examples/webgl_geometry_cube.html | 2 +- examples/webgl_geometry_dynamic.html | 2 +- examples/webgl_geometry_minecraft.html | 2 +- examples/webgl_geometry_minecraft_ao.html | 8 ++-- examples/webgl_geometry_nurbs.html | 2 +- examples/webgl_geometry_teapot.html | 2 +- examples/webgl_hdr.html | 2 +- examples/webgl_interactive_points.html | 2 +- examples/webgl_interactive_voxelpainter.html | 2 +- examples/webgl_lensflares.html | 7 ++-- examples/webgl_lights_pointlights2.html | 7 ++-- examples/webgl_loader_md2.html | 2 +- examples/webgl_loader_md2_control.html | 2 +- examples/webgl_marchingcubes.html | 8 ++-- examples/webgl_materials_blending_custom.html | 18 +++++---- examples/webgl_materials_bumpmap.html | 2 +- examples/webgl_materials_bumpmap_skin.html | 8 ++-- examples/webgl_materials_cubemap_dynamic.html | 7 ++-- .../webgl_materials_cubemap_dynamic2.html | 12 ++++-- examples/webgl_materials_displacementmap.html | 12 ++++-- examples/webgl_materials_envmaps.html | 7 ++-- examples/webgl_materials_normalmap.html | 8 ++-- examples/webgl_materials_parallaxmap.html | 7 +++- examples/webgl_materials_skin.html | 6 ++- .../webgl_materials_texture_anisotropy.html | 6 ++- examples/webgl_materials_texture_filters.html | 9 +++-- .../webgl_materials_texture_manualmipmap.html | 10 ++--- .../webgl_materials_variations_basic.html | 2 +- .../webgl_materials_variations_lambert.html | 2 +- .../webgl_materials_variations_phong.html | 2 +- .../webgl_materials_variations_standard.html | 2 +- .../webgl_materials_variations_standard2.html | 2 +- examples/webgl_nearestneighbour.html | 16 ++++---- examples/webgl_objects_update.html | 36 ++++++++--------- examples/webgl_panorama_equirectangular.html | 4 +- examples/webgl_particles_general.html | 20 +++++----- examples/webgl_points_billboards.html | 2 +- examples/webgl_points_billboards_colors.html | 2 +- examples/webgl_points_sprites.html | 12 +++--- examples/webgl_postprocessing_nodes.html | 10 +++-- examples/webgl_sandbox.html | 7 ++-- examples/webgl_shader2.html | 2 +- examples/webgl_shader_lava.html | 6 ++- examples/webgl_shaders_ocean.html | 4 +- examples/webgl_shaders_tonemapping.html | 12 +++--- examples/webgl_shading_physical.html | 7 ++-- examples/webgl_sprites.html | 12 +++--- examples/webgl_terrain_dynamic.html | 18 +++++---- 76 files changed, 277 insertions(+), 209 deletions(-) diff --git a/docs/api/objects/Sprite.html b/docs/api/objects/Sprite.html index 0a9483f6fae84e..eebd44b010f208 100644 --- a/docs/api/objects/Sprite.html +++ b/docs/api/objects/Sprite.html @@ -17,7 +17,7 @@

[name]

Example

- var map = THREE.ImageUtils.loadTexture( "sprite.png" ); + var map = new THREE.TextureLoader().load( "sprite.png" ); var material = new THREE.SpriteMaterial( { map: map, color: 0xffffff, fog: true } ); var sprite = new THREE.Sprite( material ); scene.add( sprite ); @@ -48,7 +48,7 @@

[method:Sprite clone]()

This creates a new clone of the sprite.
- +

[method:Object3D clone]([page:Object3D object])

object -- (optional) Object3D which needs to be cloned. If undefined, clone method will create a new cloned Sprite Object. diff --git a/docs/api/textures/Texture.html b/docs/api/textures/Texture.html index 977e493ffabb2d..2cb7f85963ead9 100644 --- a/docs/api/textures/Texture.html +++ b/docs/api/textures/Texture.html @@ -21,7 +21,7 @@

Example

// load a texture, set wrap mode to repeat - var texture = THREE.ImageUtils.loadTexture( "textures/water.jpg" ); + var texture = new THREE.TextureLoader().load( "textures/water.jpg" ); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 4, 4 ); @@ -53,7 +53,7 @@

[property:number wrapT]

The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.
- +
NOTE: tiling of images in textures only functions if image dimensions are powers of two (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, ...) in terms of pixels. Individual dimensions need not be equal, but each must be a power of two. This is a limitation of WebGL, not Three.js.
diff --git a/docs/scenes/js/material.js b/docs/scenes/js/material.js index cf05913e6a825f..9bf464047d6f06 100644 --- a/docs/scenes/js/material.js +++ b/docs/scenes/js/material.js @@ -125,7 +125,7 @@ var textureMaps = (function () { return { none : null, - grass : THREE.ImageUtils.loadTexture( "../../examples/textures/terrain/grasslight-thin.jpg" ) + grass : new THREE.TextureLoader().load( "../../examples/textures/terrain/grasslight-thin.jpg" ) }; })(); diff --git a/examples/canvas_materials.html b/examples/canvas_materials.html index 3392d44cd4da49..8a73fce2f69014 100644 --- a/examples/canvas_materials.html +++ b/examples/canvas_materials.html @@ -67,15 +67,22 @@ var geometry = new THREE.SphereGeometry( 100, 14, 7 ); + var textureLoader = new THREE.TextureLoader(); + + var earthTexture = textureLoader.load( 'textures/land_ocean_ice_cloud_2048.jpg' ); + + var envMap = textureLoader.load( 'textures/envmap.png' ); + envMap.mapping = THREE.SphericalReflectionMapping; + var materials = [ new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true, side: THREE.DoubleSide } ), new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } ), - new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, overdraw: 0.5 } ), - new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.SmoothShading, overdraw: 0.5 } ), + new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } ), + new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } ), new THREE.MeshNormalMaterial( { overdraw: 0.5 } ), - new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ), - new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'textures/envmap.png', THREE.SphericalReflectionMapping ), overdraw: 0.5 } ) + new THREE.MeshBasicMaterial( { map: earthTexture } ), + new THREE.MeshBasicMaterial( { envMap: envMap, overdraw: 0.5 } ) ]; diff --git a/examples/canvas_materials_reflection.html b/examples/canvas_materials_reflection.html index 73b8ed683744e5..1d6ddaaa4840ed 100644 --- a/examples/canvas_materials_reflection.html +++ b/examples/canvas_materials_reflection.html @@ -67,7 +67,10 @@ geometry.computeVertexNormals(); - mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'textures/metal.jpg', THREE.SphericalReflectionMapping ), overdraw: 0.5 } ) ); + var envMap = new THREE.TextureLoader().load( 'textures/metal.jpg' ); + envMap.mapping = THREE.SphericalReflectionMapping; + + mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: envMap, overdraw: 0.5 } ) ); scene.add( mesh ); } ); diff --git a/examples/canvas_sandbox.html b/examples/canvas_sandbox.html index c0e9fa2502ae33..88525f9a7bb974 100644 --- a/examples/canvas_sandbox.html +++ b/examples/canvas_sandbox.html @@ -94,7 +94,10 @@ geometry = new THREE.IcosahedronGeometry( 100, 1 ); - material = new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'textures/metal.jpg', THREE.SphericalReflectionMapping ), overdraw: 0.5 } ); + var envMap = new THREE.TextureLoader().load( 'textures/metal.jpg' ); + envMap.mapping = THREE.SphericalReflectionMapping; + + material = new THREE.MeshBasicMaterial( { envMap: envMap, overdraw: 0.5 } ); for ( var i = 0; i < 10; i ++ ) { diff --git a/examples/js/GPUParticleSystem.js b/examples/js/GPUParticleSystem.js index 8e1e9fce08edd3..f9aa4dbebd50e8 100644 --- a/examples/js/GPUParticleSystem.js +++ b/examples/js/GPUParticleSystem.js @@ -198,10 +198,12 @@ THREE.GPUParticleSystem = function(options) { return ++i >= self.rand.length ? self.rand[i = 1] : self.rand[i]; } - self.particleNoiseTex = THREE.ImageUtils.loadTexture("textures/perlin-512.png"); + var textureLoader = new THREE.TextureLoader(); + + self.particleNoiseTex = textureLoader.load("textures/perlin-512.png"); self.particleNoiseTex.wrapS = self.particleNoiseTex.wrapT = THREE.RepeatWrapping; - self.particleSpriteTex = THREE.ImageUtils.loadTexture("textures/particle2.png"); + self.particleSpriteTex = textureLoader.load("textures/particle2.png"); self.particleSpriteTex.wrapS = self.particleSpriteTex.wrapT = THREE.RepeatWrapping; self.particleShaderMat = new THREE.ShaderMaterial({ diff --git a/examples/js/MD2Character.js b/examples/js/MD2Character.js index ac54b727626316..291e705c16f629 100644 --- a/examples/js/MD2Character.js +++ b/examples/js/MD2Character.js @@ -212,7 +212,7 @@ THREE.MD2Character = function () { } } - + } this.update = function ( delta ) { @@ -228,7 +228,8 @@ THREE.MD2Character = function () { for ( var i = 0; i < textureUrls.length; i ++ ) { - textures[ i ] = THREE.ImageUtils.loadTexture( baseUrl + textureUrls[ i ], mapping, checkLoadingComplete ); + textures[ i ] = new THREE.TextureLoader().load( baseUrl + textureUrls[ i ], checkLoadingComplete ); + textures[ i ].mapping = mapping; textures[ i ].name = textureUrls[ i ]; } @@ -254,7 +255,7 @@ THREE.MD2Character = function () { mesh.materialTexture = materialTexture; mesh.materialWireframe = materialWireframe; - + return mesh; } diff --git a/examples/js/MD2CharacterComplex.js b/examples/js/MD2CharacterComplex.js index 6c74007ca57c64..35f34ecdc342a5 100644 --- a/examples/js/MD2CharacterComplex.js +++ b/examples/js/MD2CharacterComplex.js @@ -510,8 +510,9 @@ THREE.MD2CharacterComplex = function () { var textures = []; for ( var i = 0; i < textureUrls.length; i ++ ) { - - textures[ i ] = THREE.ImageUtils.loadTexture( baseUrl + textureUrls[ i ], mapping, checkLoadingComplete ); + + textures[ i ] = new THREE.TextureLoader().load( baseUrl + textureUrls[ i ], checkLoadingComplete ); + textures[ i ].mapping = mapping; textures[ i ].name = textureUrls[ i ]; } diff --git a/examples/js/UCSCharacter.js b/examples/js/UCSCharacter.js index a7058a8d3dfded..2f2669419e62ae 100644 --- a/examples/js/UCSCharacter.js +++ b/examples/js/UCSCharacter.js @@ -1,16 +1,16 @@ THREE.UCSCharacter = function() { var scope = this; - + var mesh; this.scale = 1; this.root = new THREE.Object3D(); - + this.numSkins; this.numMorphs; - + this.skins = []; this.materials = []; this.morphs = []; @@ -18,24 +18,24 @@ THREE.UCSCharacter = function() { this.mixer = new THREE.AnimationMixer( this.root ); this.onLoadComplete = function () {}; - + this.loadCounter = 0; this.loadParts = function ( config ) { - + this.numSkins = config.skins.length; this.numMorphs = config.morphs.length; - + // Character geometry + number of skins this.loadCounter = 1 + config.skins.length; - + // SKINS this.skins = loadTextures( config.baseUrl + "skins/", config.skins ); this.materials = createMaterials( this.skins ); - + // MORPHS this.morphs = config.morphs; - + // CHARACTER var loader = new THREE.JSONLoader(); console.log( config.baseUrl + config.character ); @@ -43,11 +43,11 @@ THREE.UCSCharacter = function() { geometry.computeBoundingBox(); geometry.computeVertexNormals(); - + mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial() ); mesh.name = config.character; scope.root.add( mesh ); - + var bb = geometry.boundingBox; scope.root.scale.set( config.s, config.s, config.s ); scope.root.position.set( config.x, config.y - bb.min.y * config.s, config.z ); @@ -56,15 +56,15 @@ THREE.UCSCharacter = function() { mesh.receiveShadow = true; scope.mixer.clipAction( geometry.animations[0], mesh ).play(); - + scope.setSkin( 0 ); - + scope.checkLoadComplete(); } ); }; - + this.setSkin = function( index ) { if ( mesh && scope.materials ) { @@ -74,7 +74,7 @@ THREE.UCSCharacter = function() { } }; - + this.updateMorphs = function( influences ) { if ( mesh ) { @@ -88,7 +88,7 @@ THREE.UCSCharacter = function() { } }; - + function loadTextures( baseUrl, textureUrls ) { var mapping = THREE.UVMapping; @@ -96,7 +96,8 @@ THREE.UCSCharacter = function() { for ( var i = 0; i < textureUrls.length; i ++ ) { - textures[ i ] = THREE.ImageUtils.loadTexture( baseUrl + textureUrls[ i ], mapping, scope.checkLoadComplete ); + textures[ i ] = new THREE.TextureLoader().load( baseUrl + textureUrls[ i ], scope.checkLoadingComplete ); + textures[ i ].mapping = mapping; textures[ i ].name = textureUrls[ i ]; } @@ -108,7 +109,7 @@ THREE.UCSCharacter = function() { function createMaterials( skins ) { var materials = []; - + for ( var i = 0; i < skins.length; i ++ ) { materials[ i ] = new THREE.MeshLambertMaterial( { @@ -120,7 +121,7 @@ THREE.UCSCharacter = function() { } ); } - + return materials; } diff --git a/examples/js/loaders/sea3d/SEA3DLoader.js b/examples/js/loaders/sea3d/SEA3DLoader.js index 5edf6f4f30c0fa..5c6477d632f7d8 100644 --- a/examples/js/loaders/sea3d/SEA3DLoader.js +++ b/examples/js/loaders/sea3d/SEA3DLoader.js @@ -1502,7 +1502,7 @@ THREE.SEA3D.prototype.readImage = function( sea ) { var image = new Image(), texture = new THREE.Texture(); image.src = this.bufferToTexture( sea.data.buffer ); - + texture.name = sea.name; texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.flipY = false; @@ -1583,7 +1583,7 @@ THREE.SEA3D.prototype.readSound = function( sea ) { THREE.SEA3D.prototype.readTextureURL = function( sea ) { - var texture = THREE.ImageUtils.loadTexture( sea.url ); + var texture = new THREE.TextureLoader().load( sea.url ); texture.name = sea.name; texture.wrapS = texture.wrapT = THREE.RepeatWrapping; diff --git a/examples/misc_animation_authoring.html b/examples/misc_animation_authoring.html index 3d7c91b62c147f..cf0c251054ea12 100644 --- a/examples/misc_animation_authoring.html +++ b/examples/misc_animation_authoring.html @@ -63,7 +63,8 @@ scene.add( light ); - var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif', THREE.UVMapping, render ); + var texture = new THREE.TextureLoader().load( 'textures/crate.gif', render ); + texture.mapping = THREE.UVMapping; texture.anisotropy = renderer.getMaxAnisotropy(); var geometry = new THREE.BoxGeometry( 200, 200, 200 ); diff --git a/examples/misc_controls_deviceorientation.html b/examples/misc_controls_deviceorientation.html index bb39134572b1c4..3166e368fafe1e 100644 --- a/examples/misc_controls_deviceorientation.html +++ b/examples/misc_controls_deviceorientation.html @@ -68,7 +68,7 @@ geometry.scale( - 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { - map: THREE.ImageUtils.loadTexture( 'textures/2294472375_24a3b8ef46_o.jpg' ) + map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' ) } ); var mesh = new THREE.Mesh( geometry, material ); diff --git a/examples/misc_controls_transform.html b/examples/misc_controls_transform.html index bee7323cb26399..9c2c0a08674668 100644 --- a/examples/misc_controls_transform.html +++ b/examples/misc_controls_transform.html @@ -60,8 +60,8 @@ light.position.set( 1, 1, 1 ); scene.add( light ); - - var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif', THREE.UVMapping, render ); + var texture = new THREE.TextureLoader().load( 'textures/crate.gif', render ); + texture.mapping = THREE.UVMapping; texture.anisotropy = renderer.getMaxAnisotropy(); var geometry = new THREE.BoxGeometry( 200, 200, 200 ); diff --git a/examples/misc_fps.html b/examples/misc_fps.html index 7827e30a101379..f1f69bfa5ceb1d 100644 --- a/examples/misc_fps.html +++ b/examples/misc_fps.html @@ -232,7 +232,7 @@ function makePlatform( jsonUrl, textureUrl, textureQuality ) { var placeholder = new THREE.Object3D(); - var texture = THREE.ImageUtils.loadTexture( textureUrl ); + var texture = new THREE.TextureLoader().load( textureUrl ); texture.minFilter = THREE.LinearFilter; texture.anisotropy = textureQuality; diff --git a/examples/misc_ubiquity_test.html b/examples/misc_ubiquity_test.html index f3116755041f2a..6bbf3c1878a55c 100644 --- a/examples/misc_ubiquity_test.html +++ b/examples/misc_ubiquity_test.html @@ -145,7 +145,9 @@ // SPRITES - THREE.ImageUtils.loadTexture( 'textures/sprite.png', null, function ( texture ) { + var textureLoader = new THREE.TextureLoader(); + + textureLoader.load( 'textures/sprite.png', function ( texture ) { var material = new THREE.SpriteMaterial( { map: texture, transparent: true } ); @@ -159,7 +161,7 @@ scene.add( sprite ); } - + } ); for ( var i = 0; i < 50; i ++ ) { diff --git a/examples/misc_ubiquity_test2.html b/examples/misc_ubiquity_test2.html index 0827c736400ad4..974a9746b2c768 100644 --- a/examples/misc_ubiquity_test2.html +++ b/examples/misc_ubiquity_test2.html @@ -47,10 +47,11 @@ scene = new THREE.Scene(); + var textureLoader = new THREE.TextureLoader(); // MESH - Repeat Pattern - texture = THREE.ImageUtils.loadTexture( 'textures/UV_Grid_Sm.jpg' ); + texture = textureLoader.load( 'textures/UV_Grid_Sm.jpg' ); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; @@ -63,7 +64,7 @@ // SPRITES - from Sprite Sheet - texture1 = THREE.ImageUtils.loadTexture( 'textures/UV_Grid_Sm.jpg', undefined, function() { + texture1 = textureLoader.load( 'textures/UV_Grid_Sm.jpg', function() { texture1.wrapS = THREE.ClampToEdgeWrapping; texture1.wrapT = THREE.ClampToEdgeWrapping; @@ -99,7 +100,7 @@ // SPRITES - Repeat Pattern - texture2 = THREE.ImageUtils.loadTexture( 'textures/sprite0.jpg' ); + texture2 = textureLoader.load( 'textures/sprite0.jpg' ); texture2.wrapS = THREE.RepeatWrapping; texture2.wrapT = THREE.RepeatWrapping; @@ -123,7 +124,7 @@ // SPRITES - PNG - texture3 = THREE.ImageUtils.loadTexture( 'textures/sprite1.png' ); + texture3 = textureLoader.load( 'textures/sprite1.png' ); texture3.wrapS = THREE.ClampToEdgeWrapping; texture3.wrapT = THREE.ClampToEdgeWrapping; diff --git a/examples/webgl_buffergeometry_custom_attributes_particles.html b/examples/webgl_buffergeometry_custom_attributes_particles.html index add1071ca8ef2c..d44b8a3be0bf9e 100644 --- a/examples/webgl_buffergeometry_custom_attributes_particles.html +++ b/examples/webgl_buffergeometry_custom_attributes_particles.html @@ -101,7 +101,7 @@ uniforms = { color: { type: "c", value: new THREE.Color( 0xffffff ) }, - texture: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/spark1.png" ) } + texture: { type: "t", value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) } }; diff --git a/examples/webgl_buffergeometry_instancing_billboards.html b/examples/webgl_buffergeometry_instancing_billboards.html index b217780ab90d24..49a6ea13c65897 100644 --- a/examples/webgl_buffergeometry_instancing_billboards.html +++ b/examples/webgl_buffergeometry_instancing_billboards.html @@ -153,7 +153,7 @@ material = new THREE.RawShaderMaterial( { uniforms: { - map: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/circle.png" ) } + map: { type: "t", value: new THREE.TextureLoader().load( "textures/sprites/circle.png" ) } }, vertexShader: document.getElementById( 'vshader' ).textContent, fragmentShader: document.getElementById( 'fshader' ).textContent, diff --git a/examples/webgl_buffergeometry_instancing_dynamic.html b/examples/webgl_buffergeometry_instancing_dynamic.html index c1c331334a9e86..e1157cf1b21b08 100644 --- a/examples/webgl_buffergeometry_instancing_dynamic.html +++ b/examples/webgl_buffergeometry_instancing_dynamic.html @@ -241,7 +241,7 @@ geometry.addAttribute( 'orientation', orientations ); // per mesh orientation // material - var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif' ); + var texture = new THREE.TextureLoader().load( 'textures/crate.gif' ); texture.anisotropy = renderer.getMaxAnisotropy(); var material = new THREE.RawShaderMaterial( { diff --git a/examples/webgl_buffergeometry_instancing_interleaved_dynamic.html b/examples/webgl_buffergeometry_instancing_interleaved_dynamic.html index 272a48ada40e4b..a2f54120876cbe 100644 --- a/examples/webgl_buffergeometry_instancing_interleaved_dynamic.html +++ b/examples/webgl_buffergeometry_instancing_interleaved_dynamic.html @@ -211,7 +211,7 @@ geometry.addAttribute( 'orientation', orientations ); // per mesh orientation // material - var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif' ); + var texture = new THREE.TextureLoader().load( 'textures/crate.gif' ); texture.anisotropy = renderer.getMaxAnisotropy(); var material = new THREE.RawShaderMaterial( { diff --git a/examples/webgl_custom_attributes.html b/examples/webgl_custom_attributes.html index 61b91606046ee6..e9c571aa51ee6c 100644 --- a/examples/webgl_custom_attributes.html +++ b/examples/webgl_custom_attributes.html @@ -106,7 +106,7 @@ amplitude: { type: "f", value: 1.0 }, color: { type: "c", value: new THREE.Color( 0xff2200 ) }, - texture: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/water.jpg" ) }, + texture: { type: "t", value: new THREE.TextureLoader().load( "textures/water.jpg" ) }, }; diff --git a/examples/webgl_custom_attributes_points.html b/examples/webgl_custom_attributes_points.html index f8eb42a0349727..15aa00f2ad2f3b 100644 --- a/examples/webgl_custom_attributes_points.html +++ b/examples/webgl_custom_attributes_points.html @@ -143,7 +143,7 @@ uniforms: { amplitude: { type: "f", value: 1.0 }, color: { type: "c", value: new THREE.Color( 0xffffff ) }, - texture: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/spark1.png" ) } + texture: { type: "t", value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) } }, vertexShader: document.getElementById( 'vertexshader' ).textContent, fragmentShader: document.getElementById( 'fragmentshader' ).textContent, diff --git a/examples/webgl_custom_attributes_points2.html b/examples/webgl_custom_attributes_points2.html index 3dcc14a4b5f8f7..64a1eb1c848218 100644 --- a/examples/webgl_custom_attributes_points2.html +++ b/examples/webgl_custom_attributes_points2.html @@ -138,7 +138,7 @@ // - var texture = THREE.ImageUtils.loadTexture( "textures/sprites/disc.png" ); + var texture = new THREE.TextureLoader().load( "textures/sprites/disc.png" ); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; diff --git a/examples/webgl_custom_attributes_points3.html b/examples/webgl_custom_attributes_points3.html index 722e3d94589a60..7ef51083121b00 100644 --- a/examples/webgl_custom_attributes_points3.html +++ b/examples/webgl_custom_attributes_points3.html @@ -210,7 +210,7 @@ // - var texture = THREE.ImageUtils.loadTexture( "textures/sprites/ball.png" ); + var texture = new THREE.TextureLoader().load( "textures/sprites/ball.png" ); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; diff --git a/examples/webgl_geometries.html b/examples/webgl_geometries.html index 4aa39c2218893d..5a3f99de67fa96 100644 --- a/examples/webgl_geometries.html +++ b/examples/webgl_geometries.html @@ -49,7 +49,7 @@ light.position.set( 0, 1, 0 ); scene.add( light ); - var map = THREE.ImageUtils.loadTexture( 'textures/UV_Grid_Sm.jpg' ); + var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' ); map.wrapS = map.wrapT = THREE.RepeatWrapping; map.anisotropy = 16; diff --git a/examples/webgl_geometries2.html b/examples/webgl_geometries2.html index 208b16edc88460..e1f670088628a2 100644 --- a/examples/webgl_geometries2.html +++ b/examples/webgl_geometries2.html @@ -54,7 +54,7 @@ light.position.set( 0, 0, 1 ); scene.add( light ); - var map = THREE.ImageUtils.loadTexture( 'textures/UV_Grid_Sm.jpg' ); + var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' ); map.wrapS = map.wrapT = THREE.RepeatWrapping; map.anisotropy = 16; diff --git a/examples/webgl_geometry_convex.html b/examples/webgl_geometry_convex.html index 205e31a25468a4..e0754961628126 100644 --- a/examples/webgl_geometry_convex.html +++ b/examples/webgl_geometry_convex.html @@ -49,7 +49,7 @@ light.position.set( 0, 1, 0 ); scene.add( light ); - var map = THREE.ImageUtils.loadTexture( 'textures/UV_Grid_Sm.jpg' ); + var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' ); map.wrapS = map.wrapT = THREE.RepeatWrapping; map.anisotropy = 16; diff --git a/examples/webgl_geometry_cube.html b/examples/webgl_geometry_cube.html index 3bbb5705e4c4f1..6608eb2f688a6e 100644 --- a/examples/webgl_geometry_cube.html +++ b/examples/webgl_geometry_cube.html @@ -30,7 +30,7 @@ scene = new THREE.Scene(); - var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif' ); + var texture = new THREE.TextureLoader().load( 'textures/crate.gif' ); var geometry = new THREE.BoxGeometry( 200, 200, 200 ); var material = new THREE.MeshBasicMaterial( { map: texture } ); diff --git a/examples/webgl_geometry_dynamic.html b/examples/webgl_geometry_dynamic.html index e6bb32574a39ba..e07a95f63392bb 100644 --- a/examples/webgl_geometry_dynamic.html +++ b/examples/webgl_geometry_dynamic.html @@ -94,7 +94,7 @@ } - var texture = THREE.ImageUtils.loadTexture( "textures/water.jpg" ); + var texture = new THREE.TextureLoader().load( "textures/water.jpg" ); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 5, 5 ); diff --git a/examples/webgl_geometry_minecraft.html b/examples/webgl_geometry_minecraft.html index 072248e068599a..a70a1554d28d29 100644 --- a/examples/webgl_geometry_minecraft.html +++ b/examples/webgl_geometry_minecraft.html @@ -181,7 +181,7 @@ var geometry = new THREE.BufferGeometry().fromGeometry( tmpGeometry ); geometry.computeBoundingSphere(); - var texture = THREE.ImageUtils.loadTexture( 'textures/minecraft/atlas.png' ); + var texture = new THREE.TextureLoader().load( 'textures/minecraft/atlas.png' ); texture.magFilter = THREE.NearestFilter; texture.minFilter = THREE.LinearMipMapLinearFilter; diff --git a/examples/webgl_geometry_minecraft_ao.html b/examples/webgl_geometry_minecraft_ao.html index fe1978c2a937fa..ab9bda25353d11 100644 --- a/examples/webgl_geometry_minecraft_ao.html +++ b/examples/webgl_geometry_minecraft_ao.html @@ -96,7 +96,7 @@ scene.fog = new THREE.FogExp2( 0xffffff, 0.00015 ); // sides - + var light = new THREE.Color( 0xffffff ); var shadow = new THREE.Color( 0x505050 ); @@ -199,7 +199,7 @@ colors[ 0 ] = c === 0 ? shadow : light; colors[ 1 ] = d === 0 ? shadow : light; colors[ 2 ] = a === 0 ? shadow : light; - + geometry.merge( py2Geometry, matrix ); } else { @@ -213,7 +213,7 @@ colors[ 0 ] = b === 0 ? shadow : light; colors[ 1 ] = c === 0 ? shadow : light; colors[ 2 ] = d === 0 ? shadow : light; - + geometry.merge( pyGeometry, matrix ); } @@ -274,7 +274,7 @@ } - var texture = THREE.ImageUtils.loadTexture( 'textures/minecraft/atlas.png' ); + var texture = new THREE.TextureLoader().load( 'textures/minecraft/atlas.png' ); texture.magFilter = THREE.NearestFilter; texture.minFilter = THREE.LinearMipMapLinearFilter; diff --git a/examples/webgl_geometry_nurbs.html b/examples/webgl_geometry_nurbs.html index 3ab232f20eea2b..7c55c53f31da7b 100644 --- a/examples/webgl_geometry_nurbs.html +++ b/examples/webgl_geometry_nurbs.html @@ -152,7 +152,7 @@ var knots2 = [0, 0, 0, 0, 1, 1, 1, 1]; var nurbsSurface = new THREE.NURBSSurface(degree1, degree2, knots1, knots2, nsControlPoints); - var map = THREE.ImageUtils.loadTexture( 'textures/UV_Grid_Sm.jpg' ); + var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' ); map.wrapS = map.wrapT = THREE.RepeatWrapping; map.anisotropy = 16; diff --git a/examples/webgl_geometry_teapot.html b/examples/webgl_geometry_teapot.html index 72d65267d5a4f6..1387b6f4d04ae2 100644 --- a/examples/webgl_geometry_teapot.html +++ b/examples/webgl_geometry_teapot.html @@ -115,7 +115,7 @@ cameraControls.addEventListener( 'change', render ); // TEXTURE MAP - var textureMap = THREE.ImageUtils.loadTexture( 'textures/UV_Grid_Sm.jpg' ); + var textureMap = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' ); textureMap.wrapS = textureMap.wrapT = THREE.RepeatWrapping; textureMap.anisotropy = 16; diff --git a/examples/webgl_hdr.html b/examples/webgl_hdr.html index 204482832ff195..0f2b42b8e8b96b 100644 --- a/examples/webgl_hdr.html +++ b/examples/webgl_hdr.html @@ -126,7 +126,7 @@ scene = new THREE.Scene(); - var texture = THREE.ImageUtils.loadTexture( "textures/memorial.png" ); + var texture = new THREE.TextureLoader().load( "textures/memorial.png" ); texture.minFilter = THREE.LinearFilter; texture.magFilter = THREE.NearestFilter; diff --git a/examples/webgl_interactive_points.html b/examples/webgl_interactive_points.html index e4ac7b7d5a4450..a2a556c7c53498 100644 --- a/examples/webgl_interactive_points.html +++ b/examples/webgl_interactive_points.html @@ -137,7 +137,7 @@ uniforms: { color: { type: "c", value: new THREE.Color( 0xffffff ) }, - texture: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/disc.png" ) } + texture: { type: "t", value: new THREE.TextureLoader().load( "textures/sprites/disc.png" ) } }, vertexShader: document.getElementById( 'vertexshader' ).textContent, fragmentShader: document.getElementById( 'fragmentshader' ).textContent, diff --git a/examples/webgl_interactive_voxelpainter.html b/examples/webgl_interactive_voxelpainter.html index 5223bacd06605e..68a9e07992283b 100644 --- a/examples/webgl_interactive_voxelpainter.html +++ b/examples/webgl_interactive_voxelpainter.html @@ -67,7 +67,7 @@ // cubes cubeGeo = new THREE.BoxGeometry( 50, 50, 50 ); - cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c, shading: THREE.FlatShading, map: THREE.ImageUtils.loadTexture( "textures/square-outline-textured.png" ) } ); + cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c, map: new THREE.TextureLoader().load( "textures/square-outline-textured.png" ) } ); // grid diff --git a/examples/webgl_lensflares.html b/examples/webgl_lensflares.html index 279cf1db7795cf..67b348b1c89866 100644 --- a/examples/webgl_lensflares.html +++ b/examples/webgl_lensflares.html @@ -123,10 +123,11 @@ dirLight.color.setHSL( 0.1, 0.7, 0.5 ); // lens flares + var textureLoader = new THREE.TextureLoader(); - var textureFlare0 = THREE.ImageUtils.loadTexture( "textures/lensflare/lensflare0.png" ); - var textureFlare2 = THREE.ImageUtils.loadTexture( "textures/lensflare/lensflare2.png" ); - var textureFlare3 = THREE.ImageUtils.loadTexture( "textures/lensflare/lensflare3.png" ); + var textureFlare0 = textureLoader.load( "textures/lensflare/lensflare0.png" ); + var textureFlare2 = textureLoader.load( "textures/lensflare/lensflare2.png" ); + var textureFlare3 = textureLoader.load( "textures/lensflare/lensflare3.png" ); addLight( 0.55, 0.9, 0.5, 5000, 0, -1000 ); addLight( 0.08, 0.8, 0.5, 0, 0, -1000 ); diff --git a/examples/webgl_lights_pointlights2.html b/examples/webgl_lights_pointlights2.html index 31b911f7275eae..ea779a0d094c72 100644 --- a/examples/webgl_lights_pointlights2.html +++ b/examples/webgl_lights_pointlights2.html @@ -115,13 +115,14 @@ // TEXTURES + var textureLoader = new THREE.TextureLoader(); - var texture = THREE.ImageUtils.loadTexture( "textures/disturb.jpg" ); + var texture = textureLoader.load( "textures/disturb.jpg" ); texture.repeat.set( 20, 10 ); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.format = THREE.RGBFormat; - var texture2 = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" ); + var texture2 = textureLoader.load( "textures/planets/moon_1024.jpg" ); texture2.repeat.set( 2, 1 ); texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping; texture2.format = THREE.RGBFormat; @@ -129,7 +130,7 @@ // MATERIALS var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture } ); - var objectMaterial = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0xffffff, metal: true, map: texture2 } ); + var objectMaterial = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0xffffff, map: texture2 } ); // GROUND diff --git a/examples/webgl_loader_md2.html b/examples/webgl_loader_md2.html index a061c6aedec583..6696efa21830ae 100644 --- a/examples/webgl_loader_md2.html +++ b/examples/webgl_loader_md2.html @@ -119,7 +119,7 @@ // GROUND - var gt = THREE.ImageUtils.loadTexture( "textures/terrain/grasslight-big.jpg" ); + var gt = new THREE.TextureLoader().load( "textures/terrain/grasslight-big.jpg" ); var gg = new THREE.PlaneBufferGeometry( 2000, 2000 ); var gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } ); diff --git a/examples/webgl_loader_md2_control.html b/examples/webgl_loader_md2_control.html index 03164fcd6ee459..ce3ea879f75d9c 100644 --- a/examples/webgl_loader_md2_control.html +++ b/examples/webgl_loader_md2_control.html @@ -121,7 +121,7 @@ // GROUND - var gt = THREE.ImageUtils.loadTexture( "textures/terrain/grasslight-big.jpg" ); + var gt = new THREE.TextureLoader().load( "textures/terrain/grasslight-big.jpg" ); var gg = new THREE.PlaneBufferGeometry( 16000, 16000 ); var gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } ); diff --git a/examples/webgl_marchingcubes.html b/examples/webgl_marchingcubes.html index 16efe200ebfa3d..325eedd1fda93d 100644 --- a/examples/webgl_marchingcubes.html +++ b/examples/webgl_marchingcubes.html @@ -261,10 +261,12 @@ path + 'pz' + format, path + 'nz' + format ]; - var reflectionCube = new THREE.CubeTextureLoader().load( urls ); + var cubeTextureLoader = new THREE.CubeTextureLoader(); + + var reflectionCube = cubeTextureLoader.load( urls ); reflectionCube.format = THREE.RGBFormat; - var refractionCube = new THREE.CubeTextureLoader().load( urls ); + var refractionCube = cubeTextureLoader.load( urls ); reflectionCube.format = THREE.RGBFormat; refractionCube.mapping = THREE.CubeRefractionMapping; @@ -286,7 +288,7 @@ dottedMaterial2.uniforms.uBaseColor.value.setRGB( 0, 0, 0 ); dottedMaterial2.uniforms.uLineColor1.value.setHSL( 0.05, 1.0, 0.5 ); - var texture = THREE.ImageUtils.loadTexture( "textures/UV_Grid_Sm.jpg" ); + var texture = new THREE.TextureLoader().load( "textures/UV_Grid_Sm.jpg" ); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; var materials = { diff --git a/examples/webgl_materials_blending_custom.html b/examples/webgl_materials_blending_custom.html index 55e2c46b8924fe..559d1dc71c0b6b 100644 --- a/examples/webgl_materials_blending_custom.html +++ b/examples/webgl_materials_blending_custom.html @@ -103,6 +103,10 @@ scene = new THREE.Scene(); + // TEXTURE LOADER + + var textureLoader = new THREE.TextureLoader(); + // BACKGROUND IMAGES var x = document.createElement( "canvas" ); @@ -148,23 +152,23 @@ mapBg1.repeat.set( 128, 64 ); mapBg1.needsUpdate = true; - var mapBg2 = THREE.ImageUtils.loadTexture( "textures/disturb.jpg" ); + var mapBg2 = textureLoader.load( "textures/disturb.jpg" ); mapBg2.wrapS = mapBg2.wrapT = THREE.RepeatWrapping; mapBg2.repeat.set( 8, 4 ); - var mapBg3 = THREE.ImageUtils.loadTexture( "textures/crate.gif" ); + var mapBg3 = textureLoader.load( "textures/crate.gif" ); mapBg3.wrapS = mapBg3.wrapT = THREE.RepeatWrapping; mapBg3.repeat.set( 32, 16 ); - var mapBg4 = THREE.ImageUtils.loadTexture( "textures/lava/lavatile.jpg" ); + var mapBg4 = textureLoader.load( "textures/lava/lavatile.jpg" ); mapBg4.wrapS = mapBg4.wrapT = THREE.RepeatWrapping; mapBg4.repeat.set( 8, 4 ); - var mapBg5 = THREE.ImageUtils.loadTexture( "textures/water.jpg" ); + var mapBg5 = textureLoader.load( "textures/water.jpg" ); mapBg5.wrapS = mapBg5.wrapT = THREE.RepeatWrapping; mapBg5.repeat.set( 8, 4 ); - var mapBg6 = THREE.ImageUtils.loadTexture( "textures/lava/cloud.png" ); + var mapBg6 = textureLoader.load( "textures/lava/cloud.png" ); mapBg6.wrapS = mapBg6.wrapT = THREE.RepeatWrapping; mapBg6.repeat.set( 2, 1 ); @@ -188,10 +192,10 @@ for ( var i = 0; i < images.length; i ++ ) { - var map = THREE.ImageUtils.loadTexture( images[ i ] ); + var map = textureLoader.load( images[ i ] ); mapsNoPre.push( map ); - var mapPre = THREE.ImageUtils.loadTexture( images[ i ] ); + var mapPre = textureLoader.load( images[ i ] ); mapPre.premultiplyAlpha = true; mapPre.needsUpdate = true; mapsPre.push( mapPre ); diff --git a/examples/webgl_materials_bumpmap.html b/examples/webgl_materials_bumpmap.html index e205520cadb461..752ea3b5c7e7a0 100644 --- a/examples/webgl_materials_bumpmap.html +++ b/examples/webgl_materials_bumpmap.html @@ -115,7 +115,7 @@ // - var mapHeight = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" ); + var mapHeight = new THREE.TextureLoader().load( "obj/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" ); mapHeight.anisotropy = 4; mapHeight.repeat.set( 0.998, 0.998 ); diff --git a/examples/webgl_materials_bumpmap_skin.html b/examples/webgl_materials_bumpmap_skin.html index cd483d0b8c217b..b88e236ff071bf 100644 --- a/examples/webgl_materials_bumpmap_skin.html +++ b/examples/webgl_materials_bumpmap_skin.html @@ -192,19 +192,21 @@ function createScene( geometry, scale ) { - var mapHeight = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" ); + var textureLoader = new THREE.TextureLoader(); + + var mapHeight = textureLoader.load( "obj/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" ); mapHeight.anisotropy = 4; mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping; mapHeight.format = THREE.RGBFormat; - var mapSpecular = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-SPEC.jpg" ); + var mapSpecular = textureLoader.load( "obj/leeperrysmith/Map-SPEC.jpg" ); mapSpecular.anisotropy = 4; mapSpecular.wrapS = mapSpecular.wrapT = THREE.RepeatWrapping; mapSpecular.format = THREE.RGBFormat; - var mapColor = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" ); + var mapColor = textureLoader.load( "obj/leeperrysmith/Map-COL.jpg" ); mapColor.anisotropy = 4; mapColor.wrapS = mapColor.wrapT = THREE.RepeatWrapping; diff --git a/examples/webgl_materials_cubemap_dynamic.html b/examples/webgl_materials_cubemap_dynamic.html index ee1a7607832644..a4d4f2ba92b6fa 100644 --- a/examples/webgl_materials_cubemap_dynamic.html +++ b/examples/webgl_materials_cubemap_dynamic.html @@ -241,9 +241,10 @@ mlib.body.push( [ "Chrome", new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, envMap: cubeTarget, combine: THREE.MultiplyOperation } ) ] ); // FLARES + var textureLoader = new THREE.TextureLoader(); - flareA = THREE.ImageUtils.loadTexture( "textures/lensflare2.jpg" ); - flareB = THREE.ImageUtils.loadTexture( "textures/lensflare0.png" ); + flareA = textureLoader.load( "textures/lensflare2.jpg" ); + flareB = textureLoader.load( "textures/lensflare0.png" ); // CARS - VEYRON @@ -493,7 +494,7 @@ // GROUND - var texture = THREE.ImageUtils.loadTexture( "textures/cube/Park3Med/ny.jpg" ); + var texture = new THREE.TextureLoader().load( "textures/cube/Park3Med/ny.jpg" ); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 50, 50 ); diff --git a/examples/webgl_materials_cubemap_dynamic2.html b/examples/webgl_materials_cubemap_dynamic2.html index b4d68e099fd253..5129395c21edf1 100644 --- a/examples/webgl_materials_cubemap_dynamic2.html +++ b/examples/webgl_materials_cubemap_dynamic2.html @@ -45,14 +45,18 @@ lat = 0, onMouseDownLat = 0, phi = 0, theta = 0; - var texture = THREE.ImageUtils.loadTexture( 'textures/2294472375_24a3b8ef46_o.jpg', THREE.UVMapping, function () { + var textureLoader = new THREE.TextureLoader(); - init(); + textureLoader.load( 'textures/2294472375_24a3b8ef46_o.jpg', function ( texture ) { + + texture.mapping = THREE.UVMapping; + + init( texture ); animate(); } ); - function init() { + function init( texture ) { camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 ); @@ -67,7 +71,7 @@ renderer.setSize( window.innerWidth, window.innerHeight ); cubeCamera = new THREE.CubeCamera( 1, 1000, 256 ); - cubeCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter; + cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter; scene.add( cubeCamera ); document.body.appendChild( renderer.domElement ); diff --git a/examples/webgl_materials_displacementmap.html b/examples/webgl_materials_displacementmap.html index 2de8b28f5e530a..da1ee590a47985 100644 --- a/examples/webgl_materials_displacementmap.html +++ b/examples/webgl_materials_displacementmap.html @@ -136,13 +136,17 @@ var reflectionCube = new THREE.CubeTextureLoader().load( urls ); - // material + // textures + + var textureLoader = new THREE.TextureLoader(); - var normalMap = THREE.ImageUtils.loadTexture( "textures/normal/ninja/normal.jpg" ); + var normalMap = textureLoader.load( "textures/normal/ninja/normal.jpg" ); - var aoMap = THREE.ImageUtils.loadTexture( "textures/normal/ninja/ao.jpg" ); + var aoMap = textureLoader.load( "textures/normal/ninja/ao.jpg" ); - var displacementMap = THREE.ImageUtils.loadTexture( "textures/normal/ninja/displacement.jpg" ); + var displacementMap = textureLoader.load( "textures/normal/ninja/displacement.jpg" ); + + // material var material = new THREE.MeshPhongMaterial( { diff --git a/examples/webgl_materials_envmaps.html b/examples/webgl_materials_envmaps.html index c979ce9ac6f9f8..056d06ff4bd114 100644 --- a/examples/webgl_materials_envmaps.html +++ b/examples/webgl_materials_envmaps.html @@ -82,13 +82,14 @@ textureCube.format = THREE.RGBFormat; textureCube.mapping = THREE.CubeReflectionMapping; - textureEquirec = THREE.ImageUtils.loadTexture( "textures/2294472375_24a3b8ef46_o.jpg" ); - textureEquirec.format = THREE.RGBAFormat; + var textureLoader = new THREE.TextureLoader(); + + textureEquirec = textureLoader.load( "textures/2294472375_24a3b8ef46_o.jpg" ); textureEquirec.mapping = THREE.EquirectangularReflectionMapping; textureEquirec.magFilter = THREE.LinearFilter; textureEquirec.minFilter = THREE.LinearMipMapLinearFilter; - textureSphere = THREE.ImageUtils.loadTexture( "textures/metal.jpg" ); + textureSphere = textureLoader.load( "textures/metal.jpg" ); textureSphere.mapping = THREE.SphericalReflectionMapping; // Materials diff --git a/examples/webgl_materials_normalmap.html b/examples/webgl_materials_normalmap.html index ad135f471cc7d7..27f079fa274408 100644 --- a/examples/webgl_materials_normalmap.html +++ b/examples/webgl_materials_normalmap.html @@ -118,13 +118,15 @@ directionalLight.position.set( 1, -0.5, -1 ); scene.add( directionalLight ); + var textureLoader = new THREE.TextureLoader(); + var material = new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x222222, shininess: 35, - map: THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" ), - specularMap: THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-SPEC.jpg" ), - normalMap: THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ), + map: textureLoader.load( "obj/leeperrysmith/Map-COL.jpg" ), + specularMap: textureLoader.load( "obj/leeperrysmith/Map-SPEC.jpg" ), + normalMap: textureLoader.load( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ), normalScale: new THREE.Vector2( 0.8, 0.8 ) } ); diff --git a/examples/webgl_materials_parallaxmap.html b/examples/webgl_materials_parallaxmap.html index 9de97c4d1b6ca8..f0ce37420e795b 100644 --- a/examples/webgl_materials_parallaxmap.html +++ b/examples/webgl_materials_parallaxmap.html @@ -147,9 +147,12 @@ vertexShader: shader.vertexShader, uniforms: uniforms }; + + var textureLoader = new THREE.TextureLoader(); + material = new THREE.ShaderMaterial( parameters ); - material.map = THREE.ImageUtils.loadTexture( 'textures/brick_diffuse.jpg' ); - material.bumpMap = THREE.ImageUtils.loadTexture( 'textures/brick_bump.jpg' ); + material.map = textureLoader.load( 'textures/brick_diffuse.jpg' ); + material.bumpMap = textureLoader.load( 'textures/brick_bump.jpg' ); material.map.anisotropy = 4; material.bumpMap.anisotropy = 4; uniforms[ 'map' ].value = material.map; diff --git a/examples/webgl_materials_skin.html b/examples/webgl_materials_skin.html index de1d93b2d3cdfd..d7774b669aec56 100644 --- a/examples/webgl_materials_skin.html +++ b/examples/webgl_materials_skin.html @@ -122,10 +122,12 @@ var uniformsUV = THREE.UniformsUtils.clone( shader.uniforms ); - uniformsUV[ "tNormal" ].value = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ); + var textureLoader = new THREE.TextureLoader(); + + uniformsUV[ "tNormal" ].value = textureLoader.load( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ); uniformsUV[ "uNormalScale" ].value = -1.5; - uniformsUV[ "tDiffuse" ].value = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" ); + uniformsUV[ "tDiffuse" ].value = textureLoader.load( "obj/leeperrysmith/Map-COL.jpg" ); uniformsUV[ "passID" ].value = 0; diff --git a/examples/webgl_materials_texture_anisotropy.html b/examples/webgl_materials_texture_anisotropy.html index 1b7bc88ad4cca0..20323c685012d3 100644 --- a/examples/webgl_materials_texture_anisotropy.html +++ b/examples/webgl_materials_texture_anisotropy.html @@ -109,16 +109,18 @@ // GROUND + var textureLoader = new THREE.TextureLoader(); + var maxAnisotropy = renderer.getMaxAnisotropy(); - var texture1 = THREE.ImageUtils.loadTexture( "textures/crate.gif" ); + var texture1 = textureLoader.load( "textures/crate.gif" ); var material1 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture1 } ); texture1.anisotropy = maxAnisotropy; texture1.wrapS = texture1.wrapT = THREE.RepeatWrapping; texture1.repeat.set( 512, 512 ); - var texture2 = THREE.ImageUtils.loadTexture( "textures/crate.gif" ); + var texture2 = textureLoader.load( "textures/crate.gif" ); var material2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture2 } ); texture2.anisotropy = 1; diff --git a/examples/webgl_materials_texture_filters.html b/examples/webgl_materials_texture_filters.html index 3fff66a497bfbf..84356b5c215c76 100644 --- a/examples/webgl_materials_texture_filters.html +++ b/examples/webgl_materials_texture_filters.html @@ -185,13 +185,14 @@ }; - var texturePainting = THREE.ImageUtils.loadTexture( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", THREE.UVMapping, callbackPainting ), - texturePainting2 = new THREE.Texture(), - materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } ), - materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } ); + var texturePainting = new THREE.TextureLoader().load( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", callbackPainting ); + var texturePainting2 = new THREE.Texture(); + var materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } ); + var materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } ); texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter; texturePainting.minFilter = texturePainting.magFilter = THREE.LinearFilter; + texturePainting.mapping = THREE.UVMapping; renderer = new THREE.WebGLRenderer( { antialias: true } ); diff --git a/examples/webgl_materials_texture_manualmipmap.html b/examples/webgl_materials_texture_manualmipmap.html index bb21b00d8602de..6efc8dafe7085c 100644 --- a/examples/webgl_materials_texture_manualmipmap.html +++ b/examples/webgl_materials_texture_manualmipmap.html @@ -199,14 +199,14 @@ }; - var texturePainting1 = THREE.ImageUtils.loadTexture( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", THREE.UVMapping, callbackPainting ), - texturePainting2 = new THREE.Texture(), - materialPainting1 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting1 } ), - materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } ); + var texturePainting1 = new THREE.TextureLoader().load( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", callbackPainting ); + var texturePainting2 = new THREE.Texture(); + var materialPainting1 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting1 } ); + var materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } ); texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter; texturePainting1.minFilter = texturePainting1.magFilter = THREE.LinearFilter; - + texturePainting1.mapping = THREE.UVMapping; renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setClearColor( scene1.fog.color ); diff --git a/examples/webgl_materials_variations_basic.html b/examples/webgl_materials_variations_basic.html index 01b5a4913c7a41..1c224cfaadc3a7 100644 --- a/examples/webgl_materials_variations_basic.html +++ b/examples/webgl_materials_variations_basic.html @@ -63,7 +63,7 @@ // Materials - var imgTexture = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" ); + var imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" ); imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping; imgTexture.anisotropy = 16; imgTexture = null; diff --git a/examples/webgl_materials_variations_lambert.html b/examples/webgl_materials_variations_lambert.html index 64a8a2cf3f3228..fc75999b168ae3 100644 --- a/examples/webgl_materials_variations_lambert.html +++ b/examples/webgl_materials_variations_lambert.html @@ -63,7 +63,7 @@ // Materials - var imgTexture = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" ); + var imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" ); imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping; imgTexture.anisotropy = 16; imgTexture = null; diff --git a/examples/webgl_materials_variations_phong.html b/examples/webgl_materials_variations_phong.html index 9bd5c7320ec0bd..9e0ab33485f3a2 100644 --- a/examples/webgl_materials_variations_phong.html +++ b/examples/webgl_materials_variations_phong.html @@ -64,7 +64,7 @@ // Materials - var imgTexture = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" ); + var imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" ); imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping; imgTexture.anisotropy = 16; imgTexture = null; diff --git a/examples/webgl_materials_variations_standard.html b/examples/webgl_materials_variations_standard.html index bc5f05ded46a83..82713300b53f94 100644 --- a/examples/webgl_materials_variations_standard.html +++ b/examples/webgl_materials_variations_standard.html @@ -63,7 +63,7 @@ // Materials - var imgTexture = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" ); + var imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" ); imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping; imgTexture.anisotropy = 16; imgTexture = null; diff --git a/examples/webgl_materials_variations_standard2.html b/examples/webgl_materials_variations_standard2.html index ab1af946ad4d4b..a280d906a5777d 100644 --- a/examples/webgl_materials_variations_standard2.html +++ b/examples/webgl_materials_variations_standard2.html @@ -63,7 +63,7 @@ // Materials - var imgTexture = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" ); + var imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" ); imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping; imgTexture.anisotropy = 16; imgTexture = null; diff --git a/examples/webgl_nearestneighbour.html b/examples/webgl_nearestneighbour.html index 7eb5f275e68d77..f60e83dee27639 100644 --- a/examples/webgl_nearestneighbour.html +++ b/examples/webgl_nearestneighbour.html @@ -94,14 +94,16 @@ controls.movementSpeed = 100; controls.lookSpeed = 0.1; + var textureLoader = new THREE.TextureLoader(); + var materials = [ - new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/cube/skybox/px.jpg' ) } ), // right - new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/cube/skybox/nx.jpg' ) } ), // left - new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/cube/skybox/py.jpg' ) } ), // top - new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/cube/skybox/ny.jpg' ) } ), // bottom - new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/cube/skybox/pz.jpg' ) } ), // back - new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/cube/skybox/nz.jpg' ) } ) // front + new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/px.jpg' ) } ), // right + new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/nx.jpg' ) } ), // left + new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/py.jpg' ) } ), // top + new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/ny.jpg' ) } ), // bottom + new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/pz.jpg' ) } ), // back + new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/nz.jpg' ) } ) // front ]; @@ -117,7 +119,7 @@ document.body.appendChild( renderer.domElement ); // create the custom shader - var imagePreviewTexture = THREE.ImageUtils.loadTexture( 'textures/crate.gif'); + var imagePreviewTexture = textureLoader.load( 'textures/crate.gif'); imagePreviewTexture.minFilter = THREE.LinearMipMapLinearFilter; imagePreviewTexture.magFilter = THREE.LinearFilter; diff --git a/examples/webgl_objects_update.html b/examples/webgl_objects_update.html index 32d43e7d025e2e..594f7a89f96d07 100644 --- a/examples/webgl_objects_update.html +++ b/examples/webgl_objects_update.html @@ -27,7 +27,7 @@ var container, stats; var camera, scene, renderer; - + var objectNewGeometry; var objectToggleAddRemove; var objectRandomizeFaces; @@ -53,7 +53,7 @@ light.position.set( 0, 1, 0 ); scene.add( light ); - var map = THREE.ImageUtils.loadTexture( 'textures/UV_Grid_Sm.jpg' ); + var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' ); map.wrapS = map.wrapT = THREE.RepeatWrapping; map.anisotropy = 16; @@ -122,7 +122,7 @@ window.addEventListener( 'resize', onWindowResize, false ); } - + function createObject(material, segments ){ var geometry = createGeometry(segments); var mesh = new THREE.Mesh( geometry , material); @@ -135,7 +135,7 @@ 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))); return geometry; } - + function createMeshFaceMaterial(){ var materials = []; materials.push(new THREE.MeshBasicMaterial({color: 0xff0000})); @@ -167,12 +167,12 @@ stats.update(); } - + function randomizeFaces(object){ for(var i = 0,l=object.geometry.faces.length;i - + @@ -113,8 +113,10 @@ smokeType = ParticleSystemIDs.Smoke1; - var smoke1Atlas = new PHOTONS.Atlas( THREE.ImageUtils.loadTexture( 'textures/campfire/smokeparticle.png' ), true ); - var smoke2Atlas = PHOTONS.Atlas.createGridAtlas( THREE.ImageUtils.loadTexture( 'textures/campfire/smokeparticles.png' ), 0.0, 1.0, 1.0, 0.0, 4.0, 4.0, false, true ); + var textureLoader = new THREE.TextureLoader(); + + var smoke1Atlas = new PHOTONS.Atlas( textureLoader.load( 'textures/campfire/smokeparticle.png' ), true ); + var smoke2Atlas = PHOTONS.Atlas.createGridAtlas( textureLoader.load( 'textures/campfire/smokeparticles.png' ), 0.0, 1.0, 1.0, 0.0, 4.0, 4.0, false, true ); var altVertexShader = [ @@ -316,7 +318,7 @@ var particleSystemParams = { material: flameMaterial, - particleAtlas : PHOTONS.Atlas.createGridAtlas( THREE.ImageUtils.loadTexture( 'textures/campfire/fireloop3.jpg' ), 0.0, 1.0, 1.0, 0.0, 8.0, 8.0, false, true ), + particleAtlas : PHOTONS.Atlas.createGridAtlas( new THREE.TextureLoader().load( 'textures/campfire/fireloop3.jpg' ), 0.0, 1.0, 1.0, 0.0, 8.0, 8.0, false, true ), particleReleaseRate : 3, particleLifeSpan : 3, lifespan : 0 @@ -380,7 +382,7 @@ particleSystemParams = { material: emberMaterial, - particleAtlas : new PHOTONS.Atlas( THREE.ImageUtils.loadTexture( 'textures/campfire/Puff.png' ), true ), + particleAtlas : new PHOTONS.Atlas( new THREE.TextureLoader().load( 'textures/campfire/Puff.png' ), true ), particleReleaseRate : 18, particleLifeSpan : 3, lifespan : 0 @@ -543,7 +545,7 @@ // create ground // --------------------- - var groundTexture = new THREE.ImageUtils.loadTexture( 'textures/campfire/grass1.jpg' ); + var groundTexture = new THREE.TextureLoader().load( 'textures/campfire/grass1.jpg' ); groundTexture.wrapS = THREE.RepeatWrapping; groundTexture.wrapT = THREE.RepeatWrapping; groundTexture.repeat.set( 10, 10 ); @@ -581,7 +583,7 @@ function( mesh ) { - mesh.castShadow = true; + mesh.castShadow = true; mesh.receiveShadow = false; }, @@ -614,7 +616,7 @@ function( mesh ) { - mesh.castShadow = true; + mesh.castShadow = true; mesh.receiveShadow = true; }, @@ -661,7 +663,7 @@ function( mesh ) { - mesh.castShadow = true; + mesh.castShadow = true; mesh.receiveShadow = true; }, diff --git a/examples/webgl_points_billboards.html b/examples/webgl_points_billboards.html index 376a99a3f90076..e5a2bdd2f94c76 100644 --- a/examples/webgl_points_billboards.html +++ b/examples/webgl_points_billboards.html @@ -68,7 +68,7 @@ geometry = new THREE.Geometry(); - sprite = THREE.ImageUtils.loadTexture( "textures/sprites/disc.png" ); + sprite = new THREE.TextureLoader().load( "textures/sprites/disc.png" ); for ( i = 0; i < 10000; i ++ ) { diff --git a/examples/webgl_points_billboards_colors.html b/examples/webgl_points_billboards_colors.html index 97a26cc7195c55..bc00b1fa529958 100644 --- a/examples/webgl_points_billboards_colors.html +++ b/examples/webgl_points_billboards_colors.html @@ -68,7 +68,7 @@ geometry = new THREE.Geometry(); - sprite = THREE.ImageUtils.loadTexture( "textures/sprites/ball.png" ); + sprite = new THREE.TextureLoader().load( "textures/sprites/ball.png" ); for ( i = 0; i < 5000; i ++ ) { diff --git a/examples/webgl_points_sprites.html b/examples/webgl_points_sprites.html index eadb69cc883f72..d7afdcb34b534a 100644 --- a/examples/webgl_points_sprites.html +++ b/examples/webgl_points_sprites.html @@ -69,11 +69,13 @@ geometry = new THREE.Geometry(); - sprite1 = THREE.ImageUtils.loadTexture( "textures/sprites/snowflake1.png" ); - sprite2 = THREE.ImageUtils.loadTexture( "textures/sprites/snowflake2.png" ); - sprite3 = THREE.ImageUtils.loadTexture( "textures/sprites/snowflake3.png" ); - sprite4 = THREE.ImageUtils.loadTexture( "textures/sprites/snowflake4.png" ); - sprite5 = THREE.ImageUtils.loadTexture( "textures/sprites/snowflake5.png" ); + var textureLoader = new THREE.TextureLoader(); + + sprite1 = textureLoader.load( "textures/sprites/snowflake1.png" ); + sprite2 = textureLoader.load( "textures/sprites/snowflake2.png" ); + sprite3 = textureLoader.load( "textures/sprites/snowflake3.png" ); + sprite4 = textureLoader.load( "textures/sprites/snowflake4.png" ); + sprite5 = textureLoader.load( "textures/sprites/snowflake5.png" ); for ( i = 0; i < 10000; i ++ ) { diff --git a/examples/webgl_postprocessing_nodes.html b/examples/webgl_postprocessing_nodes.html index ceec1876871706..7cb3901041e465 100644 --- a/examples/webgl_postprocessing_nodes.html +++ b/examples/webgl_postprocessing_nodes.html @@ -14,7 +14,7 @@ text-align:center; overflow: hidden; } - + #info { color: #fff; position: absolute; @@ -29,7 +29,7 @@
three.js - Node-Based Post-Processing
- + @@ -92,10 +92,12 @@ var param = { example: 'color-adjustment' }; - var lensflare2 = new THREE.TextureLoader().load( 'textures/lensflare2.jpg' ); + var textureLoader = new THREE.TextureLoader(); + + var lensflare2 = textureLoader.load( 'textures/lensflare2.jpg' ); lensflare2.wrapS = lensflare2.wrapT = THREE.RepeatWrapping; - var decalNormal = new THREE.TextureLoader().load( 'textures/decal/decal-normal.jpg' ); + var decalNormal = textureLoader.load( 'textures/decal/decal-normal.jpg' ); decalNormal.wrapS = decalNormal.wrapT = THREE.RepeatWrapping; init(); diff --git a/examples/webgl_sandbox.html b/examples/webgl_sandbox.html index c64efb077d1f9d..63780515f1139f 100644 --- a/examples/webgl_sandbox.html +++ b/examples/webgl_sandbox.html @@ -78,11 +78,11 @@ var fragmentShader = shader.fragmentShader; var texture1 = new THREE.CanvasTexture( generateTexture( 0, 0.5, 1 ), THREE.UVMapping ); - var texture2 = THREE.ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ); + var texture2 = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' ); var materials = [ - new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } ), + new THREE.MeshNormalMaterial(), new THREE.MeshDepthMaterial(), new THREE.MeshBasicMaterial( { color: 0x0066ff, blending: THREE.AdditiveBlending, transparent: true, depthWrite: false } ), new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ), @@ -90,8 +90,7 @@ new THREE.MeshBasicMaterial( { map: texture2 } ), new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, transparent: true } ), new THREE.MeshLambertMaterial( { map: texture2 } ), - new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading } ), - new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.SmoothShading } ), + new THREE.MeshLambertMaterial( { color: 0xdddddd } ), new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ), new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading } ) diff --git a/examples/webgl_shader2.html b/examples/webgl_shader2.html index b061f65a4ec34c..8a5aaa4ef4a7a6 100644 --- a/examples/webgl_shader2.html +++ b/examples/webgl_shader2.html @@ -199,7 +199,7 @@ uniforms2 = { time: { type: "f", value: 1.0 }, resolution: { type: "v2", value: new THREE.Vector2() }, - texture: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/disturb.jpg" ) } + texture: { type: "t", value: new THREE.TextureLoader().load( "textures/disturb.jpg" ) } }; uniforms2.texture.value.wrapS = uniforms2.texture.value.wrapT = THREE.RepeatWrapping; diff --git a/examples/webgl_shader_lava.html b/examples/webgl_shader_lava.html index 279ef506bdda18..60dfc38d068c67 100644 --- a/examples/webgl_shader_lava.html +++ b/examples/webgl_shader_lava.html @@ -149,6 +149,8 @@ scene = new THREE.Scene(); + var textureLoader = new THREE.TextureLoader(); + uniforms = { fogDensity: { type: "f", value: 0.45 }, @@ -156,8 +158,8 @@ time: { type: "f", value: 1.0 }, resolution: { type: "v2", value: new THREE.Vector2() }, uvScale: { type: "v2", value: new THREE.Vector2( 3.0, 1.0 ) }, - texture1: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/lava/cloud.png" ) }, - texture2: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/lava/lavatile.jpg" ) } + texture1: { type: "t", value: textureLoader.load( "textures/lava/cloud.png" ) }, + texture2: { type: "t", value: textureLoader.load( "textures/lava/lavatile.jpg" ) } }; diff --git a/examples/webgl_shaders_ocean.html b/examples/webgl_shaders_ocean.html index 4acc9541b0c3e0..848e6dcb6c6a4e 100644 --- a/examples/webgl_shaders_ocean.html +++ b/examples/webgl_shaders_ocean.html @@ -88,7 +88,7 @@ controls.minDistance = 1000.0; controls.maxDistance = 5000.0; controls.maxPolarAngle = Math.PI * 0.495; - controls.center.set( 0, 500, 0 ); + controls.target.set( 0, 500, 0 ); scene.add( new THREE.AmbientLight( 0x444444 ) ); @@ -97,7 +97,7 @@ scene.add( light ); - waterNormals = new THREE.ImageUtils.loadTexture( 'textures/waternormals.jpg' ); + waterNormals = new THREE.TextureLoader().load( 'textures/waternormals.jpg' ); waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping; water = new THREE.Water( renderer, camera, scene, { diff --git a/examples/webgl_shaders_tonemapping.html b/examples/webgl_shaders_tonemapping.html index 810e45fb7a7474..1542da1e046d37 100644 --- a/examples/webgl_shaders_tonemapping.html +++ b/examples/webgl_shaders_tonemapping.html @@ -202,16 +202,18 @@ shininess: 200 } ); - var earthDiffuse = THREE.ImageUtils.loadTexture( 'textures/planets/earth_atmos_4096.jpg', undefined, function( tex ) { + var textureLoader = new THREE.TextureLoader(); + + var earthDiffuse = textureLoader.load( 'textures/planets/earth_atmos_4096.jpg', function( tex ) { earthMat.map = tex; earthMat.needsUpdate = true; } ); - var earthSpecular = THREE.ImageUtils.loadTexture( 'textures/planets/earth_specular_2048.jpg', undefined, function( tex ) { + var earthSpecular = textureLoader.load( 'textures/planets/earth_specular_2048.jpg', function( tex ) { earthMat.specularMap = tex; earthMat.needsUpdate = true; } ); - // var earthNormal = THREE.ImageUtils.loadTexture( 'textures/planets/earth-new-normal-2048.jpg', undefined, function( tex ) { + // var earthNormal = textureLoader.load( 'textures/planets/earth-new-normal-2048.jpg', function( tex ) { // earthMat.normalMap = tex; // earthMat.needsUpdate = true; // } ); @@ -223,7 +225,7 @@ depthTest: false } ); - var earthLights = THREE.ImageUtils.loadTexture( 'textures/planets/earth_lights_2048.png', undefined, function( tex ) { + var earthLights = textureLoader.load( 'textures/planets/earth_lights_2048.png', function( tex ) { earthLightsMat.map = tex; earthLightsMat.needsUpdate = true; } ); @@ -235,7 +237,7 @@ depthTest: false } ); - var earthClouds = THREE.ImageUtils.loadTexture( 'textures/planets/earth_clouds_2048.png', undefined, function( tex ) { + var earthClouds = textureLoader.load( 'textures/planets/earth_clouds_2048.png', function( tex ) { earthCloudsMat.map = tex; earthCloudsMat.needsUpdate = true; } ); diff --git a/examples/webgl_shading_physical.html b/examples/webgl_shading_physical.html index 226394cb5ac7f6..e96c63beda4f05 100644 --- a/examples/webgl_shading_physical.html +++ b/examples/webgl_shading_physical.html @@ -105,19 +105,20 @@ cubeCamera = new THREE.CubeCamera( 1, 10000, 128 ); // TEXTURES + var textureLoader = new THREE.TextureLoader(); - var textureSquares = new THREE.TextureLoader().load( "textures/patterns/bright_squares256.png" ); + var textureSquares = textureLoader.load( "textures/patterns/bright_squares256.png" ); textureSquares.repeat.set( 50, 50 ); textureSquares.wrapS = textureSquares.wrapT = THREE.RepeatWrapping; textureSquares.magFilter = THREE.NearestFilter; textureSquares.format = THREE.RGBFormat; - var textureNoiseColor = new THREE.TextureLoader().load( "textures/disturb.jpg" ); + var textureNoiseColor = textureLoader.load( "textures/disturb.jpg" ); textureNoiseColor.repeat.set( 1, 1 ); textureNoiseColor.wrapS = textureNoiseColor.wrapT = THREE.RepeatWrapping; textureNoiseColor.format = THREE.RGBFormat; - var textureLava = new THREE.TextureLoader().load( "textures/lava/lavatile.jpg" ); + var textureLava = textureLoader.load( "textures/lava/lavatile.jpg" ); textureLava.repeat.set( 6, 2 ); textureLava.wrapS = textureLava.wrapT = THREE.RepeatWrapping; textureLava.format = THREE.RGBFormat; diff --git a/examples/webgl_sprites.html b/examples/webgl_sprites.html index 4cdc45605ee4b6..e4775bd059cd64 100644 --- a/examples/webgl_sprites.html +++ b/examples/webgl_sprites.html @@ -52,9 +52,11 @@ var amount = 200; var radius = 500; - var mapA = THREE.ImageUtils.loadTexture( "textures/sprite0.png", undefined, createHUDSprites ); - var mapB = THREE.ImageUtils.loadTexture( "textures/sprite1.png" ); - mapC = THREE.ImageUtils.loadTexture( "textures/sprite2.png" ); + var textureLoader = new THREE.TextureLoader(); + + var mapA = textureLoader.load( "textures/sprite0.png", createHUDSprites ); + var mapB = textureLoader.load( "textures/sprite1.png" ); + mapC = textureLoader.load( "textures/sprite2.png" ); group = new THREE.Group(); @@ -113,7 +115,7 @@ var width = material.map.image.width; var height = material.map.image.height; - + spriteTL = new THREE.Sprite( material ); spriteTL.scale.set( width, height, 1 ); sceneOrtho.add( spriteTL ); @@ -129,7 +131,7 @@ spriteBR = new THREE.Sprite( material ); spriteBR.scale.set( width, height, 1 ); sceneOrtho.add( spriteBR ); - + spriteC = new THREE.Sprite( material ); spriteC.scale.set( width, height, 1 ); sceneOrtho.add( spriteC ); diff --git a/examples/webgl_terrain_dynamic.html b/examples/webgl_terrain_dynamic.html index a3bdbb1f922e4c..d75a073afa3227 100644 --- a/examples/webgl_terrain_dynamic.html +++ b/examples/webgl_terrain_dynamic.html @@ -315,10 +315,10 @@ var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat }; heightMap = new THREE.WebGLRenderTarget( rx, ry, pars ); - heightMap.generateMipmaps = false; + heightMap.texture.generateMipmaps = false; normalMap = new THREE.WebGLRenderTarget( rx, ry, pars ); - normalMap.generateMipmaps = false; + normalMap.texture.generateMipmaps = false; uniformsNoise = { @@ -338,23 +338,25 @@ // TEXTURES + var textureLoader = new THREE.TextureLoader(); + var specularMap = new THREE.WebGLRenderTarget( 2048, 2048, pars ); - specularMap.generateMipmaps = false; + specularMap.texture.generateMipmaps = false; - var diffuseTexture1 = THREE.ImageUtils.loadTexture( "textures/terrain/grasslight-big.jpg", null, function () { + var diffuseTexture1 = textureLoader.load( "textures/terrain/grasslight-big.jpg", function () { loadTextures(); applyShader( THREE.LuminosityShader, diffuseTexture1, specularMap ); } ); - var diffuseTexture2 = THREE.ImageUtils.loadTexture( "textures/terrain/backgrounddetailed6.jpg", null, loadTextures ); - var detailTexture = THREE.ImageUtils.loadTexture( "textures/terrain/grasslight-big-nm.jpg", null, loadTextures ); + var diffuseTexture2 = textureLoader.load( "textures/terrain/backgrounddetailed6.jpg", loadTextures ); + var detailTexture = textureLoader.load( "textures/terrain/grasslight-big-nm.jpg", loadTextures ); diffuseTexture1.wrapS = diffuseTexture1.wrapT = THREE.RepeatWrapping; diffuseTexture2.wrapS = diffuseTexture2.wrapT = THREE.RepeatWrapping; detailTexture.wrapS = detailTexture.wrapT = THREE.RepeatWrapping; - specularMap.wrapS = specularMap.wrapT = THREE.RepeatWrapping; + specularMap.texture.wrapS = specularMap.texture.wrapT = THREE.RepeatWrapping; // TERRAIN SHADER @@ -459,7 +461,7 @@ renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false }; renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters ); - renderTarget.generateMipmaps = false; + renderTarget.texture.generateMipmaps = false; effectBloom = new THREE.BloomPass( 0.6 ); var effectBleach = new THREE.ShaderPass( THREE.BleachBypassShader ); From 8ab4529129cfb80afdc35f18db505fc404ecca87 Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Mon, 18 Jan 2016 17:33:23 +0100 Subject: [PATCH 2/2] Avoid multiple textureLoaders in for-loops --- examples/js/MD2Character.js | 6 +++--- examples/js/MD2CharacterComplex.js | 8 ++++---- examples/js/UCSCharacter.js | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/examples/js/MD2Character.js b/examples/js/MD2Character.js index 291e705c16f629..329966a2abddd2 100644 --- a/examples/js/MD2Character.js +++ b/examples/js/MD2Character.js @@ -223,13 +223,13 @@ THREE.MD2Character = function () { function loadTextures( baseUrl, textureUrls ) { - var mapping = THREE.UVMapping; + var textureLoader = new THREE.TextureLoader(); var textures = []; for ( var i = 0; i < textureUrls.length; i ++ ) { - textures[ i ] = new THREE.TextureLoader().load( baseUrl + textureUrls[ i ], checkLoadingComplete ); - textures[ i ].mapping = mapping; + textures[ i ] = textureLoader.load( baseUrl + textureUrls[ i ], checkLoadingComplete ); + textures[ i ].mapping = THREE.UVMapping; textures[ i ].name = textureUrls[ i ]; } diff --git a/examples/js/MD2CharacterComplex.js b/examples/js/MD2CharacterComplex.js index 35f34ecdc342a5..e5f32bdd46e603 100644 --- a/examples/js/MD2CharacterComplex.js +++ b/examples/js/MD2CharacterComplex.js @@ -506,13 +506,13 @@ THREE.MD2CharacterComplex = function () { function loadTextures( baseUrl, textureUrls ) { - var mapping = THREE.UVMapping; + var textureLoader = new THREE.TextureLoader(); var textures = []; for ( var i = 0; i < textureUrls.length; i ++ ) { - - textures[ i ] = new THREE.TextureLoader().load( baseUrl + textureUrls[ i ], checkLoadingComplete ); - textures[ i ].mapping = mapping; + + textures[ i ] = textureLoader.load( baseUrl + textureUrls[ i ], checkLoadingComplete ); + textures[ i ].mapping = THREE.UVMapping; textures[ i ].name = textureUrls[ i ]; } diff --git a/examples/js/UCSCharacter.js b/examples/js/UCSCharacter.js index 2f2669419e62ae..70e70f1e361da0 100644 --- a/examples/js/UCSCharacter.js +++ b/examples/js/UCSCharacter.js @@ -91,13 +91,13 @@ THREE.UCSCharacter = function() { function loadTextures( baseUrl, textureUrls ) { - var mapping = THREE.UVMapping; + var textureLoader = new THREE.TextureLoader(); var textures = []; for ( var i = 0; i < textureUrls.length; i ++ ) { - textures[ i ] = new THREE.TextureLoader().load( baseUrl + textureUrls[ i ], scope.checkLoadingComplete ); - textures[ i ].mapping = mapping; + textures[ i ] = textureLoader.load( baseUrl + textureUrls[ i ], scope.checkLoadingComplete ); + textures[ i ].mapping = THREE.UVMapping; textures[ i ].name = textureUrls[ i ]; }