|
|
@@ -1,333 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
- <head>
|
|
|
- <title>
|
|
|
- threejs webgl - materials - ground projected environment mapping
|
|
|
- </title>
|
|
|
- <meta charset="utf-8" />
|
|
|
- <meta
|
|
|
- name="viewport"
|
|
|
- content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
|
|
|
- />
|
|
|
- <link type="text/css" rel="stylesheet" href="main.css" />
|
|
|
- </head>
|
|
|
- <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>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Import maps polyfill -->
|
|
|
- <!-- Remove this when import maps will be widely supported -->
|
|
|
- <script
|
|
|
- async
|
|
|
- src="https://unpkg.com/[email protected]/dist/es-module-shims.js"
|
|
|
- ></script>
|
|
|
-
|
|
|
- <script type="importmap">
|
|
|
- {
|
|
|
- "imports": {
|
|
|
- "three": "../build/three.module.js"
|
|
|
- }
|
|
|
- }
|
|
|
- </script>
|
|
|
-
|
|
|
- <script type="module">
|
|
|
- import * as THREE from 'three';
|
|
|
-
|
|
|
- import Stats from './jsm/libs/stats.module.js';
|
|
|
-
|
|
|
- import { GUI } from './jsm/libs/lil-gui.module.min.js';
|
|
|
- import { OrbitControls } from './jsm/controls/OrbitControls.js';
|
|
|
- import { GroundProjectedEnv } from './jsm/objects/GroundProjectedEnv.js';
|
|
|
- import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
|
|
|
- import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
|
|
|
- import { FlakesTexture } from './jsm/textures/FlakesTexture.js';
|
|
|
-
|
|
|
- const params = {
|
|
|
- height: 34,
|
|
|
- radius: 440,
|
|
|
- toneMappingExposure: 1
|
|
|
- };
|
|
|
-
|
|
|
- let camera, scene, renderer, stats, env,dirLight;
|
|
|
-
|
|
|
- init();
|
|
|
- animate();
|
|
|
-
|
|
|
- function init() {
|
|
|
-
|
|
|
- initScene();
|
|
|
- initMisc();
|
|
|
-
|
|
|
- document.body.appendChild( renderer.domElement );
|
|
|
- window.addEventListener( 'resize', onWindowResize );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function initScene() {
|
|
|
-
|
|
|
- camera = new THREE.PerspectiveCamera(
|
|
|
- 45,
|
|
|
- window.innerWidth / window.innerHeight,
|
|
|
- 1,
|
|
|
- 1000
|
|
|
- );
|
|
|
- camera.position.set( - 1, 0.3, 1 ).multiplyScalar( 25 );
|
|
|
-
|
|
|
- scene = new THREE.Scene();
|
|
|
-
|
|
|
- dirLight = new THREE.DirectionalLight( 0xffffff, 0.2 );
|
|
|
- dirLight.position.set( 10, 8, 10 );
|
|
|
- dirLight.castShadow = true;
|
|
|
- dirLight.shadow.camera.near = 1;
|
|
|
- dirLight.shadow.camera.far = 100;
|
|
|
- dirLight.shadow.camera.right = 150;
|
|
|
- dirLight.shadow.camera.left = - 150;
|
|
|
- dirLight.shadow.camera.top = 150;
|
|
|
- dirLight.shadow.camera.bottom = - 150;
|
|
|
- dirLight.shadow.mapSize.width = 1024;
|
|
|
- dirLight.shadow.mapSize.height = 1024;
|
|
|
- scene.add( dirLight );
|
|
|
-
|
|
|
- const geometry = new THREE.PlaneGeometry( 1, 1 );
|
|
|
- const material = new THREE.ShadowMaterial( { opacity: 0.3 } );
|
|
|
-
|
|
|
- const ground = new THREE.Mesh( geometry, material );
|
|
|
- ground.scale.setScalar( 1000 );
|
|
|
- ground.rotation.x = - Math.PI / 2;
|
|
|
- ground.position.y = - 0.001;
|
|
|
- ground.castShadow = false;
|
|
|
- ground.receiveShadow = true;
|
|
|
- scene.add( ground );
|
|
|
-
|
|
|
- const cubeLoader = new THREE.CubeTextureLoader();
|
|
|
- cubeLoader.setPath( 'textures/cube/lake/' );
|
|
|
-
|
|
|
- const textureCube = cubeLoader.load( [
|
|
|
- 'px.png',
|
|
|
- 'nx.png',
|
|
|
- 'py.png',
|
|
|
- 'ny.png',
|
|
|
- 'pz.png',
|
|
|
- 'nz.png',
|
|
|
- ] );
|
|
|
-
|
|
|
- env = new GroundProjectedEnv( textureCube );
|
|
|
- env.scale.setScalar( 100 );
|
|
|
- scene.add( env );
|
|
|
-
|
|
|
- scene.background = textureCube;
|
|
|
- scene.environment = textureCube;
|
|
|
-
|
|
|
- const dracoLoader = new DRACOLoader();
|
|
|
- dracoLoader.setDecoderPath( 'js/libs/draco/gltf/' );
|
|
|
-
|
|
|
- const loader = new GLTFLoader();
|
|
|
- loader.setDRACOLoader( dracoLoader );
|
|
|
-
|
|
|
- const normalMap3 = new THREE.CanvasTexture( new FlakesTexture() );
|
|
|
- normalMap3.wrapS = THREE.RepeatWrapping;
|
|
|
- normalMap3.wrapT = THREE.RepeatWrapping;
|
|
|
- normalMap3.repeat.x = 10;
|
|
|
- normalMap3.repeat.y = 6;
|
|
|
- normalMap3.anisotropy = 16;
|
|
|
-
|
|
|
- const bodyMaterial = new THREE.MeshPhysicalMaterial( {
|
|
|
- clearcoat: 1.0,
|
|
|
- clearcoatRoughness: 0.1,
|
|
|
- metalness: 1,
|
|
|
- roughness: 0.4,
|
|
|
- color: 0xff2800,
|
|
|
- normalMap: normalMap3,
|
|
|
- normalScale: new THREE.Vector2( 0.15, 0.15 ),
|
|
|
- } );
|
|
|
-
|
|
|
- const wheelMaterial = new THREE.MeshPhysicalMaterial( {
|
|
|
- clearcoat: 1.0,
|
|
|
- clearcoatRoughness: 0.1,
|
|
|
- metalness: 0.9,
|
|
|
- roughness: 0.5,
|
|
|
- color: '#080808',
|
|
|
- normalMap: normalMap3,
|
|
|
- normalScale: new THREE.Vector2( 0.15, 0.15 ),
|
|
|
- } );
|
|
|
-
|
|
|
- const yellowMaterial = new THREE.MeshPhysicalMaterial( {
|
|
|
- clearcoat: 1.0,
|
|
|
- clearcoatRoughness: 0.1,
|
|
|
- metalness: 1,
|
|
|
- roughness: 0.2,
|
|
|
- color: '#e66b00',
|
|
|
- } );
|
|
|
-
|
|
|
- const lightsMaterial = new THREE.MeshPhysicalMaterial( {
|
|
|
- emissive: '#ffffff',
|
|
|
- color: 'white',
|
|
|
- } );
|
|
|
-
|
|
|
- const chromeMaterial = new THREE.MeshPhysicalMaterial( {
|
|
|
- clearcoat: 1.0,
|
|
|
- clearcoatRoughness: 0.1,
|
|
|
- metalness: 0.9,
|
|
|
- roughness: 0.5,
|
|
|
- color: 0xffffff,
|
|
|
- } );
|
|
|
-
|
|
|
- const detailsMaterial = new THREE.MeshStandardMaterial( {
|
|
|
- clearcoat: 1.0,
|
|
|
- clearcoatRoughness: 0.1,
|
|
|
- metalness: 0.9,
|
|
|
- roughness: 0.5,
|
|
|
- color: 0xffffff,
|
|
|
- } );
|
|
|
-
|
|
|
- const glassMaterial = new THREE.MeshPhysicalMaterial( {
|
|
|
- color: 0xffffff,
|
|
|
- metalness: 0.25,
|
|
|
- roughness: 0,
|
|
|
- transmission: 1.0,
|
|
|
- clearcoat: 1.0,
|
|
|
- clearcoatRoughness: 0,
|
|
|
- } );
|
|
|
-
|
|
|
- const shadow = new THREE.TextureLoader().load(
|
|
|
- 'models/gltf/ferrari_ao.png'
|
|
|
- );
|
|
|
-
|
|
|
- loader.load( 'models/gltf/ferrari.glb', function ( gltf ) {
|
|
|
-
|
|
|
- gltf.scene.scale.setScalar( 6 );
|
|
|
-
|
|
|
- const box = new THREE.Box3().setFromObject( gltf.scene );
|
|
|
- gltf.scene.position.y = - box.min.y;
|
|
|
- gltf.scene.rotation.y = THREE.MathUtils.degToRad( 180 );
|
|
|
-
|
|
|
- gltf.scene.traverse( ( obj ) => {
|
|
|
-
|
|
|
- if ( obj.isMesh ) {
|
|
|
-
|
|
|
- obj.castShadow = obj.recieveShadow = true;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- gltf.scene.getObjectByName( 'body' ).material = bodyMaterial;
|
|
|
-
|
|
|
- gltf.scene.getObjectByName( 'rim_fl' ).material = detailsMaterial;
|
|
|
- gltf.scene.getObjectByName( 'rim_fr' ).material = detailsMaterial;
|
|
|
- gltf.scene.getObjectByName( 'rim_rr' ).material = detailsMaterial;
|
|
|
- gltf.scene.getObjectByName( 'rim_rl' ).material = detailsMaterial;
|
|
|
- gltf.scene.getObjectByName( 'trim' ).material = detailsMaterial;
|
|
|
-
|
|
|
- gltf.scene.getObjectByName( 'glass' ).material = glassMaterial;
|
|
|
-
|
|
|
- gltf.scene.getObjectByName( 'wheel' ).material = wheelMaterial;
|
|
|
- gltf.scene.getObjectByName( 'wheel_1' ).material = wheelMaterial;
|
|
|
- gltf.scene.getObjectByName( 'wheel_2' ).material = wheelMaterial;
|
|
|
- gltf.scene.getObjectByName( 'wheel_3' ).material = wheelMaterial;
|
|
|
- gltf.scene.getObjectByName( 'brake' ).material = wheelMaterial;
|
|
|
- gltf.scene.getObjectByName( 'interior_dark' ).material = wheelMaterial;
|
|
|
- gltf.scene.getObjectByName( 'brake_1' ).material = wheelMaterial;
|
|
|
- gltf.scene.getObjectByName( 'brake_2' ).material = wheelMaterial;
|
|
|
- gltf.scene.getObjectByName( 'brake_3' ).material = wheelMaterial;
|
|
|
-
|
|
|
- gltf.scene.getObjectByName( 'yellow_trim' ).material = yellowMaterial;
|
|
|
- gltf.scene.getObjectByName( 'lights' ).material = lightsMaterial;
|
|
|
- gltf.scene.getObjectByName( 'chrome' ).material = chromeMaterial;
|
|
|
-
|
|
|
- gltf.scene.getObjectByName( 'wheel_fl' ).rotation.z =
|
|
|
- THREE.MathUtils.degToRad( - 30 );
|
|
|
- gltf.scene.getObjectByName( 'wheel_fr' ).rotation.z =
|
|
|
- THREE.MathUtils.degToRad( - 30 );
|
|
|
-
|
|
|
- // shadow
|
|
|
- const mesh = new THREE.Mesh(
|
|
|
- new THREE.PlaneGeometry( 0.655 * 4, 1.3 * 4 ),
|
|
|
- new THREE.MeshBasicMaterial( {
|
|
|
- map: shadow,
|
|
|
- blending: THREE.MultiplyBlending,
|
|
|
- toneMapped: false,
|
|
|
- transparent: true,
|
|
|
- } )
|
|
|
- );
|
|
|
- mesh.rotation.x = - Math.PI / 2;
|
|
|
- mesh.renderOrder = 2;
|
|
|
- gltf.scene.add( mesh );
|
|
|
-
|
|
|
- scene.add( gltf.scene );
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function initMisc() {
|
|
|
-
|
|
|
- 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.toneMapping = THREE.ACESFilmicToneMapping;
|
|
|
-
|
|
|
- // Mouse control
|
|
|
- const controls = new OrbitControls( camera, renderer.domElement );
|
|
|
- controls.target.set( 0, 0, 0 );
|
|
|
- controls.maxPolarAngle = THREE.MathUtils.degToRad( 80 );
|
|
|
- controls.maxDistance = 100;
|
|
|
- controls.minDistance = 30;
|
|
|
- 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( renderer, 'toneMappingExposure', 0, 2, 0.1 ).name( 'exposure' );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function onWindowResize() {
|
|
|
-
|
|
|
- camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
- camera.updateProjectionMatrix();
|
|
|
-
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function animate() {
|
|
|
-
|
|
|
- requestAnimationFrame( animate );
|
|
|
- render();
|
|
|
-
|
|
|
- stats.update();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function renderScene() {
|
|
|
-
|
|
|
- renderer.render( scene, camera );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function render() {
|
|
|
-
|
|
|
- renderScene();
|
|
|
-
|
|
|
- env.radius = params.radius;
|
|
|
- env.height = params.height;
|
|
|
-
|
|
|
- }
|
|
|
- </script>
|
|
|
- </body>
|
|
|
-</html>
|
Michael Herzog
