Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Examples: More usage of useLegacyLights=false. #26280

Merged
merged 2 commits into from
Jun 17, 2023
Merged

Examples: More usage of useLegacyLights=false. #26280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f44132c
Examples: More usage of `useLegacyLights=false`.
Mugen87 Jun 17, 2023
350ec49
Examples: Update screenshots.
Mugen87 Jun 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 1 addition & 2 deletions examples/misc_controls_arcball.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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