Skip to content

Commit

Permalink
WebGL clearcoat examples, set renderer.useLegacyLights = false (#26218)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sunag
sunag authored Jun 8, 2023
1 parent 7bd1577 commit 4948f31
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 33 deletions.
Binary file modified examples/screenshots/webgl_materials_physical_clearcoat.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_nodes_materials_physical_clearcoat.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 20 additions & 17 deletions examples/webgl_materials_physical_clearcoat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@
container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 0.25, 50 );
camera.position.z = 10;

scene = new THREE.Scene();

Expand All @@ -63,7 +63,7 @@
.load( [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ],
function ( texture ) {

const geometry = new THREE.SphereGeometry( 80, 64, 32 );
const geometry = new THREE.SphereGeometry( .8, 64, 32 );

const textureLoader = new THREE.TextureLoader();

Expand Down Expand Up @@ -106,8 +106,8 @@
} );

let mesh = new THREE.Mesh( geometry, material );
mesh.position.x = - 100;
mesh.position.y = 100;
mesh.position.x = - 1;
mesh.position.y = 1;
group.add( mesh );

// fibers
Expand All @@ -120,8 +120,8 @@
normalMap: normalMap
} );
mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 100;
mesh.position.y = 100;
mesh.position.x = 1;
mesh.position.y = 1;
group.add( mesh );

// golf
Expand All @@ -137,8 +137,8 @@
clearcoatNormalScale: new THREE.Vector2( 2.0, - 2.0 )
} );
mesh = new THREE.Mesh( geometry, material );
mesh.position.x = - 100;
mesh.position.y = - 100;
mesh.position.x = - 1;
mesh.position.y = - 1;
group.add( mesh );

// clearcoat + normalmap
Expand All @@ -155,8 +155,8 @@
clearcoatNormalScale: new THREE.Vector2( 2.0, - 2.0 )
} );
mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 100;
mesh.position.y = - 100;
mesh.position.x = 1;
mesh.position.y = - 1;
group.add( mesh );

//
Expand All @@ -171,14 +171,15 @@
// LIGHTS

particleLight = new THREE.Mesh(
new THREE.SphereGeometry( 4, 8, 8 ),
new THREE.SphereGeometry( .05, 8, 8 ),
new THREE.MeshBasicMaterial( { color: 0xffffff } )
);
scene.add( particleLight );

particleLight.add( new THREE.PointLight( 0xffffff, 1 ) );
particleLight.add( new THREE.PointLight( 0xffffff, 30 ) );

renderer = new THREE.WebGLRenderer();
renderer.useLegacyLights = false;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
Expand All @@ -198,7 +199,9 @@

// EVENTS

new OrbitControls( camera, renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
controls.minDistance = 3;
controls.maxDistance = 30;

window.addEventListener( 'resize', onWindowResize );

Expand Down Expand Up @@ -234,9 +237,9 @@

const timer = Date.now() * 0.00025;

particleLight.position.x = Math.sin( timer * 7 ) * 300;
particleLight.position.y = Math.cos( timer * 5 ) * 400;
particleLight.position.z = Math.cos( timer * 3 ) * 300;
particleLight.position.x = Math.sin( timer * 7 ) * 3;
particleLight.position.y = Math.cos( timer * 5 ) * 4;
particleLight.position.z = Math.cos( timer * 3 ) * 3;

for ( let i = 0; i < group.children.length; i ++ ) {

Expand Down
33 changes: 17 additions & 16 deletions examples/webgl_nodes_materials_physical_clearcoat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@
container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 0.25, 50 );
camera.position.z = 10;

scene = new THREE.Scene();

Expand All @@ -67,7 +67,7 @@
.load( [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ],
function ( hdrTexture ) {

const geometry = new THREE.SphereGeometry( 80, 64, 32 );
const geometry = new THREE.SphereGeometry( .8, 64, 32 );

const textureLoader = new THREE.TextureLoader();

Expand Down Expand Up @@ -105,8 +105,8 @@
material.normalNode = normalMap( texture( normalMap3, carPaintUV ), carPaintNormalScale );

let mesh = new THREE.Mesh( geometry, material );
mesh.position.x = - 100;
mesh.position.y = 100;
mesh.position.x = - 1;
mesh.position.y = 1;
group.add( mesh );

// fibers
Expand All @@ -121,8 +121,8 @@
material.normalNode = normalMap( texture( normalMap1, fibersUV ) );

mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 100;
mesh.position.y = 100;
mesh.position.x = 1;
mesh.position.y = 1;
group.add( mesh );

// golf
Expand All @@ -137,8 +137,8 @@
material.clearcoatNormalNode = normalMap( texture( clearcoatNormalMap ), vec2( 2.0, - 2.0 ) );

mesh = new THREE.Mesh( geometry, material );
mesh.position.x = - 100;
mesh.position.y = - 100;
mesh.position.x = - 1;
mesh.position.y = - 1;
group.add( mesh );

// clearcoat + normalmap
Expand All @@ -153,8 +153,8 @@
material.clearcoatNormalNode = normalMap( texture( clearcoatNormalMap ), vec2( 2.0, - 2.0 ) );

mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 100;
mesh.position.y = - 100;
mesh.position.x = 1;
mesh.position.y = - 1;
group.add( mesh );

//
Expand All @@ -169,14 +169,15 @@
// LIGHTS

particleLight = new THREE.Mesh(
new THREE.SphereGeometry( 4, 8, 8 ),
new THREE.SphereGeometry( .05, 8, 8 ),
new THREE.MeshBasicMaterial( { color: 0xffffff } )
);
scene.add( particleLight );

particleLight.add( new THREE.PointLight( 0xffffff, 1 ) );
particleLight.add( new THREE.PointLight( 0xffffff, 30 ) );

renderer = new THREE.WebGLRenderer();
renderer.useLegacyLights = false;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
Expand Down Expand Up @@ -234,9 +235,9 @@

const timer = Date.now() * 0.00025;

particleLight.position.x = Math.sin( timer * 7 ) * 300;
particleLight.position.y = Math.cos( timer * 5 ) * 400;
particleLight.position.z = Math.cos( timer * 3 ) * 300;
particleLight.position.x = Math.sin( timer * 7 ) * 3;
particleLight.position.y = Math.cos( timer * 5 ) * 4;
particleLight.position.z = Math.cos( timer * 3 ) * 3;

for ( let i = 0; i < group.children.length; i ++ ) {

Expand Down

0 comments on commit 4948f31

Please sign in to comment.