|
@@ -6,152 +6,61 @@
|
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
<style>
|
|
<style>
|
|
|
body {
|
|
body {
|
|
|
- background:#000;
|
|
|
|
|
- color:#fff;
|
|
|
|
|
|
|
+ background:#777;
|
|
|
padding:0;
|
|
padding:0;
|
|
|
margin:0;
|
|
margin:0;
|
|
|
|
|
+ font-weight: bold;
|
|
|
overflow:hidden;
|
|
overflow:hidden;
|
|
|
- font-family:georgia;
|
|
|
|
|
- text-align:center;
|
|
|
|
|
}
|
|
}
|
|
|
- h1 { }
|
|
|
|
|
- a { color:skyblue; text-decoration:none }
|
|
|
|
|
- canvas { pointer-events:none; z-index:10; position:relative; }
|
|
|
|
|
-
|
|
|
|
|
- #d { position:absolute; width: 100%; text-align:center; margin:1em 0 -4.5em 0; z-index:1000; }
|
|
|
|
|
|
|
|
|
|
- .bwrap { margin:0.5em 0 0 0 }
|
|
|
|
|
- button { font-family:georgia; border:0; background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:3px; }
|
|
|
|
|
- button:hover { background:#333 }
|
|
|
|
|
- #buttons_cars button { color:#fa0 }
|
|
|
|
|
|
|
+ #info {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0px; width: 100%;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ padding: 5px;
|
|
|
|
|
+ font-family:Monospace;
|
|
|
|
|
+ font-size:13px;
|
|
|
|
|
+ text-align:center;
|
|
|
|
|
+ z-index:1000;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- #car_info { text-align:center; }
|
|
|
|
|
- #car_name { font-size:1em }
|
|
|
|
|
- #car_author { font-size:1em }
|
|
|
|
|
|
|
+ a {
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- #oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }
|
|
|
|
|
|
|
+ #oldie a { color:#da0 }
|
|
|
</style>
|
|
</style>
|
|
|
</head>
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
|
<body>
|
|
|
- <div id="d">
|
|
|
|
|
- <div id="info">
|
|
|
|
|
- <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - effects - parallax barrier.
|
|
|
|
|
- texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a> :
|
|
|
|
|
- <span id="car_info">
|
|
|
|
|
- <span id="car_name">Bugatti Veyron model</span>
|
|
|
|
|
- by <span id="car_author"><a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank" rel="noopener">Troyano</a></span>
|
|
|
|
|
- </span>
|
|
|
|
|
-
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div id="buttons_cars" class="bwrap">
|
|
|
|
|
- <button id="veyron">Bugatti Veyron</button>
|
|
|
|
|
- <button id="gallardo">Lamborghini Gallardo</button>
|
|
|
|
|
- <button id="f50">Ferrari F50</button>
|
|
|
|
|
- <button id="camaro">Chevrolet Camaro</button>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div id="buttons_materials" class="bwrap"></div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - effects - parallax barrier. skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank" rel="noopener">Paul Debevec</a></div>
|
|
|
|
|
|
|
|
<script src="../build/three.js"></script>
|
|
<script src="../build/three.js"></script>
|
|
|
|
|
|
|
|
<script src="js/effects/ParallaxBarrierEffect.js"></script>
|
|
<script src="js/effects/ParallaxBarrierEffect.js"></script>
|
|
|
- <script src="js/loaders/BinaryLoader.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="js/Detector.js"></script>
|
|
<script src="js/Detector.js"></script>
|
|
|
- <script src="js/libs/stats.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
|
|
|
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
|
|
|
|
- var STATS_ENABLED = false;
|
|
|
|
|
-
|
|
|
|
|
- var CARS = {
|
|
|
|
|
-
|
|
|
|
|
- "veyron": {
|
|
|
|
|
-
|
|
|
|
|
- name: "Bugatti Veyron",
|
|
|
|
|
- url: "obj/veyron/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: "obj/gallardo/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: "obj/f50/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: "obj/camaro/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 container, stats;
|
|
|
|
|
|
|
+ var container;
|
|
|
|
|
|
|
|
var camera, scene, renderer, effect;
|
|
var camera, scene, renderer, effect;
|
|
|
|
|
|
|
|
- var m, mi;
|
|
|
|
|
|
|
+ var mesh, lightMesh, geometry;
|
|
|
|
|
+ var spheres = [];
|
|
|
|
|
|
|
|
var directionalLight, pointLight;
|
|
var directionalLight, pointLight;
|
|
|
|
|
|
|
|
- var mouseX = 0, mouseY = 0;
|
|
|
|
|
|
|
+ var mouseX = 0;
|
|
|
|
|
+ var mouseY = 0;
|
|
|
|
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfX = window.innerWidth / 2;
|
|
|
var windowHalfY = window.innerHeight / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
|
|
|
|
- var loader = new THREE.BinaryLoader();
|
|
|
|
|
|
|
+ document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
|
|
|
|
|
init();
|
|
init();
|
|
|
animate();
|
|
animate();
|
|
@@ -161,31 +70,41 @@
|
|
|
container = document.createElement( 'div' );
|
|
container = document.createElement( 'div' );
|
|
|
document.body.appendChild( container );
|
|
document.body.appendChild( container );
|
|
|
|
|
|
|
|
- camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
|
|
|
|
|
|
|
+ camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
|
|
|
|
|
+ camera.position.z = 3;
|
|
|
|
|
+ camera.focalLength = 3;
|
|
|
|
|
|
|
|
- var textureCube = new THREE.CubeTextureLoader()
|
|
|
|
|
- .setPath( 'textures/cube/Bridge2/')
|
|
|
|
|
- .load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
|
|
|
|
|
|
|
+ var path = "textures/cube/pisa/";
|
|
|
|
|
+ var format = '.png';
|
|
|
|
|
+ var urls = [
|
|
|
|
|
+ path + 'px' + format, path + 'nx' + format,
|
|
|
|
|
+ path + 'py' + format, path + 'ny' + format,
|
|
|
|
|
+ path + 'pz' + format, path + 'nz' + format
|
|
|
|
|
+ ];
|
|
|
|
|
+
|
|
|
|
|
+ var textureCube = new THREE.CubeTextureLoader().load( urls );
|
|
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
scene = new THREE.Scene();
|
|
|
scene.background = textureCube;
|
|
scene.background = textureCube;
|
|
|
|
|
|
|
|
- // LIGHTS
|
|
|
|
|
|
|
+ var geometry = new THREE.SphereBufferGeometry( 0.1, 32, 16 );
|
|
|
|
|
+ var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
|
|
|
|
|
+
|
|
|
|
|
+ for ( var i = 0; i < 500; i ++ ) {
|
|
|
|
|
+
|
|
|
|
|
+ var mesh = new THREE.Mesh( geometry, material );
|
|
|
|
|
|
|
|
- var ambient = new THREE.AmbientLight( 0x050505 );
|
|
|
|
|
- scene.add( ambient );
|
|
|
|
|
|
|
+ mesh.position.x = Math.random() * 10 - 5;
|
|
|
|
|
+ mesh.position.y = Math.random() * 10 - 5;
|
|
|
|
|
+ mesh.position.z = Math.random() * 10 - 5;
|
|
|
|
|
|
|
|
- directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
|
|
|
|
|
- directionalLight.position.set( 2, 1.2, 10 ).normalize();
|
|
|
|
|
- scene.add( directionalLight );
|
|
|
|
|
|
|
+ mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
|
|
|
|
|
|
|
|
- directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
|
|
|
|
|
- directionalLight.position.set( - 2, 1.2, -10 ).normalize();
|
|
|
|
|
- scene.add( directionalLight );
|
|
|
|
|
|
|
+ scene.add( mesh );
|
|
|
|
|
|
|
|
- pointLight = new THREE.PointLight( 0xffaa00, 2 );
|
|
|
|
|
- pointLight.position.set( 2000, 1200, 10000 );
|
|
|
|
|
- scene.add( pointLight );
|
|
|
|
|
|
|
+ spheres.push( mesh );
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
//
|
|
//
|
|
|
|
|
|
|
@@ -199,245 +118,6 @@
|
|
|
effect = new THREE.ParallaxBarrierEffect( renderer );
|
|
effect = new THREE.ParallaxBarrierEffect( renderer );
|
|
|
effect.setSize( width, height );
|
|
effect.setSize( width, height );
|
|
|
|
|
|
|
|
- if ( STATS_ENABLED ) {
|
|
|
|
|
-
|
|
|
|
|
- stats = new Stats();
|
|
|
|
|
- container.appendChild( stats.dom );
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- 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
|
|
|
|
|
-
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- loader.load( CARS[ "veyron" ].url, function( geometry ) { createScene( geometry, "veyron" ) } );
|
|
|
|
|
-
|
|
|
|
|
- for( var c in CARS ) initCarButton( c );
|
|
|
|
|
-
|
|
|
|
|
//
|
|
//
|
|
|
|
|
|
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
|
@@ -456,121 +136,10 @@
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- function initCarButton( car ) {
|
|
|
|
|
-
|
|
|
|
|
- $( car ).addEventListener( 'click', function() {
|
|
|
|
|
-
|
|
|
|
|
- if ( ! CARS[ car ].object ) {
|
|
|
|
|
-
|
|
|
|
|
- loader.load( CARS[ car ].url, function( geometry ) { createScene( geometry, car ) } );
|
|
|
|
|
-
|
|
|
|
|
- } else {
|
|
|
|
|
-
|
|
|
|
|
- switchCar( car );
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- }, false );
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function $( id ) { return document.getElementById( id ) }
|
|
|
|
|
- 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";
|
|
|
|
|
-
|
|
|
|
|
- $( "car_name" ).innerHTML = CARS[ car ].name + " model";
|
|
|
|
|
- $( "car_author" ).innerHTML = CARS[ car ].author;
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function createButtons( materials, car ) {
|
|
|
|
|
-
|
|
|
|
|
- var buttons, i, src = "";
|
|
|
|
|
-
|
|
|
|
|
- for( i = 0; i < materials.length; i++ ) {
|
|
|
|
|
-
|
|
|
|
|
- src += '<button id="' + button_name( car, i ) + '">' + materials[ i ][ 0 ] + '</button> ';
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- buttons = document.createElement("div");
|
|
|
|
|
- buttons.innerHTML = src;
|
|
|
|
|
-
|
|
|
|
|
- $( "buttons_materials" ).appendChild( buttons );
|
|
|
|
|
-
|
|
|
|
|
- return buttons;
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function attachButtonMaterials( materials, faceMaterials, material_indices, car ) {
|
|
|
|
|
-
|
|
|
|
|
- for( var i = 0; i < materials.length; i++ ) {
|
|
|
|
|
-
|
|
|
|
|
- $( button_name( car, i ) ).counter = i;
|
|
|
|
|
- $( 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 = [],
|
|
|
|
|
- s = CARS[ car ].scale * 1,
|
|
|
|
|
- r = CARS[ car ].init_rotation,
|
|
|
|
|
- materials = CARS[ car ].materials,
|
|
|
|
|
- mi = CARS[ car ].init_material,
|
|
|
|
|
- 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) {
|
|
function onDocumentMouseMove(event) {
|
|
|
|
|
|
|
|
- mouseY = ( event.clientY - window.innerHeight );
|
|
|
|
|
|
|
+ mouseX = ( event.clientX - windowHalfX ) / 100;
|
|
|
|
|
+ mouseY = ( event.clientY - windowHalfY ) / 100;
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -586,21 +155,25 @@
|
|
|
|
|
|
|
|
function render() {
|
|
function render() {
|
|
|
|
|
|
|
|
- var timer = -0.0002 * Date.now();
|
|
|
|
|
|
|
+ var timer = 0.0001 * Date.now();
|
|
|
|
|
|
|
|
|
|
+ camera.position.x += ( mouseX - camera.position.x ) * .05;
|
|
|
camera.position.y += ( - mouseY - camera.position.y ) * .05;
|
|
camera.position.y += ( - mouseY - camera.position.y ) * .05;
|
|
|
|
|
|
|
|
- camera.position.x = 1000 * Math.cos( timer );
|
|
|
|
|
- camera.position.z = 1000 * Math.sin( timer );
|
|
|
|
|
-
|
|
|
|
|
camera.lookAt( scene.position );
|
|
camera.lookAt( scene.position );
|
|
|
|
|
|
|
|
- effect.render( scene, camera );
|
|
|
|
|
|
|
+ for ( var i = 0, il = spheres.length; i < il; i ++ ) {
|
|
|
|
|
|
|
|
- if ( STATS_ENABLED ) stats.update();
|
|
|
|
|
|
|
+ var sphere = spheres[ i ];
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ sphere.position.x = 5 * Math.cos( timer + i );
|
|
|
|
|
+ sphere.position.y = 5 * Math.sin( timer + i * 1.1 );
|
|
|
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ effect.render( scene, camera );
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
Mr.doob