See raw JS.
// Car models with light reflection // port of // https://threejs.org/examples/#webgl_materials_cars // source: https://github.com/mrdoob/three.js/tree/master/examples // licence: https://github.com/mrdoob/three.js/blob/master/LICENSE // For model credits and skybox credits see below // document.write is good at the moment we include the JS, not later // button style: style_html = ` <style> div.bwrap { margin:0.5em 0 0 0 } button.custom { font-family:georgia; border:0; background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:3px; } button.custom:hover { background:#333 } #buttons_cars button { color:#fa0 } </style> `; document.write ( style_html ); // put controls inside run header: div_html = ` <hr> <div id="d"> Move mouse vertically to move camera. <br> <div id="buttons_cars" class="bwrap"> <button class="custom" id="veyron">Bugatti Veyron</button> <button class="custom" id="gallardo">Lamborghini Gallardo</button> <button class="custom" id="f50">Ferrari F50</button> <button class="custom" id="camaro">Chevrolet Camaro</button> </div> <div id="buttons_materials" class="bwrap"></div> </div> `; AB.msg ( div_html ); // start of load JS library - surrounds the main JS code // this is a deprecated loader - but is the one used in the example at time of writing $.getScript ( "/uploads/threejs/BinaryLoader.js", function() { const UPLOADSDIR = "/uploads/threejs"; // skybox /* // Bridge skybox by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a> var textureCube = new THREE.CubeTextureLoader() .setPath ( UPLOADSDIR + '/') .load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] ); */ var textureCube = new THREE.CubeTextureLoader() .setPath ( '/uploads/starter/') .load( [ 'st.posx.jpg', 'st.negx.jpg', 'st.posy.jpg', 'st.negy.jpg', 'st.posz.jpg', 'st.negz.jpg' ] ); var CARS = { "veyron": { name: "Bugatti Veyron", url: UPLOADSDIR + "/VeyronNoUv_bin.js", author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank" rel="noopener">Troyano</a>', init_rotation: [ 0, 0, 0 ], scale: 5.5, init_material: 4, body_materials: [ 2 ], object: null, buttons: null, materials: null }, "gallardo": { name: "Lamborghini Gallardo", url: UPLOADSDIR + "/GallardoNoUv_bin.js", author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1711" target="_blank" rel="noopener">machman_3d</a>', init_rotation: [ 0, 0, 0 ], scale: 3.7, init_material: 9, body_materials: [ 3 ], object: null, buttons: null, materials: null }, "f50": { name: "Ferrari F50", url: UPLOADSDIR + "/F50NoUv_bin.js", author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1687" target="_blank" rel="noopener">daniel sathya</a>', init_rotation: [ 0, 0, 0 ], scale: 0.175, init_material: 2, body_materials: [ 3, 6, 7, 8, 9, 10, 23, 24 ], object: null, buttons: null, materials: null }, "camaro": { name: "Chevrolet Camaro", url: UPLOADSDIR + "/CamaroNoUv_bin.js", author: '<a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank" rel="noopener">dskfnwn</a>', init_rotation: [ 0.0, 0.0, 0.0 ], scale: 75, init_material: 0, body_materials: [ 0 ], object: null, buttons: null, materials: null } }; var camera, scene, renderer; var mouseX = 0; var mouseY = - window.innerHeight / 4; var loader = new THREE.BinaryLoader(); init(); animate(); // --- start of init --------------------------------------------------------------------------------------------------------- function init() { var m, mi; var directionalLight, pointLight; // CAMERAS camera = new THREE.PerspectiveCamera ( 70, window.innerWidth / window.innerHeight, 1, 100000 ); // SCENE scene = new THREE.Scene(); scene.background = textureCube; // LIGHTS var ambient = new THREE.AmbientLight( 0x050505 ); scene.add( ambient ); directionalLight = new THREE.DirectionalLight( 0xffffff, 2 ); directionalLight.position.set( 2, 1.2, 10 ).normalize(); scene.add( directionalLight ); directionalLight = new THREE.DirectionalLight( 0xffffff, 1 ); directionalLight.position.set( -2, 1.2, -10 ).normalize(); scene.add( directionalLight ); pointLight = new THREE.PointLight( 0xffaa00, 2 ); pointLight.position.set( 2000, 1200, 10000 ); scene.add( pointLight ); // preserveDrawingBuffer needed for Ancient Brain screenshots: if ( AB.isScreenshotRun() ) renderer = new THREE.WebGLRenderer ( { preserveDrawingBuffer : true } ); else renderer = new THREE.WebGLRenderer ( { preserveDrawingBuffer : false } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); document.addEventListener ( 'mousemove', onDocumentMouseMove, false ); // common materials var mlib = { "Orange": new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ), "Blue": new THREE.MeshLambertMaterial( { color: 0x001133, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ), "Red": new THREE.MeshLambertMaterial( { color: 0x660000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ), "Black": new THREE.MeshLambertMaterial( { color: 0x000000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.15 } ), "White": new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ), "Carmine": new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, envMap: textureCube, combine: THREE.MultiplyOperation } ), "Gold": new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, envMap: textureCube, combine: THREE.MultiplyOperation } ), "Bronze": new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ), "Chrome": new THREE.MeshPhongMaterial( { color: 0xffffff, specular:0xffffff, envMap: textureCube, combine: THREE.MultiplyOperation } ), "Orange metal": new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MultiplyOperation } ), "Blue metal": new THREE.MeshLambertMaterial( { color: 0x001133, envMap: textureCube, combine: THREE.MultiplyOperation } ), "Red metal": new THREE.MeshLambertMaterial( { color: 0x770000, envMap: textureCube, combine: THREE.MultiplyOperation } ), "Green metal": new THREE.MeshLambertMaterial( { color: 0x007711, envMap: textureCube, combine: THREE.MultiplyOperation } ), "Black metal": new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube, combine: THREE.MultiplyOperation } ), "Pure chrome": new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube } ), "Dark chrome": new THREE.MeshLambertMaterial( { color: 0x444444, envMap: textureCube } ), "Darker chrome":new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube } ), "Black glass": new THREE.MeshLambertMaterial( { color: 0x101016, envMap: textureCube, opacity: 0.975, transparent: true } ), "Dark glass": new THREE.MeshLambertMaterial( { color: 0x101046, envMap: textureCube, opacity: 0.25, transparent: true } ), "Blue glass": new THREE.MeshLambertMaterial( { color: 0x668899, envMap: textureCube, opacity: 0.75, transparent: true } ), "Light glass": new THREE.MeshBasicMaterial( { color: 0x223344, envMap: textureCube, opacity: 0.25, transparent: true, combine: THREE.MixOperation, reflectivity: 0.25 } ), "Red glass": new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.75, transparent: true } ), "Yellow glass": new THREE.MeshLambertMaterial( { color: 0xffffaa, opacity: 0.75, transparent: true } ), "Orange glass": new THREE.MeshLambertMaterial( { color: 0x995500, opacity: 0.75, transparent: true } ), "Orange glass 50": new THREE.MeshLambertMaterial( { color: 0xffbb00, opacity: 0.5, transparent: true } ), "Red glass 50": new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } ), "Fullblack rough": new THREE.MeshLambertMaterial( { color: 0x000000 } ), "Black rough": new THREE.MeshLambertMaterial( { color: 0x050505 } ), "Darkgray rough": new THREE.MeshLambertMaterial( { color: 0x090909 } ), "Red rough": new THREE.MeshLambertMaterial( { color: 0x330500 } ), "Darkgray shiny": new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x050505 } ), "Gray shiny": new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } ) }; // Gallardo materials CARS[ "gallardo" ].materials = { body: [ [ "Orange", mlib[ "Orange" ] ], [ "Blue", mlib[ "Blue" ] ], [ "Red", mlib[ "Red" ] ], [ "Black", mlib[ "Black" ] ], [ "White", mlib[ "White" ] ], [ "Orange metal", mlib[ "Orange metal" ] ], [ "Blue metal", mlib[ "Blue metal" ] ], [ "Green metal", mlib[ "Green metal" ] ], [ "Black metal", mlib[ "Black metal" ] ], [ "Carmine", mlib[ "Carmine" ] ], [ "Gold", mlib[ "Gold" ] ], [ "Bronze", mlib[ "Bronze" ] ], [ "Chrome", mlib[ "Chrome" ] ] ] }; m = CARS[ "gallardo" ].materials; mi = CARS[ "gallardo" ].init_material; CARS[ "gallardo" ].mmap = { 0: mlib[ "Pure chrome" ], // wheels chrome 1: mlib[ "Black rough" ], // tire 2: mlib[ "Black glass" ], // windshield 3: m.body[ mi ][ 1 ], // body 4: mlib[ "Red glass" ], // back lights 5: mlib[ "Yellow glass" ], // front lights 6: mlib[ "Dark chrome" ] // windshield rim }; // Veyron materials CARS[ "veyron" ].materials = { body: [ [ "Orange metal", mlib[ "Orange metal" ] ], [ "Blue metal", mlib[ "Blue metal" ] ], [ "Red metal", mlib[ "Red metal" ] ], [ "Green metal", mlib[ "Green metal" ] ], [ "Black metal", mlib[ "Black metal" ] ], [ "Gold", mlib[ "Gold" ] ], [ "Bronze", mlib[ "Bronze" ] ], [ "Chrome", mlib[ "Chrome" ] ] ] }; m = CARS[ "veyron" ].materials; mi = CARS[ "veyron" ].init_material; CARS[ "veyron" ].mmap = { 0: mlib[ "Black rough" ], // tires + inside 1: mlib[ "Pure chrome" ], // wheels + extras chrome 2: m.body[ mi ][ 1 ], // back / top / front torso 3: mlib[ "Dark glass" ], // glass 4: mlib[ "Pure chrome" ], // sides torso 5: mlib[ "Pure chrome" ], // engine 6: mlib[ "Red glass 50" ], // backlights 7: mlib[ "Orange glass 50" ] // backsignals }; // F50 materials CARS[ "f50" ].materials = { body: [ [ "Orange", mlib[ "Orange" ] ], [ "Blue", mlib[ "Blue" ] ], [ "Red", mlib[ "Red" ] ], [ "Black", mlib[ "Black" ] ], [ "White", mlib[ "White" ] ], [ "Orange metal", mlib[ "Orange metal" ] ], [ "Blue metal", mlib[ "Blue metal" ] ], [ "Black metal", mlib[ "Black metal" ] ], [ "Carmine", mlib[ "Carmine" ] ], [ "Gold", mlib[ "Gold" ] ], [ "Bronze", mlib[ "Bronze" ] ], [ "Chrome", mlib[ "Chrome" ] ] ] }; m = CARS[ "f50" ].materials; mi = CARS[ "f50" ].init_material; CARS[ "f50" ].mmap = { 0: mlib[ "Dark chrome" ], // interior + rim 1: mlib[ "Pure chrome" ], // wheels + gears chrome 2: mlib[ "Blue glass" ], // glass 3: m.body[ mi ][ 1 ], // torso mid + front spoiler 4: mlib[ "Darkgray shiny" ], // interior + behind seats 5: mlib[ "Darkgray shiny" ], // tiny dots in interior 6: m.body[ mi ][ 1 ], // back torso 7: m.body[ mi ][ 1 ], // right mirror decal 8: m.body[ mi ][ 1 ], // front decal 9: m.body[ mi ][ 1 ], // front torso 10: m.body[ mi ][ 1 ], // left mirror decal 11: mlib[ "Pure chrome" ], // engine 12: mlib[ "Darkgray rough" ], // tires side 13: mlib[ "Darkgray rough" ], // tires bottom 14: mlib[ "Darkgray shiny" ], // bottom 15: mlib[ "Black rough" ], // ??? 16: mlib[ "Orange glass" ], // front signals 17: mlib[ "Dark chrome" ], // wheels center 18: mlib[ "Red glass" ], // back lights 19: mlib[ "Black rough" ], // ??? 20: mlib[ "Red rough" ], // seats 21: mlib[ "Black rough" ], // back plate 22: mlib[ "Black rough" ], // front light dots 23: m.body[ mi ][ 1 ], // back torso 24: m.body[ mi ][ 1 ] // back torso center }; // Camero materials CARS[ "camaro" ].materials = { body: [ [ "Orange", mlib[ "Orange" ] ], [ "Blue", mlib[ "Blue" ] ], [ "Red", mlib[ "Red" ] ], [ "Black", mlib[ "Black" ] ], [ "White", mlib[ "White" ] ], [ "Orange metal", mlib[ "Orange metal" ] ], [ "Blue metal", mlib[ "Blue metal" ] ], [ "Red metal", mlib[ "Red metal" ] ], [ "Green metal", mlib[ "Green metal" ] ], [ "Black metal", mlib[ "Black metal" ] ], [ "Gold", mlib[ "Gold" ] ], [ "Bronze", mlib[ "Bronze" ] ], [ "Chrome", mlib[ "Chrome" ] ] ] }; m = CARS[ "camaro" ].materials; mi = CARS[ "camaro" ].init_material; CARS[ "camaro" ].mmap = { 0: m.body[ mi ][ 1 ], // car body 1: mlib[ "Pure chrome" ], // wheels chrome 2: mlib[ "Pure chrome" ], // grille chrome 3: mlib[ "Dark chrome" ], // door lines 4: mlib[ "Light glass" ], // windshield 5: mlib[ "Gray shiny" ], // interior 6: mlib[ "Black rough" ], // tire 7: mlib[ "Fullblack rough" ], // tireling 8: mlib[ "Fullblack rough" ] // behind grille }; // load default car: loader.load( CARS[ "veyron" ].url, function ( geometry ) { createScene ( geometry, "veyron" ); } ); for ( var c in CARS ) initCarButton( c ); window.addEventListener( 'resize', onWindowResize, false ); } // --- end of init --------------------------------------------------------------------------------------------------------- function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function initCarButton( car ) { document.getElementById( car ).addEventListener ( 'click', function() { if ( ! CARS[ car ].object ) loader.load ( CARS[ car ].url, function( geometry ) { createScene( geometry, car ); } ); else switchCar( car ); }, false ); } // buttons all have IDs function button_name ( car, index ) { return ( "m_" + car + "_" + index ); } function switchCar( car ) { for ( var c in CARS ) { if ( ( c != car ) && CARS[ c ].object ) { CARS[ c ].object.visible = false; CARS[ c ].buttons.style.display = "none"; } } CARS[ car ].object.visible = true; CARS[ car ].buttons.style.display = "block"; } function createButtons( materials, car ) { var src = ""; for ( var i = 0; i < materials.length; i ++ ) src = src + '<button class="custom" id="' + button_name( car, i ) + '">' + materials[ i ][ 0 ] + '</button> '; var buttons = document.createElement( "div" ); buttons.innerHTML = src; document.getElementById( "buttons_materials" ).appendChild( buttons ); return buttons; } function attachButtonMaterials( materials, faceMaterials, material_indices, car ) { for ( var i = 0; i < materials.length; i ++ ) { document.getElementById( button_name( car, i ) ).counter = i; document.getElementById( button_name( car, i ) ).addEventListener( 'click', function() { for ( var j = 0; j < material_indices.length; j ++ ) faceMaterials [ material_indices [ j ] ] = materials [ this.counter ][ 1 ]; }, false ); } } function createScene ( geometry, car ) { geometry.sortFacesByMaterialIndex(); var m = []; var s = CARS[ car ].scale; var r = CARS[ car ].init_rotation; var materials = CARS[ car ].materials; var mi = CARS[ car ].init_material; var bm = CARS[ car ].body_materials; for ( var i in CARS[ car ].mmap ) m[ i ] = CARS[ car ].mmap[ i ]; var mesh = new THREE.Mesh( geometry, m ); mesh.rotation.x = r[ 0 ]; mesh.rotation.y = r[ 1 ]; mesh.rotation.z = r[ 2 ]; mesh.scale.x = mesh.scale.y = mesh.scale.z = s; scene.add( mesh ); CARS[ car ].object = mesh; CARS[ car ].buttons = createButtons( materials.body, car ); attachButtonMaterials( materials.body, m, bm, car ); switchCar( car ); } function onDocumentMouseMove(event) { mouseY = ( event.clientY - window.innerHeight ); } function animate() { requestAnimationFrame( animate ); render(); } function render() { var timer = -0.0002 * Date.now(); camera.position.y = ( camera.position.y * 0.95 ) - ( mouseY * 0.05 ); camera.position.x = 1000 * Math.cos( timer ); camera.position.z = 1000 * Math.sin( timer ); camera.lookAt( scene.position ); renderer.render( scene, camera ); } // end of load JS library - surrounds entire code });