Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 8e8dfe2d 编写于 作者: M Mr.doob
浏览文件
操作

Tweaked cars demo a bit.

上级 696c7015
隐藏空白更改
内联 并排
Showing with 231 addition and 228 deletion
examples/materials_cars.html
浏览文件 @ 8e8dfe2d
......@@ -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>
......
examples/obj/camaro/.htaccess 已删除 100644 → 0
浏览文件 @ 696c7015
<Files *.js>
SetOutputFilter DEFLATE
</Files>
<Files *.bin>
SetOutputFilter DEFLATE
</Files>
examples/obj/f50/.htaccess 已删除 100644 → 0
浏览文件 @ 696c7015
<Files *.js>
SetOutputFilter DEFLATE
</Files>
<Files *.bin>
SetOutputFilter DEFLATE
</Files>
examples/obj/veyron/.htaccess 已删除 100644 → 0
浏览文件 @ 696c7015
<Files *.js>
SetOutputFilter DEFLATE
</Files>
<Files *.bin>
SetOutputFilter DEFLATE
</Files>
examples/textures/cube/Bridge2/readme.txt 0 → 100644
浏览文件 @ 8e8dfe2d
Author
======
This is the work of Emil Persson, aka Humus.
http://www.humus.name
humus@comhem.se
Legal stuff
===========
This work is free and may be used by anyone for any purpose
and may be distributed freely to anyone using any distribution
media or distribution method as long as this file is included.
Distribution without this file is allowed if it's distributed
with free non-commercial software; however, fair credit of the
original author is expected.
Any commercial distribution of this software requires the written
approval of Emil Persson.
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或