|
|
@@ -14,13 +14,9 @@
|
|
|
<body>
|
|
|
<div id="container"></div>
|
|
|
<div id="info">
|
|
|
- <a href="https://threejs.org" target="_blank" rel="noopener">threejs</a> -
|
|
|
- Ground projected environment mapping. By
|
|
|
- <a href="https://twitter.com/CantBeFaraz" target="_blank" rel="noopener"
|
|
|
- >Faraz Shaikh</a
|
|
|
- >.
|
|
|
- <br>
|
|
|
- Ferrari 458 Italia model by <a href="https://sketchfab.com/models/57bf6cc56931426e87494f554df1dab6" target="_blank" rel="noopener">vicent091036</a>
|
|
|
+ <a href="https://threejs.org" target="_blank" rel="noopener">threejs</a> - Ground projected environment mapping. By <a href="https://twitter.com/CantBeFaraz" target="_blank" rel="noopener">Faraz Shaikh</a>.<br>
|
|
|
+ Ferrari 458 Italia model by <a href="https://sketchfab.com/models/57bf6cc56931426e87494f554df1dab6" target="_blank" rel="noopener">vicent091036</a><br>
|
|
|
+ <a href="https://polyhaven.com/a/blouberg_sunrise_2" target="_blank" rel="noopener">Blouberg Sunrise 2</a> by <a href="https://gregzaal.com/" target="_blank" rel="noopener">Greg Zaal</a>
|
|
|
</div>
|
|
|
|
|
|
<!-- Import maps polyfill -->
|
|
|
@@ -48,19 +44,18 @@
|
|
|
import { GroundProjectedEnv } from './jsm/objects/GroundProjectedEnv.js';
|
|
|
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
|
|
|
import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
|
|
|
+ import { RGBELoader } from './jsm/loaders/RGBELoader.js';
|
|
|
|
|
|
const params = {
|
|
|
height: 34,
|
|
|
- radius: 440,
|
|
|
- toneMappingExposure: 1
|
|
|
+ radius: 440
|
|
|
};
|
|
|
|
|
|
- let camera, scene, renderer, stats, env;
|
|
|
+ let camera, scene, renderer, env;
|
|
|
|
|
|
- init();
|
|
|
- animate();
|
|
|
+ init().then( render );
|
|
|
|
|
|
- function init() {
|
|
|
+ async function init() {
|
|
|
|
|
|
camera = new THREE.PerspectiveCamera(
|
|
|
45,
|
|
|
@@ -72,24 +67,15 @@
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
|
|
- const cubeLoader = new THREE.CubeTextureLoader();
|
|
|
- cubeLoader.setPath( 'textures/cube/lake/' );
|
|
|
+ const hdrLoader = new RGBELoader();
|
|
|
+ const envMap = await hdrLoader.loadAsync( 'textures/equirectangular/blouberg_sunrise_2_1k.hdr' );
|
|
|
+ envMap.mapping = THREE.EquirectangularReflectionMapping;
|
|
|
|
|
|
- const textureCube = cubeLoader.load( [
|
|
|
- 'px.png',
|
|
|
- 'nx.png',
|
|
|
- 'py.png',
|
|
|
- 'ny.png',
|
|
|
- 'pz.png',
|
|
|
- 'nz.png',
|
|
|
- ] );
|
|
|
- textureCube.encoding = THREE.sRGBEncoding;
|
|
|
-
|
|
|
- env = new GroundProjectedEnv( textureCube );
|
|
|
+ env = new GroundProjectedEnv( envMap );
|
|
|
env.scale.setScalar( 100 );
|
|
|
scene.add( env );
|
|
|
|
|
|
- scene.environment = textureCube;
|
|
|
+ scene.environment = envMap;
|
|
|
|
|
|
const dracoLoader = new DRACOLoader();
|
|
|
dracoLoader.setDecoderPath( 'js/libs/draco/gltf/' );
|
|
|
@@ -142,6 +128,8 @@
|
|
|
|
|
|
scene.add( carModel );
|
|
|
|
|
|
+ render();
|
|
|
+
|
|
|
} );
|
|
|
|
|
|
//
|
|
|
@@ -149,13 +137,14 @@
|
|
|
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
- renderer.shadowMap.enabled = true;
|
|
|
- renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
|
|
renderer.outputEncoding = THREE.sRGBEncoding;
|
|
|
+ renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
|
|
+ renderer.toneMappingExposure = 0.85;
|
|
|
|
|
|
//
|
|
|
|
|
|
const controls = new OrbitControls( camera, renderer.domElement );
|
|
|
+ controls.addEventListener( 'change', render );
|
|
|
controls.target.set( 0, 0, 0 );
|
|
|
controls.maxPolarAngle = THREE.MathUtils.degToRad( 80 );
|
|
|
controls.maxDistance = 100;
|
|
|
@@ -163,12 +152,9 @@
|
|
|
controls.enablePan = false;
|
|
|
controls.update();
|
|
|
|
|
|
- stats = new Stats();
|
|
|
- document.body.appendChild( stats.dom );
|
|
|
-
|
|
|
const gui = new GUI();
|
|
|
- gui.add( params, 'height', 20, 50, 0.1 );
|
|
|
- gui.add( params, 'radius', 200, 600, 0.1 );
|
|
|
+ gui.add( params, 'height', 20, 50, 0.1 ).onChange( render );
|
|
|
+ gui.add( params, 'radius', 200, 600, 0.1 ).onChange( render );
|
|
|
|
|
|
//
|
|
|
|
|
|
@@ -186,15 +172,6 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
- function animate() {
|
|
|
-
|
|
|
- requestAnimationFrame( animate );
|
|
|
- render();
|
|
|
-
|
|
|
- stats.update();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
function render() {
|
|
|
|
|
|
renderer.render( scene, camera );
|
Michael Herzog
