click here to open in a separate window
-One thing we didn't cover is that there is a setting on the WebGLRenderer
-called physicallyCorrectLights. It effects how light falls off as distance from light.
-It only affects PointLight and SpotLight. RectAreaLight does this automatically.
For lights though the basic idea is you don't set a distance for them to fade out,
-and you don't set intensity. Instead you set the power of
-the light in lumens and then three.js will use physics calculations like real lights.
-The units of three.js in this case are meters and a 60w light bulb would have
-around 800 lumens. There's also a decay property. It should
-be set to 2 for realistic decay.
Let's test that.
-First we'll turn on physically correct lights
-const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
-+renderer.physicallyCorrectLights = true;
-
-Then we'll set the power to 800 lumens, the decay to 2, and
-the distance to Infinity.
const color = 0xFFFFFF; -const intensity = 1; -const light = new THREE.PointLight(color, intensity); -light.power = 800; -light.decay = 2; -light.distance = Infinity; --
and we'll add gui so we can change the power and decay
const gui = new GUI();
-gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
-gui.add(light, 'decay', 0, 4, 0.01);
-gui.add(light, 'power', 0, 2000);
-
-
-
It's important to note each light you add to the scene slows down how fast three.js renders the scene so you should always try to use as few as diff --git a/manual/en/post-processing-3dlut.html b/manual/en/post-processing-3dlut.html index b9134381044f29..4ebca9fbe66f39 100644 --- a/manual/en/post-processing-3dlut.html +++ b/manual/en/post-processing-3dlut.html @@ -180,7 +180,7 @@
Let's make some GUI code to select one lut or the other
const lutNameIndexMap = {};
diff --git a/manual/en/post-processing.html b/manual/en/post-processing.html
index 03bfa8e24eab6b..19e1c40fbfc33f 100644
--- a/manual/en/post-processing.html
+++ b/manual/en/post-processing.html
@@ -107,6 +107,7 @@ renderToScree
import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
import {BloomPass} from 'three/addons/postprocessing/BloomPass.js';
import {FilmPass} from 'three/addons/postprocessing/FilmPass.js';
+import {OutputPass} from 'three/addons/postprocessing/OutputPass.js';
For pretty much any post processing EffectComposer.js, and RenderPass.js
are required.
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/game-check-animations.html b/manual/examples/game-check-animations.html index 66b1ac8df1e869..faddb37e04281b 100644 --- a/manual/examples/game-check-animations.html +++ b/manual/examples/game-check-animations.html @@ -88,161 +88,208 @@