Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

WebGL Effects examples clean up.

上级 e1bf2be9
隐藏空白更改
内联 并排
Showing with 12 addition and 1002 deletion
examples/index.html
浏览文件 @ 121171b9
......@@ -115,6 +115,10 @@
"webgl_custom_attributes_particles",
"webgl_custom_attributes_particles2",
"webgl_custom_attributes_particles3",
"webgl_effects_anaglyph",
"webgl_effects_crosseyed",
"webgl_effects_oculusrift",
"webgl_effects_parallaxbarrier",
"webgl_geometries",
"webgl_geometries2",
"webgl_geometry_colors",
......@@ -181,15 +185,10 @@
"webgl_materials_bumpmap",
"webgl_materials_bumpmap_skin",
"webgl_materials_cars",
"webgl_materials_cars_anaglyph",
"webgl_materials_cars_camaro",
"webgl_materials_cars_camaro_crosseyed",
"webgl_materials_cars_parallaxbarrier",
"webgl_materials_cubemap",
"webgl_materials_cubemap_balls_reflection",
"webgl_materials_cubemap_balls_reflection_anaglyph",
"webgl_materials_cubemap_balls_refraction",
"webgl_materials_cubemap_balls_refraction_crosseyed",
"webgl_materials_cubemap_dynamic",
"webgl_materials_cubemap_dynamic2",
"webgl_materials_cubemap_escher",
......
examples/webgl_materials_cubemap_balls_reflection_anaglyph.html → examples/webgl_effects_anaglyph.html
浏览文件 @ 121171b9
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials - cube reflection [balls]</title>
<title>three.js webgl - effects - anaglyph</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
......@@ -33,7 +33,7 @@
</head>
<body>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - webgl cube reflection demo. skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank">Paul Debevec</a></div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - effects - anaglyph. skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank">Paul Debevec</a></div>
<script src="../build/three.min.js"></script>
......
examples/webgl_materials_cubemap_balls_refraction_crosseyed.html → examples/webgl_effects_crosseyed.html
浏览文件 @ 121171b9
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials - cube refraction [balls]</title>
<title>three.js webgl - effects - crosseyed</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
......@@ -34,7 +34,7 @@
<body>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - webgl cube refraction demo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a>
<a href="http://threejs.org" target="_blank">three.js</a> - effects - crosseyed. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a>
- O, P : change eye separation
</div>
......
examples/webgl_geometry_minecraft_oculusrift.html → examples/webgl_effects_oculusrift.html
浏览文件 @ 121171b9
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - geometry - minecraft - Oculus Rift</title>
<title>three.js webgl - effects - oculus rift</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
......@@ -39,7 +39,7 @@
<body>
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - <a href="http://www.minecraft.net/" target="_blank">minecraft</a> demo for oculus rift. featuring <a href="http://painterlypack.net/" target="_blank">painterly pack</a><br />(left click: forward, right click: backward, h: hide text)</div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - effects - oculus rift. featuring <a href="http://painterlypack.net/" target="_blank">painterly pack</a><br />(left click: forward, right click: backward, h: hide text)</div>
<script src="../build/three.min.js"></script>
......
examples/webgl_materials_cars_parallaxbarrier.html → examples/webgl_effects_parallaxbarrier.html
浏览文件 @ 121171b9
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials - cube reflection [cars]</title>
<title>three.js webgl - effects - parallax barrier</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
......@@ -36,7 +36,7 @@
<body>
<div id="d">
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> webgl demo :
<a href="http://threejs.org" target="_blank">three.js</a> webgl - effects - parallax barrier.
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>
......
examples/webgl_materials_cars_anaglyph.html 已删除 100644 → 0
浏览文件 @ e1bf2be9
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials - cube reflection [cars]</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 {
background:#000;
color:#fff;
padding:0;
margin:0;
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 }
#car_info { text-align:center; }
#car_name { font-size:1em }
#car_author { font-size:1em }
#oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }
</style>
</head>
<body>
<div id="d">
<div id="info">
<a href="http://threejs.org" 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>
<script src="../build/three.min.js"></script>
<script src="js/effects/AnaglyphEffect.js"></script>
<script src="js/loaders/BinaryLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
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">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">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">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">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 camera, scene, renderer, effect;
var m, mi;
var directionalLight, pointLight;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var loader = new THREE.BinaryLoader( true );
document.body.appendChild( loader.statusDomElement );
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
scene = new THREE.Scene();
// 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 );
// Skybox
var shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;
var material = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
side: THREE.BackSide
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( 100000, 100000, 100000 ), material );
scene.add( mesh );
//
renderer = new THREE.WebGLRenderer();
renderer.setFaceCulling( THREE.CullFaceNone );
var width = window.innerWidth || 2;
var height = window.innerHeight || 2;
effect = new THREE.AnaglyphEffect( renderer );
effect.setSize( width, height );
container.appendChild( renderer.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 );
}
document.addEventListener('mousemove', onDocumentMouseMove, false);
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 textureCube = THREE.ImageUtils.loadTextureCube( urls );
// 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.Multiply } ),
"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 );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
}
function initCarButton( car ) {
$( car ).addEventListener( 'click', function() {
if ( ! CARS[ car ].object ) {
loader.statusDomElement.style.display = "block";
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, faceMaterial, 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 ++ ) {
faceMaterial.materials[ material_indices [ j ] ] = materials[ this.counter ][ 1 ];
}
}, false );
}
}
function createScene( geometry, car ) {
loader.statusDomElement.innerHTML = "Creating model ...";
var m = new THREE.MeshFaceMaterial(),
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.materials[ 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 );
loader.statusDomElement.style.display = "none";
loader.statusDomElement.innerHTML = "Loading model ...";
}
function onDocumentMouseMove(event) {
mouseY = ( event.clientY - window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var timer = -0.0002 * Date.now();
camera.position.x = 1000 * Math.cos( timer );
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.position.z = 1000 * Math.sin( timer );
camera.lookAt( scene.position );
effect.render( scene, camera );
if ( STATS_ENABLED ) stats.update();
}
</script>
</body>
</html>
examples/webgl_materials_cars_camaro_crosseyed.html 已删除 100644 → 0
浏览文件 @ e1bf2be9
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials - cube reflection [camaro]</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 {
background:#000;
color:#fff;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
}
h1 { }
a { color:skyblue }
canvas { pointer-events:none; z-index:10; position:relative; }
#d { text-align:center; margin:1em 0 -2.5em 0; z-index:0; position:relative; display:block }
#buttons { margin:0.5em 0 0 0 }
button { font-family:georgia; border:0; background:#222; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:3px }
button:hover { background:#333 }
</style>
</head>
<body>
<div id="d">
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - webgl cube reflection demo. chevrolet camaro by <a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank">dskfnwn</a>
- O, P : change eye separation
</div>
<div id="buttons"></div>
</div>
<script src="../build/three.min.js"></script>
<script src="js/effects/CrosseyedEffect.js"></script>
<script src="js/loaders/BinaryLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, stats;
var camera, scene, renderer, effect;
var lightMesh;
var directionalLight, pointLight;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// CAMERA
camera = new THREE.PerspectiveCamera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
camera.position.z = 1000;
camera.target = new THREE.Vector3( 0, 0, 0 );
scene = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight( 0x020202 );
scene.add( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 1, 1, 0.5 ).normalize();
scene.add( directionalLight );
pointLight = new THREE.PointLight( 0xffaa00 );
pointLight.position.set( 0, 0, 0 );
scene.add( pointLight );
sphere = new THREE.SphereGeometry( 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;
scene.add( lightMesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setFaceCulling( THREE.CullFaceNone );
container.appendChild( renderer.domElement );
effect = new THREE.CrosseyedEffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );
effect.separation = 20;
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'keydown', onKeyDown, false );
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 textureCube = THREE.ImageUtils.loadTextureCube( urls );
var camaroMaterials = {
body: {
Orange: new THREE.MeshLambertMaterial( {
color: 0xff6600,
envMap: textureCube,
combine: THREE.MixOperation,
reflectivity: 0.3
} ),
Blue: new THREE.MeshLambertMaterial( {
color: 0x226699,
envMap: textureCube,
combine: THREE.MixOperation,
reflectivity: 0.3
} ),
Red: new THREE.MeshLambertMaterial( {
color: 0x660000,
envMap: textureCube,
combine: THREE.MixOperation,
reflectivity: 0.5
} ),
Black: new THREE.MeshLambertMaterial( {
color: 0x000000,
envMap: textureCube,
combine: THREE.MixOperation,
reflectivity: 0.5
} ),
White: new THREE.MeshLambertMaterial( {
color: 0xffffff,
envMap: textureCube,
combine: THREE.MixOperation,
reflectivity: 0.5
} ),
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.5
} ),
Chrome: new THREE.MeshPhongMaterial( {
color: 0xffffff,
specular:0xffffff,
envMap: textureCube,
combine: THREE.MultiplyOperation
} )
},
chrome: new THREE.MeshLambertMaterial( {
color: 0xffffff,
envMap: textureCube
} ),
darkchrome: new THREE.MeshLambertMaterial( {
color: 0x444444,
envMap: textureCube
} ),
glass: new THREE.MeshBasicMaterial( {
color: 0x223344,
envMap: textureCube,
opacity: 0.25,
combine: THREE.MixOperation,
reflectivity: 0.25,
transparent: true
} ),
tire: new THREE.MeshLambertMaterial( {
color: 0x050505
} ),
interior: new THREE.MeshPhongMaterial( {
color: 0x050505,
shininess: 20
} ),
black: new THREE.MeshLambertMaterial( {
color: 0x000000
} )
};
var loader = new THREE.BinaryLoader();
loader.load( "obj/camaro/CamaroNoUv_bin.js", function( geometry ) { createScene( geometry, camaroMaterials ) } );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
}
function createButtons( materials, faceMaterial ) {
var buttons = document.getElementById( "buttons" );
for ( var key in materials ) {
var button = document.createElement( 'button' );
button.textContent = key;
button.addEventListener( 'click', function ( event ) {
faceMaterial.materials[ 0 ] = materials[ this.textContent ];
}, false );
buttons.appendChild( button );
}
}
function createScene( geometry, materials ) {
var s = 75, m = new THREE.MeshFaceMaterial();
m.materials[ 0 ] = materials.body[ "Orange" ]; // car body
m.materials[ 1 ] = materials.chrome; // wheels chrome
m.materials[ 2 ] = materials.chrome; // grille chrome
m.materials[ 3 ] = materials.darkchrome; // door lines
m.materials[ 4 ] = materials.glass; // windshield
m.materials[ 5 ] = materials.interior; // interior
m.materials[ 6 ] = materials.tire; // tire
m.materials[ 7 ] = materials.black; // tireling
m.materials[ 8 ] = materials.black; // behind grille
var mesh = new THREE.Mesh( geometry, m );
mesh.rotation.y = 1;
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.add( mesh );
createButtons( materials.body, m );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function onKeyDown ( event ) {
switch( event.keyCode ) {
/* O */
case 79: effect.separation -= 0.5; break;
/* P */
case 80: effect.separation += 0.5; break;
}
console.log( effect.separation );
};
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = -0.0002 * Date.now();
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( camera.target );
lightMesh.position.x = 1500 * Math.cos( timer );
lightMesh.position.z = 1500 * Math.sin( timer );
effect.render( scene, camera );
}
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或