|
|
@@ -17,50 +17,50 @@
|
|
|
a { color:skyblue; text-decoration:none }
|
|
|
canvas { pointer-events:none; z-index:10; position:relative; }
|
|
|
#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
|
|
|
- #d { text-align:center; margin:1em 0 -4.5em 0; z-index:0; position:relative; display:block }
|
|
|
-
|
|
|
+ #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 }
|
|
|
-
|
|
|
+
|
|
|
#car_info { text-align:center; }
|
|
|
#car_name { font-size:1em }
|
|
|
#car_author { font-size:1em }
|
|
|
-
|
|
|
- #status { font-size:0.8em; text-align:left; background:#b00; color:#fff; width:140px; padding:0.25em 0.25em 0.25em 0.5em; position:absolute; right:0px; top:0px; }
|
|
|
+
|
|
|
+ #status { font-size:0.8em; text-align:left; background:#b00; color:#fff; width:140px; padding:0.25em 0.25em 0.25em 0.5em; position:absolute; right:0px; top:0px; z-index:1000; }
|
|
|
</style>
|
|
|
</head>
|
|
|
-
|
|
|
+
|
|
|
<body>
|
|
|
<div id="d">
|
|
|
<div id="info">
|
|
|
- <a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl demo :
|
|
|
+ <a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl demo :
|
|
|
texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank">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">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="status">Loading model ...</div>
|
|
|
-
|
|
|
+
|
|
|
<div id="log"></div>
|
|
|
|
|
|
- <script type="text/javascript" src="../build/Three.js"></script>
|
|
|
+ <script type="text/javascript" src="../build/Three.js"></script>
|
|
|
|
|
|
- <script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
|
|
|
+ <script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
|
|
|
<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
|
|
|
<script type="text/javascript" src="../src/extras/SceneUtils.js"></script>
|
|
|
<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
|
|
|
@@ -70,208 +70,204 @@
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
var STATS_ENABLED = false;
|
|
|
-
|
|
|
- var CARS = {
|
|
|
-
|
|
|
+
|
|
|
+ var CARS = {
|
|
|
+
|
|
|
"veyron": {
|
|
|
-
|
|
|
+
|
|
|
name: "Bugatti Veyron",
|
|
|
path: "obj/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">Troyano</a>',
|
|
|
- init_rotation: [ 0.3, 1.57, 0.0 ],
|
|
|
+ init_rotation: [ 0, 0, 0 /*0.3, 1.57, 0.0*/ ],
|
|
|
scale: 5.5,
|
|
|
init_material: 4,
|
|
|
body_materials: [ 2 ],
|
|
|
-
|
|
|
+
|
|
|
object: null,
|
|
|
buttons: null,
|
|
|
materials: null
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
"gallardo": {
|
|
|
-
|
|
|
+
|
|
|
name: "Lamborghini Gallardo",
|
|
|
path: "obj/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">machman_3d</a>',
|
|
|
- init_rotation: [ 0.2, 1.77, 0.0 ],
|
|
|
+ init_rotation: [ 0, 0, 0 /*0.2, 1.77, 0.0*/ ],
|
|
|
scale: 3.7,
|
|
|
init_material: 9,
|
|
|
body_materials: [ 3 ],
|
|
|
-
|
|
|
+
|
|
|
object: null,
|
|
|
buttons: null,
|
|
|
materials: null
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
"f50": {
|
|
|
-
|
|
|
+
|
|
|
name: "Ferrari F50",
|
|
|
path: "obj/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">daniel sathya</a>',
|
|
|
- init_rotation: [ 0.2, 1.37, 0.0 ],
|
|
|
+ init_rotation: [ 0, 0, 0 /*0.2, 1.37, 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",
|
|
|
path: "obj/camaro",
|
|
|
url: "obj/camaro/CamaroNoUv_bin.js",
|
|
|
author: '<a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank">dskfnwn</a>',
|
|
|
- init_rotation: [ 0.0, 1.0, 0.0 ],
|
|
|
+ init_rotation: [ 0.0, 0.0, 0.0 /*0, 1, 0*/ ],
|
|
|
scale: 75,
|
|
|
init_material: 0,
|
|
|
body_materials: [ 0 ],
|
|
|
-
|
|
|
+
|
|
|
object: null,
|
|
|
buttons: null,
|
|
|
materials: null
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
};
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
var SCREEN_WIDTH = window.innerWidth;
|
|
|
var SCREEN_HEIGHT = window.innerHeight;
|
|
|
|
|
|
- var container;
|
|
|
- var stats;
|
|
|
+ var container, stats;
|
|
|
|
|
|
- var camera;
|
|
|
- var scene;
|
|
|
- var webglRenderer;
|
|
|
+ var camera, scene, webglRenderer;
|
|
|
+ var cameraCube, sceneCube;
|
|
|
|
|
|
var m, mi;
|
|
|
-
|
|
|
- var lightMesh;
|
|
|
-
|
|
|
+
|
|
|
var directionalLight, pointLight;
|
|
|
-
|
|
|
- var mouseX = 0;
|
|
|
- var mouseY = 0;
|
|
|
|
|
|
- var windowHalfX = window.innerWidth >> 1;
|
|
|
- var windowHalfY = window.innerHeight >> 1;
|
|
|
+ var mouseX = 0, mouseY = 0;
|
|
|
+
|
|
|
+ var windowHalfX = window.innerWidth / 2;
|
|
|
+ var windowHalfY = window.innerHeight / 2;
|
|
|
|
|
|
var loader = new THREE.Loader();
|
|
|
-
|
|
|
+
|
|
|
document.addEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
|
|
|
init();
|
|
|
-
|
|
|
- loop();
|
|
|
-
|
|
|
+
|
|
|
setInterval(loop, 1000/60);
|
|
|
-
|
|
|
+
|
|
|
function init() {
|
|
|
|
|
|
container = document.createElement('div');
|
|
|
document.body.appendChild(container);
|
|
|
|
|
|
camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
|
|
|
- camera.position.z = 1000;
|
|
|
+ // camera.position.z = 1000;
|
|
|
camera.updateMatrix();
|
|
|
|
|
|
+ cameraCube = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
|
|
|
+
|
|
|
scene = new THREE.Scene();
|
|
|
-
|
|
|
+ sceneCube = new THREE.Scene();
|
|
|
+
|
|
|
// LIGHTS
|
|
|
|
|
|
var ambient = new THREE.AmbientLight( 0x555555 );
|
|
|
scene.addLight( ambient );
|
|
|
|
|
|
- directionalLight = new THREE.DirectionalLight( 0xffffff );
|
|
|
- directionalLight.position.x = 1;
|
|
|
- directionalLight.position.y = 1;
|
|
|
- directionalLight.position.z = 0.5;
|
|
|
+ directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
|
|
|
+ directionalLight.position.x = 2;
|
|
|
+ directionalLight.position.y = 1.2;
|
|
|
+ directionalLight.position.z = 10;
|
|
|
directionalLight.position.normalize();
|
|
|
scene.addLight( directionalLight );
|
|
|
|
|
|
- pointLight = new THREE.PointLight( 0xffaa00 );
|
|
|
- pointLight.position.x = 0;
|
|
|
- pointLight.position.y = 0;
|
|
|
- pointLight.position.z = 0;
|
|
|
- scene.addLight( pointLight );
|
|
|
-
|
|
|
+ directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
|
|
|
+ directionalLight.position.x = - 2;
|
|
|
+ directionalLight.position.y = 1.2;
|
|
|
+ directionalLight.position.z = - 10;
|
|
|
+ directionalLight.position.normalize();
|
|
|
+ scene.addLight( directionalLight );
|
|
|
|
|
|
- sphere = new Sphere( 100, 16, 8, 1 );
|
|
|
- lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
|
|
|
- lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
|
|
|
- lightMesh.position = pointLight.position;
|
|
|
- lightMesh.overdraw = true;
|
|
|
- lightMesh.updateMatrix();
|
|
|
- scene.addObject(lightMesh);
|
|
|
+ pointLight = new THREE.PointLight( 0xffaa00, 2 );
|
|
|
+ pointLight.position.x = 2000;
|
|
|
+ pointLight.position.y = 1200;
|
|
|
+ pointLight.position.z = 10000;
|
|
|
+ scene.addLight( pointLight );
|
|
|
|
|
|
+ SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
|
|
|
|
|
|
webglRenderer = new THREE.WebGLRenderer( scene );
|
|
|
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
|
webglRenderer.setFaceCulling( 0 );
|
|
|
+ webglRenderer.autoClear = false;
|
|
|
container.appendChild( webglRenderer.domElement );
|
|
|
|
|
|
if ( STATS_ENABLED ) {
|
|
|
-
|
|
|
+
|
|
|
stats = new Stats();
|
|
|
stats.domElement.style.position = 'absolute';
|
|
|
stats.domElement.style.top = '0px';
|
|
|
stats.domElement.style.zIndex = 100;
|
|
|
container.appendChild( stats.domElement );
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
|
|
|
- var r = "textures/cube/SwedishRoyalCastle/";
|
|
|
- var urls = [ r + "px.jpg", r + "nx.jpg",
|
|
|
- r + "py.jpg", r + "ny.jpg",
|
|
|
- r + "pz.jpg", r + "nz.jpg" ];
|
|
|
+ var r = "textures/cube/Bridge2/";
|
|
|
+ var urls = [ r + "posx.jpg", r + "negx.jpg",
|
|
|
+ r + "posy.jpg", r + "negy.jpg",
|
|
|
+ r + "posz.jpg", r + "negz.jpg" ];
|
|
|
|
|
|
var images = ImageUtils.loadArray( urls );
|
|
|
var textureCube = new THREE.TextureCube( images );
|
|
|
-
|
|
|
+
|
|
|
// common materials
|
|
|
-
|
|
|
+
|
|
|
var mlib = {
|
|
|
-
|
|
|
+
|
|
|
"Orange": new THREE.MeshLambertMaterial( { color: 0xff6600, env_map: textureCube, combine: THREE.Mix, reflectivity: 0.3 } ),
|
|
|
"Blue": new THREE.MeshLambertMaterial( { color: 0x001133, env_map: textureCube, combine: THREE.Mix, reflectivity: 0.3 } ),
|
|
|
"Red": new THREE.MeshLambertMaterial( { color: 0x660000, env_map: textureCube, combine: THREE.Mix, reflectivity: 0.5 } ),
|
|
|
"Black": new THREE.MeshLambertMaterial( { color: 0x000000, env_map: textureCube, combine: THREE.Mix, reflectivity: 0.5 } ),
|
|
|
"White": new THREE.MeshLambertMaterial( { color: 0xffffff, env_map: textureCube, combine: THREE.Mix, reflectivity: 0.5 } ),
|
|
|
-
|
|
|
+
|
|
|
"Carmine": new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, env_map: textureCube, combine: THREE.Multiply } ),
|
|
|
"Gold": new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, env_map: textureCube, combine: THREE.Multiply } ),
|
|
|
"Bronze": new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, env_map: textureCube, combine: THREE.Mix, reflectivity: 0.5 } ),
|
|
|
"Chrome": new THREE.MeshPhongMaterial( { color: 0xffffff, specular:0xffffff, env_map: textureCube, combine: THREE.Multiply } ),
|
|
|
-
|
|
|
+
|
|
|
"Orange metal": new THREE.MeshLambertMaterial( { color: 0xff6600, env_map: textureCube, combine: THREE.Multiply } ),
|
|
|
"Blue metal": new THREE.MeshLambertMaterial( { color: 0x001133, env_map: textureCube, combine: THREE.Multiply } ),
|
|
|
"Red metal": new THREE.MeshLambertMaterial( { color: 0x770000, env_map: textureCube, combine: THREE.Multiply } ),
|
|
|
"Green metal": new THREE.MeshLambertMaterial( { color: 0x007711, env_map: textureCube, combine: THREE.Multiply } ),
|
|
|
"Black metal": new THREE.MeshLambertMaterial( { color: 0x222222, env_map: textureCube, combine: THREE.Multiply } ),
|
|
|
-
|
|
|
+
|
|
|
"Pure chrome": new THREE.MeshLambertMaterial( { color: 0xffffff, env_map: textureCube } ),
|
|
|
"Dark chrome": new THREE.MeshLambertMaterial( { color: 0x444444, env_map: textureCube } ),
|
|
|
"Darker chrome":new THREE.MeshLambertMaterial( { color: 0x222222, env_map: textureCube } ),
|
|
|
-
|
|
|
+
|
|
|
"Black glass": new THREE.MeshLambertMaterial( { color: 0x101016, env_map: textureCube, opacity: 0.975 } ),
|
|
|
"Dark glass": new THREE.MeshLambertMaterial( { color: 0x101046, env_map: textureCube, opacity: 0.25 } ),
|
|
|
"Blue glass": new THREE.MeshLambertMaterial( { color: 0x668899, env_map: textureCube, opacity: 0.75 } ),
|
|
|
"Light glass": new THREE.MeshBasicMaterial( { color: 0x223344, env_map: textureCube, opacity: 0.25, combine: THREE.Mix, reflectivity: 0.25 } ),
|
|
|
-
|
|
|
+
|
|
|
"Red glass": new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.75 } ),
|
|
|
"Yellow glass": new THREE.MeshLambertMaterial( { color: 0xffffaa, opacity: 0.75 } ),
|
|
|
"Orange glass": new THREE.MeshLambertMaterial( { color: 0x995500, opacity: 0.75 } ),
|
|
|
-
|
|
|
+
|
|
|
"Orange glass 50": new THREE.MeshLambertMaterial( { color: 0xffbb00, opacity: 0.5 } ),
|
|
|
"Red glass 50": new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.5 } ),
|
|
|
|
|
|
@@ -279,43 +275,43 @@
|
|
|
"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
|
|
|
@@ -323,34 +319,34 @@
|
|
|
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;
|
|
|
+
|
|
|
+ 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
|
|
|
@@ -359,39 +355,39 @@
|
|
|
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;
|
|
|
+
|
|
|
+ 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
|
|
|
@@ -417,16 +413,16 @@
|
|
|
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" ] ],
|
|
|
@@ -438,20 +434,20 @@
|
|
|
[ "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;
|
|
|
+
|
|
|
+ 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
|
|
|
@@ -460,181 +456,189 @@
|
|
|
5: mlib[ "Gray shiny" ], // interior
|
|
|
6: mlib[ "Black rough" ], // tire
|
|
|
7: mlib[ "Fullblack rough" ], // tireling
|
|
|
- 8: mlib[ "Fullblack rough" ] // behind grille
|
|
|
-
|
|
|
+ 8: mlib[ "Fullblack rough" ] // behind grille
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
loader.loadBinary( CARS[ "veyron" ].url, function( geometry ) { createScene( geometry, "veyron" ) }, CARS[ "veyron" ].path, updateProgress );
|
|
|
-
|
|
|
+
|
|
|
for(var c in CARS) initCarButton( c );
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
function updateProgress( progress ) {
|
|
|
-
|
|
|
+
|
|
|
var message = "Loaded ";
|
|
|
-
|
|
|
+
|
|
|
if ( progress.total ) {
|
|
|
-
|
|
|
+
|
|
|
message += ( 100 * progress.loaded / progress.total ).toFixed(0) + "%";
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
} else {
|
|
|
-
|
|
|
+
|
|
|
message += ( progress.loaded / 1000 ).toFixed(2) + " KB";
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
|
|
|
$( "status" ).innerHTML = message;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
function initCarButton( car ) {
|
|
|
-
|
|
|
- $( car ).addEventListener( 'click', function() {
|
|
|
-
|
|
|
+
|
|
|
+ $( car ).addEventListener( 'click', function() {
|
|
|
+
|
|
|
if ( ! CARS[ car ].object ) {
|
|
|
-
|
|
|
+
|
|
|
$( "status" ).style.display = "block";
|
|
|
loader.loadBinary( CARS[ car ].url, function( geometry ) { createScene( geometry, car ) }, CARS[ car ].path, updateProgress );
|
|
|
-
|
|
|
+
|
|
|
} 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 ) {
|
|
|
-
|
|
|
+
|
|
|
/*
|
|
|
scene.removeObject( CARS[ c ].object );
|
|
|
webglRenderer.removeObject( scene, CARS[ c ].object );
|
|
|
CARS[ c ].object = null;
|
|
|
*/
|
|
|
-
|
|
|
+
|
|
|
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, geometry, material_indices, car ) {
|
|
|
-
|
|
|
+
|
|
|
for( var i = 0; i < materials.length; i++ ) {
|
|
|
-
|
|
|
+
|
|
|
$( button_name( car, i ) ).counter = i;
|
|
|
- $( button_name( car, i ) ).addEventListener( 'click', function() {
|
|
|
+ $( button_name( car, i ) ).addEventListener( 'click', function() {
|
|
|
|
|
|
for ( var j = 0; j < material_indices.length; j++ ) {
|
|
|
-
|
|
|
+
|
|
|
geometry.materials[ material_indices [ j ] ][ 0 ] = materials[ this.counter ][ 1 ];
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}, false );
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
function createScene( geometry, car ) {
|
|
|
|
|
|
$( "status" ).innerHTML = "Creating model ...";
|
|
|
-
|
|
|
+
|
|
|
var m = new THREE.MeshFaceMaterial(),
|
|
|
- s = CARS[ car ].scale,
|
|
|
+ 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 ) {
|
|
|
-
|
|
|
+
|
|
|
geometry.materials[ i ][ 0 ] = CARS[ car ].mmap[ i ];
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
CARS[ car ].object = SceneUtils.addMesh( scene, geometry, s, 0, 0, 0, r[0], r[1], r[2], m );
|
|
|
-
|
|
|
+
|
|
|
CARS[ car ].buttons = createButtons( materials.body, car );
|
|
|
attachButtonMaterials( materials.body, geometry, bm, car );
|
|
|
-
|
|
|
+
|
|
|
switchCar( car );
|
|
|
-
|
|
|
+
|
|
|
$( "status" ).style.display = "none";
|
|
|
$( "status" ).innerHTML = "Loading model ...";
|
|
|
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
function onDocumentMouseMove(event) {
|
|
|
|
|
|
mouseX = ( event.clientX - windowHalfX );
|
|
|
- mouseY = ( event.clientY - windowHalfY );
|
|
|
+ mouseY = ( event.clientY - window.innerHeight );
|
|
|
|
|
|
}
|
|
|
|
|
|
var r = 0;
|
|
|
-
|
|
|
+
|
|
|
function loop() {
|
|
|
|
|
|
- camera.position.x += ( mouseX - camera.position.x ) * .05;
|
|
|
+ r -= 0.005;
|
|
|
+
|
|
|
+ // camera.position.x += ( mouseX - camera.position.x ) * .05;
|
|
|
camera.position.y += ( - mouseY - camera.position.y ) * .05;
|
|
|
|
|
|
- lightMesh.position.x = 1500 * Math.cos( r );
|
|
|
- lightMesh.position.z = 1500 * Math.sin( r );
|
|
|
+ camera.position.x = 1000 * Math.cos( r );
|
|
|
+ camera.position.z = 1000 * Math.sin( r );
|
|
|
|
|
|
- r += 0.01;
|
|
|
+ cameraCube.target.position.x = - camera.position.x;
|
|
|
+ cameraCube.target.position.y = - camera.position.y;
|
|
|
+ cameraCube.target.position.z = - camera.position.z;
|
|
|
|
|
|
+ webglRenderer.clear();
|
|
|
+ webglRenderer.render( sceneCube, cameraCube );
|
|
|
webglRenderer.render( scene, camera );
|
|
|
|
|
|
+ // webglRenderer.render( scene, camera );
|
|
|
+
|
|
|
if ( STATS_ENABLED ) stats.update();
|
|
|
|
|
|
}
|
|
|
|
|
|
function log(text) {
|
|
|
-
|
|
|
+
|
|
|
var e = document.getElementById("log");
|
|
|
e.innerHTML = text + "<br/>" + e.innerHTML;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
</body>
|
Mr.doob
