Permalink
359 lines (245 sloc) 9.7 KB
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials - car</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
}
#info a {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> car materials demo :
Ferrari 458 Italia model by <a href="https://sketchfab.com/models/57bf6cc56931426e87494f554df1dab6" target="_blank" rel="noopener">vicent091036</a>
<br><br>
<span>Body: <select id="body-mat"></select></span>
<span>Rims / Trim: <select id="rim-mat"></select></span>
<span>Glass: <select id="glass-mat"></select></span>
<br><br>
<span>Follow camera: <input type="checkbox" id="camera-toggle"></span>
</div>
<div id="container"></div>
<script src="../build/three.js"></script>
<script src="js/loaders/DRACOLoader.js"></script>
<script src="js/loaders/GLTFLoader.js"></script>
<script src="js/Car.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
var camera, scene, renderer, stats, carModel, materialsLib, envMap;
var bodyMatSelect = document.getElementById( 'body-mat' );
var rimMatSelect = document.getElementById( 'rim-mat' );
var glassMatSelect = document.getElementById( 'glass-mat' );
var followCamera = document.getElementById( 'camera-toggle' );
followCamera.addEventListener( 'change', onFollowCameraToggle );
var lightHolder = new THREE.Group();
var clock = new THREE.Clock();
var car = new THREE.Car();
car.turningRadius = 75;
var carParts = {
body: [],
rims:[],
glass: [],
};
var damping = 5.0;
var distance = 5;
var cameraTarget = new THREE.Vector3();
var origin = new THREE.Vector3();
function init() {
var container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 200 );
camera.position.set( 3.25, 2.0, -5 );
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xd7cbb1, 1, 80 );
envMap = new THREE.CubeTextureLoader()
.setPath( 'textures/cube/skyboxsun25deg/')
.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
scene.background = envMap;
var ground = new THREE.Mesh(
new THREE.PlaneBufferGeometry( 2400, 2400 ),
new THREE.ShadowMaterial( { color: 0x000000, opacity: 0.15, depthWrite: false }
) );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
ground.renderOrder = 1;
scene.add( ground );
var grid = new THREE.GridHelper( 400, 40, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.depthWrite = false;
grid.material.transparent = true;
scene.add( grid );
var hemiLight = new THREE.HemisphereLight( 0x7c849b, 0xd7cbb1, 0.1 );
hemiLight.position.set( 0, 1, 0 );
scene.add( hemiLight );
var shadowLight = new THREE.DirectionalLight( 0xffffee, 0.1 );
shadowLight.position.set( -1.5, 1.25, -1.5 );
shadowLight.castShadow = true;
shadowLight.shadow.width = 512;
shadowLight.shadow.height = 512;
shadowLight.shadow.camera.top = 2;
shadowLight.shadow.camera.bottom = -2;
shadowLight.shadow.camera.left = -2.5;
shadowLight.shadow.camera.right = 2.5;
shadowLight.shadow.camera.far = 5.75;
shadowLight.shadow.bias = -0.025;
lightHolder.add( shadowLight, shadowLight.target );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
stats = new Stats();
container.appendChild( stats.dom );
initCar();
initMaterials();
initMaterialSelectionMenus();
window.addEventListener( 'resize', onWindowResize, false );
renderer.setAnimationLoop( function() {
update();
renderer.render( scene, camera );
} );
}
function initCar() {
THREE.DRACOLoader.setDecoderPath( 'js/libs/draco/gltf/' );
var loader = new THREE.GLTFLoader();
loader.setDRACOLoader( new THREE.DRACOLoader() );
loader.load( 'models/gltf/ferrari.glb', function( gltf ) {
carModel = gltf.scene.children[ 0 ];
// add lightHolder to car so that the shadow will track the car as it moves
carModel.add( lightHolder );
car.setModel( carModel );
carModel.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true;
child.material.envMap = envMap;
}
} );
// shadow
var texture = new THREE.TextureLoader().load( 'models/gltf/ferrari_ao.png' );
var shadow = new THREE.Mesh(
new THREE.PlaneBufferGeometry( 0.655 * 4, 1.3 * 4 ).rotateX( - Math.PI / 2 ),
new THREE.MeshBasicMaterial( { map: texture, opacity: 0.8, transparent: true } )
);
shadow.renderOrder = 2;
carModel.add( shadow );
scene.add( carModel );
// car parts for material selection
carParts.body.push( carModel.getObjectByName( 'body' ) );
carParts.rims.push(
carModel.getObjectByName( 'rim_fl' ),
carModel.getObjectByName( 'rim_fr' ),
carModel.getObjectByName( 'rim_rr' ),
carModel.getObjectByName( 'rim_rl' ),
carModel.getObjectByName( 'trim' ),
);
carParts.glass.push(
carModel.getObjectByName( 'glass' ),
);
updateMaterials();
});
}
function initMaterials() {
materialsLib = {
main: [
new THREE.MeshStandardMaterial( { color: 0xff4400, envMap: envMap, metalness: 0.9, roughness: 0.2, name: 'orange' } ),
new THREE.MeshStandardMaterial( { color: 0x001166, envMap: envMap, metalness: 0.9, roughness: 0.2, name: 'blue' } ),
new THREE.MeshStandardMaterial( { color: 0x990000, envMap: envMap, metalness: 0.9, roughness: 0.2, name: 'red' } ),
new THREE.MeshStandardMaterial( { color: 0x000000, envMap: envMap, metalness: 0.9, roughness: 0.5, name: 'black' } ),
new THREE.MeshStandardMaterial( { color: 0xffffff, envMap: envMap, metalness: 0.9, roughness: 0.5, name: 'white' } ),
new THREE.MeshStandardMaterial( { color: 0x555555, envMap: envMap, envMapIntensity: 2.0, metalness: 1.0, roughness: 0.2, name: 'metallic' } ),
],
glass: [
new THREE.MeshStandardMaterial( { color: 0xffffff, envMap: envMap, metalness: 0.9, roughness: 0.1, opacity: 0.15, transparent: true, premultipliedAlpha: true, name: 'clear' } ),
new THREE.MeshStandardMaterial( { color: 0x000000, envMap: envMap, metalness: 0.9, roughness: 0.1, opacity: 0.15, transparent: true, premultipliedAlpha: true, name: 'smoked' } ),
new THREE.MeshStandardMaterial( { color: 0x001133, envMap: envMap, metalness: 0.9, roughness: 0.1, opacity: 0.15, transparent: true, premultipliedAlpha: true, name: 'blue' } ),
],
}
}
function initMaterialSelectionMenus() {
function addOption( name, menu ) {
var option = document.createElement( 'option' );
option.text = name;
option.value = name;
menu.add( option );
}
materialsLib.main.forEach( function( material ) {
addOption( material.name, bodyMatSelect );
addOption( material.name, rimMatSelect );
} );
materialsLib.glass.forEach( function( material ) {
addOption( material.name, glassMatSelect );
} );
bodyMatSelect.selectedIndex = 2;
rimMatSelect.selectedIndex = 4;
glassMatSelect.selectedIndex = 0;
bodyMatSelect.addEventListener( 'change', updateMaterials );
rimMatSelect.addEventListener( 'change', updateMaterials );
glassMatSelect.addEventListener( 'change', updateMaterials );
}
// set materials to the current values of the selection menus
function updateMaterials() {
var bodyMat = materialsLib.main[ bodyMatSelect.selectedIndex ];
var rimMat = materialsLib.main[ rimMatSelect.selectedIndex ];
var glassMat = materialsLib.glass[ glassMatSelect.selectedIndex ];
carParts.body.forEach( function ( part ) { part.material = bodyMat; } );
carParts.rims.forEach( function ( part ) { part.material = rimMat; } );
carParts.glass.forEach( function ( part ) { part.material = glassMat; } );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onFollowCameraToggle() {
carModel.position.copy( origin );
}
function update() {
var delta = clock.getDelta();
if ( carModel ) {
car.update( delta / 3 );
resetPosition();
// keep the light (and shadow) pointing in the same direction as the car rotates
lightHolder.rotation.y = -carModel.rotation.y;
if ( followCamera.checked ) {
carModel.getWorldPosition( cameraTarget );
cameraTarget.y = 2.5;
cameraTarget.z += distance;
camera.position.lerp( cameraTarget, delta * damping );
}
camera.lookAt( carModel.position );
}
stats.update();
}
function resetPosition() {
if ( carModel.position.distanceTo( origin ) > 200 ) {
carModel.position.copy( origin );
car.speed = 0;
}
}
init();
</script>
</body>
</html>