diff --git a/manual/en/textures.html b/manual/en/textures.html index d5e9febd6cb712..297e476c62084c 100644 --- a/manual/en/textures.html +++ b/manual/en/textures.html @@ -66,10 +66,12 @@
load
method with the URL of an
image and set the material's map
property to the result instead of setting its color
.
+const loader = new THREE.TextureLoader(); ++const texture = loader.load( 'resources/images/wall.jpg' ); ++texture.colorSpace = THREE.SRGBColorSpace; const material = new THREE.MeshBasicMaterial({ - color: 0xFF8844, -+ map: loader.load('resources/images/wall.jpg'), ++ map: texture, });
Note that we're using MeshBasicMaterial
so no need for any lights.
Mesh
const loader = new THREE.TextureLoader(); +-const texture = loader.load( 'resources/images/wall.jpg' ); +-texture.colorSpace = THREE.SRGBColorSpace; -const material = new THREE.MeshBasicMaterial({ -- map: loader.load('resources/images/wall.jpg'), +- map: texture, -}); +const materials = [ -+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-1.jpg')}), -+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-2.jpg')}), -+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-3.jpg')}), -+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-4.jpg')}), -+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-5.jpg')}), -+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-6.jpg')}), ++ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-1.jpg')}), ++ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-2.jpg')}), ++ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-3.jpg')}), ++ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-4.jpg')}), ++ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-5.jpg')}), ++ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-6.jpg')}), +]; -const cube = new THREE.Mesh(geometry, material); +const cube = new THREE.Mesh(geometry, materials); + ++function loadColorTexture( path ) { ++ const texture = loader.load( path ); ++ texture.colorSpace = THREE.SRGBColorSpace; ++ return texture; ++}
It works!
const loader = new THREE.TextureLoader(); loader.load('resources/images/wall.jpg', (texture) => { + texture.colorSpace = THREE.SRGBColorSpace; const material = new THREE.MeshBasicMaterial({ map: texture, }); diff --git a/manual/en/voxel-geometry.html b/manual/en/voxel-geometry.html index e69ac281c43b90..6b08887a04114d 100644 --- a/manual/en/voxel-geometry.html +++ b/manual/en/voxel-geometry.html @@ -691,6 +691,7 @@Voxel(Minecraft Like) Geometry
const texture = loader.load('resources/images/minecraft/flourish-cc-by-nc-sa.png', render); texture.magFilter = THREE.NearestFilter; texture.minFilter = THREE.NearestFilter; +texture.colorSpace = THREE.SRGBColorSpace;
and pass the settings to the VoxelWorld
class
+const tileSize = 16; diff --git a/manual/examples/render-on-demand-w-damping.html b/manual/examples/render-on-demand-w-damping.html index 61e910c70adfc1..35b8bcf063cc2f 100644 --- a/manual/examples/render-on-demand-w-damping.html +++ b/manual/examples/render-on-demand-w-damping.html @@ -35,90 +35,111 @@