|
@@ -10,7 +10,7 @@
|
|
|
<body>
|
|
<body>
|
|
|
<div id="container"></div>
|
|
<div id="container"></div>
|
|
|
<div id="info">
|
|
<div id="info">
|
|
|
- <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Rolex + aomap - 610 ko
|
|
|
|
|
|
|
+ <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Rolex + aomap - 1200 ko
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script type="importmap">
|
|
<script type="importmap">
|
|
@@ -47,9 +47,9 @@
|
|
|
const torad = Math.PI / 180;
|
|
const torad = Math.PI / 180;
|
|
|
|
|
|
|
|
const setting = {
|
|
const setting = {
|
|
|
- roughness: 0.09,
|
|
|
|
|
|
|
+ roughness: 0.1,
|
|
|
metalness: 1.0,
|
|
metalness: 1.0,
|
|
|
- opacity: 0.4,
|
|
|
|
|
|
|
+ opacity: 0.8,
|
|
|
threshold: 0,
|
|
threshold: 0,
|
|
|
strength: 0.007,
|
|
strength: 0.007,
|
|
|
radius: 0.0,
|
|
radius: 0.0,
|
|
@@ -71,10 +71,9 @@
|
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
renderer.setAnimationLoop( animate );
|
|
renderer.setAnimationLoop( animate );
|
|
|
- renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
|
|
|
|
|
|
+ renderer.toneMapping = THREE.NeutralToneMapping;
|
|
|
renderer.toneMappingExposure = 0.7;
|
|
renderer.toneMappingExposure = 0.7;
|
|
|
renderer.shadowMap.enabled = true;
|
|
renderer.shadowMap.enabled = true;
|
|
|
- renderer.shadowMap.type = THREE.VSMShadowMap;
|
|
|
|
|
container.appendChild( renderer.domElement );
|
|
container.appendChild( renderer.domElement );
|
|
|
|
|
|
|
|
taaPass = new TAARenderPass( scene, camera );
|
|
taaPass = new TAARenderPass( scene, camera );
|
|
@@ -111,8 +110,9 @@
|
|
|
if ( child.isMesh ) {
|
|
if ( child.isMesh ) {
|
|
|
|
|
|
|
|
child.material.vertexColors = false;
|
|
child.material.vertexColors = false;
|
|
|
- materials[ child.material.name ] = child.material;
|
|
|
|
|
- if ( child.name !== 'glass' ) {
|
|
|
|
|
|
|
+ if ( materials[ child.material.name ] ) child.material = materials[ child.material.name ];
|
|
|
|
|
+ else materials[ child.material.name ] = child.material;
|
|
|
|
|
+ if ( child.name !== 'glass' && child.name !== 'floor' ) {
|
|
|
|
|
|
|
|
child.receiveShadow = true;
|
|
child.receiveShadow = true;
|
|
|
child.castShadow = true;
|
|
child.castShadow = true;
|
|
@@ -157,11 +157,11 @@
|
|
|
controls.update();
|
|
controls.update();
|
|
|
|
|
|
|
|
dirLight = new THREE.DirectionalLight( 0xFFFFFF, 6 );
|
|
dirLight = new THREE.DirectionalLight( 0xFFFFFF, 6 );
|
|
|
- dirLight.position.set( - 0.1, 0.6, 0.4 );
|
|
|
|
|
|
|
+ dirLight.position.set( 0.2, 0.6, 0.4 );
|
|
|
dirLight.castShadow = true;
|
|
dirLight.castShadow = true;
|
|
|
scene.add( dirLight );
|
|
scene.add( dirLight );
|
|
|
const shadow = dirLight.shadow;
|
|
const shadow = dirLight.shadow;
|
|
|
- shadow.mapSize.width = shadow.mapSize.height = 1024;
|
|
|
|
|
|
|
+ shadow.mapSize.width = shadow.mapSize.height = 2048;
|
|
|
shadow.radius = 8;
|
|
shadow.radius = 8;
|
|
|
shadow.bias = - 0.0005;
|
|
shadow.bias = - 0.0005;
|
|
|
const shadowCam = shadow.camera, s = 0.5;
|
|
const shadowCam = shadow.camera, s = 0.5;
|
|
@@ -173,7 +173,7 @@
|
|
|
//scene.add( new THREE.CameraHelper(shadowCam) );
|
|
//scene.add( new THREE.CameraHelper(shadowCam) );
|
|
|
|
|
|
|
|
pointLight = new THREE.PointLight( 0x7b8cad, 1, 0, 2 );
|
|
pointLight = new THREE.PointLight( 0x7b8cad, 1, 0, 2 );
|
|
|
- pointLight.position.set( 0.3, - 0.2, - 0.2 );
|
|
|
|
|
|
|
+ pointLight.position.set( - 0.3, - 0.2, - 0.2 );
|
|
|
scene.add( pointLight );
|
|
scene.add( pointLight );
|
|
|
|
|
|
|
|
window.addEventListener( 'resize', onWindowResize );
|
|
window.addEventListener( 'resize', onWindowResize );
|
lo-th
