Skip to content

Commit

Permalink
Examples: More usage of useLegacyLights=false. (#26280)
Browse files Browse the repository at this point in the history 
* Examples: More usage of `useLegacyLights=false`.

* Examples: Update screenshots.
  • Loading branch information
@Mugen87
Mugen87 committed Jun 17, 2023
1 parent c9ace8c commit 4e438e9
Show file tree
Hide file tree
Showing 67 changed files with 164 additions and 138 deletions.
3 changes: 1 addition & 2 deletions examples/misc_controls_arcball.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );

renderer.useLegacyLights = false;
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMappingExposure = 3;
renderer.domElement.style.background = 'linear-gradient( 180deg, rgba( 0,0,0,1 ) 0%, rgba( 128,128,255,1 ) 100% )';
Expand All @@ -110,7 +110,6 @@
//

scene = new THREE.Scene();
scene.add( new THREE.HemisphereLight( 0x443333, 0x222233, 4 ) );

camera = makePerspectiveCamera();
camera.position.set( 0, 0, perspectiveDistance );
Expand Down
3 changes: 2 additions & 1 deletion examples/misc_controls_fly.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.00000025 );

dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
dirLight.position.set( - 1, 0, 1 ).normalize();
scene.add( dirLight );

Expand Down Expand Up @@ -205,6 +205,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.useLegacyLights = false;
document.body.appendChild( renderer.domElement );

//
Expand Down
11 changes: 6 additions & 5 deletions examples/misc_controls_map.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,11 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.useLegacyLights = false;
document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 400, 200, 0 );
camera.position.set( 0, 200, - 400 );

// controls

Expand All @@ -81,7 +82,7 @@

// world

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const geometry = new THREE.BoxGeometry();
geometry.translate( 0, 0.5, 0 );
const material = new THREE.MeshPhongMaterial( { color: 0xeeeeee, flatShading: true } );

Expand All @@ -102,15 +103,15 @@

// lights

const dirLight1 = new THREE.DirectionalLight( 0xffffff );
const dirLight1 = new THREE.DirectionalLight( 0xffffff, 3 );
dirLight1.position.set( 1, 1, 1 );
scene.add( dirLight1 );

const dirLight2 = new THREE.DirectionalLight( 0x002288 );
const dirLight2 = new THREE.DirectionalLight( 0x002288, 3 );
dirLight2.position.set( - 1, - 1, - 1 );
scene.add( dirLight2 );

const ambientLight = new THREE.AmbientLight( 0x222222 );
const ambientLight = new THREE.AmbientLight( 0x555555 );
scene.add( ambientLight );

//
Expand Down
9 changes: 5 additions & 4 deletions examples/misc_controls_orbit.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.useLegacyLights = false;
document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
Expand All @@ -80,7 +81,7 @@

// world

const geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
const geometry = new THREE.ConeGeometry( 10, 30, 4, 1 );
const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );

for ( let i = 0; i < 500; i ++ ) {
Expand All @@ -97,15 +98,15 @@

// lights

const dirLight1 = new THREE.DirectionalLight( 0xffffff );
const dirLight1 = new THREE.DirectionalLight( 0xffffff, 3 );
dirLight1.position.set( 1, 1, 1 );
scene.add( dirLight1 );

const dirLight2 = new THREE.DirectionalLight( 0x002288 );
const dirLight2 = new THREE.DirectionalLight( 0x002288, 3 );
dirLight2.position.set( - 1, - 1, - 1 );
scene.add( dirLight2 );

const ambientLight = new THREE.AmbientLight( 0x222222 );
const ambientLight = new THREE.AmbientLight( 0x555555 );
scene.add( ambientLight );

//
Expand Down
3 changes: 2 additions & 1 deletion examples/misc_controls_pointerlock.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@
scene.background = new THREE.Color( 0xffffff );
scene.fog = new THREE.Fog( 0xffffff, 0, 750 );

const light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
const light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 2.5 );
light.position.set( 0.5, 1, 0.75 );
scene.add( light );

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

//
Expand Down
9 changes: 5 additions & 4 deletions examples/misc_controls_trackball.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
scene.background = new THREE.Color( 0xcccccc );
scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

const geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
const geometry = new THREE.ConeGeometry( 10, 30, 4, 1 );
const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );

for ( let i = 0; i < 500; i ++ ) {
Expand All @@ -88,22 +88,23 @@

// lights

const dirLight1 = new THREE.DirectionalLight( 0xffffff );
const dirLight1 = new THREE.DirectionalLight( 0xffffff, 3 );
dirLight1.position.set( 1, 1, 1 );
scene.add( dirLight1 );

const dirLight2 = new THREE.DirectionalLight( 0x002288 );
const dirLight2 = new THREE.DirectionalLight( 0x002288, 3 );
dirLight2.position.set( - 1, - 1, - 1 );
scene.add( dirLight2 );

const ambientLight = new THREE.AmbientLight( 0x222222 );
const ambientLight = new THREE.AmbientLight( 0x555555 );
scene.add( ambientLight );

// renderer

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.useLegacyLights = false;
document.body.appendChild( renderer.domElement );

stats = new Stats();
Expand Down
17 changes: 10 additions & 7 deletions examples/misc_controls_transform.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,10 @@

function init() {

renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.useLegacyLights = false;
document.body.appendChild( renderer.domElement );

const aspect = window.innerWidth / window.innerHeight;
Expand All @@ -55,22 +56,24 @@
cameraOrtho = new THREE.OrthographicCamera( - 600 * aspect, 600 * aspect, 600, - 600, 0.01, 30000 );
currentCamera = cameraPersp;

currentCamera.position.set( 1000, 500, 1000 );
currentCamera.lookAt( 0, 200, 0 );
currentCamera.position.set( 5, 2.5, 5 );

scene = new THREE.Scene();
scene.add( new THREE.GridHelper( 1000, 10, 0x888888, 0x444444 ) );
scene.add( new THREE.GridHelper( 5, 10, 0x888888, 0x444444 ) );

const light = new THREE.DirectionalLight( 0xffffff, 2 );
const ambientLight = new THREE.AmbientLight( 0xffffff );
scene.add( ambientLight );

const light = new THREE.DirectionalLight( 0xffffff, 4 );
light.position.set( 1, 1, 1 );
scene.add( light );

const texture = new THREE.TextureLoader().load( 'textures/crate.gif', render );
texture.colorSpace = THREE.SRGBColorSpace;
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

const geometry = new THREE.BoxGeometry( 200, 200, 200 );
const material = new THREE.MeshLambertMaterial( { map: texture, transparent: true } );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshLambertMaterial( { map: texture } );

orbit = new OrbitControls( currentCamera, renderer.domElement );
orbit.update();
Expand Down
38 changes: 17 additions & 21 deletions examples/misc_exporter_draco.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,68 +45,64 @@

function init() {

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 200, 100, 200 );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.set( 4, 2, 4 );

scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa0a0a0 );
scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
scene.fog = new THREE.Fog( 0xa0a0a0, 4, 20 );

exporter = new DRACOExporter();

//

const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 200, 0 );
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 3 );
hemiLight.position.set( 0, 20, 0 );
scene.add( hemiLight );

const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set( 0, 200, 100 );
const directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );
directionalLight.position.set( 0, 20, 10 );
directionalLight.castShadow = true;
directionalLight.shadow.camera.top = 180;
directionalLight.shadow.camera.bottom = - 100;
directionalLight.shadow.camera.left = - 120;
directionalLight.shadow.camera.right = 120;
directionalLight.shadow.camera.top = 2;
directionalLight.shadow.camera.bottom = - 2;
directionalLight.shadow.camera.left = - 2;
directionalLight.shadow.camera.right = 2;
scene.add( directionalLight );

// ground

const ground = new THREE.Mesh(
new THREE.PlaneGeometry( 2000, 2000 ),
new THREE.MeshPhongMaterial( { color: 0xbbbbbb, depthWrite: false } )
);
const ground = new THREE.Mesh( new THREE.PlaneGeometry( 40, 40 ), new THREE.MeshPhongMaterial( { color: 0xbbbbbb, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.position.y = - 75;
ground.receiveShadow = true;
scene.add( ground );

const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
const grid = new THREE.GridHelper( 40, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
grid.position.y = - 75;
scene.add( grid );

// export mesh

const geometry = new THREE.TorusKnotGeometry( 50, 15, 200, 30 );
const geometry = new THREE.TorusKnotGeometry( 0.75, 0.2, 200, 30 );
const material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
mesh = new THREE.Mesh( geometry, material );
mesh.castShadow = true;
mesh.position.y = 25;
mesh.position.y = 1.5;
scene.add( mesh );

//

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.useLegacyLights = false;
renderer.shadowMap.enabled = true;
document.body.appendChild( renderer.domElement );

//

const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 25, 0 );
controls.target.set( 0, 1.5, 0 );
controls.update();

//
Expand Down
6 changes: 4 additions & 2 deletions examples/misc_exporter_gltf.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,14 +164,14 @@
// ---------------------------------------------------------------------
// Ambient light
// ---------------------------------------------------------------------
const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2 );
const ambientLight = new THREE.AmbientLight( 0xcccccc );
ambientLight.name = 'AmbientLight';
scene1.add( ambientLight );

// ---------------------------------------------------------------------
// DirectLight
// ---------------------------------------------------------------------
const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
dirLight.target.position.set( 0, 0, - 1 );
dirLight.add( dirLight.target );
dirLight.lookAt( - 1, - 1, 0 );
Expand Down Expand Up @@ -199,6 +199,7 @@
// Icosahedron
const mapGrid = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
mapGrid.wrapS = mapGrid.wrapT = THREE.RepeatWrapping;
mapGrid.colorSpace = THREE.SRGBColorSpace;
material = new THREE.MeshBasicMaterial( {
color: 0xffffff,
map: mapGrid
Expand Down Expand Up @@ -445,6 +446,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.useLegacyLights = false;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;

Expand Down
5 changes: 3 additions & 2 deletions examples/misc_exporter_obj.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,17 +52,18 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.useLegacyLights = false;
document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 0, 400 );

scene = new THREE.Scene();

const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
const ambientLight = new THREE.AmbientLight( 0xffffff );
scene.add( ambientLight );

const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
const directionalLight = new THREE.DirectionalLight( 0xffffff, 2.5 );
directionalLight.position.set( 0, 1, 1 );
scene.add( directionalLight );

Expand Down

0 comments on commit 4e438e9

Please sign in to comment.