mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-08 20:46:21 +10:00
Parallax Barrier WebGL Renderer
Pretty useless, no way I can try it and it's probably done in hardware anyway. But looks cool :P http://en.wikipedia.org/wiki/Parallax_barrier
This commit is contained in:
Mr.doob
@@ -0,0 +1,614 @@
|
||||
<!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://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>
|
||||
|
||||
<script src="../build/Three.js"></script>
|
||||
<script src="../src/extras/renderers/ParallaxBarrierWebGLRenderer.js"></script>
|
||||
|
||||
<script src="js/Detector.js"></script>
|
||||
<script src="js/RequestAnimationFrame.js"></script>
|
||||
<script src="js/Stats.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;
|
||||
|
||||
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( 0x555555 );
|
||||
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.ShaderUtils.lib[ "cube" ];
|
||||
shader.uniforms[ "tCube" ].texture = textureCube;
|
||||
|
||||
var material = new THREE.ShaderMaterial( {
|
||||
|
||||
fragmentShader: shader.fragmentShader,
|
||||
vertexShader: shader.vertexShader,
|
||||
uniforms: shader.uniforms
|
||||
|
||||
} ),
|
||||
|
||||
mesh = new THREE.Mesh( new THREE.CubeGeometry( 100000, 100000, 100000 ), material );
|
||||
mesh.flipSided = true;
|
||||
scene.add( mesh );
|
||||
|
||||
//
|
||||
|
||||
renderer = new THREE.ParallaxBarrierWebGLRenderer();
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
renderer.setFaceCulling( 0 );
|
||||
|
||||
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( { model: CARS[ "veyron" ].url, callback: function( geometry ) { createScene( geometry, "veyron" ) } } );
|
||||
|
||||
for( var c in CARS ) initCarButton( c );
|
||||
|
||||
}
|
||||
|
||||
function initCarButton( car ) {
|
||||
|
||||
$( car ).addEventListener( 'click', function() {
|
||||
|
||||
if ( ! CARS[ car ].object ) {
|
||||
|
||||
loader.statusDomElement.style.display = "block";
|
||||
loader.load( { model: CARS[ car ].url, callback: 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, 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() {
|
||||
|
||||
for ( var j = 0; j < material_indices.length; j++ ) {
|
||||
|
||||
geometry.materials[ material_indices [ j ] ][ 0 ] = 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 ) {
|
||||
|
||||
geometry.materials[ i ][ 0 ] = 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, geometry, 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 = - new Date().getTime() * 0.0002;
|
||||
|
||||
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 );
|
||||
|
||||
renderer.render( scene, camera );
|
||||
|
||||
if ( STATS_ENABLED ) stats.update();
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,161 @@
|
||||
/**
|
||||
* @author mrdoob / http://mrdoob.com/
|
||||
*/
|
||||
|
||||
if ( THREE.WebGLRenderer ) {
|
||||
|
||||
THREE.ParallaxBarrierWebGLRenderer = function ( parameters ) {
|
||||
|
||||
THREE.WebGLRenderer.call( this, parameters );
|
||||
|
||||
var _this = this, _setSize = this.setSize, _render = this.render;
|
||||
|
||||
var _cameraL = new THREE.PerspectiveCamera(),
|
||||
_cameraR = new THREE.PerspectiveCamera();
|
||||
|
||||
var eyeRight = new THREE.Matrix4(),
|
||||
eyeLeft = new THREE.Matrix4(),
|
||||
focalLength = 125,
|
||||
aspect, near, fov;
|
||||
|
||||
_cameraL.matrixAutoUpdate = _cameraR.matrixAutoUpdate = false;
|
||||
|
||||
var _params = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
|
||||
|
||||
var _renderTargetL = new THREE.WebGLRenderTarget( 512, 512, _params ),
|
||||
_renderTargetR = new THREE.WebGLRenderTarget( 512, 512, _params );
|
||||
|
||||
var _camera = new THREE.PerspectiveCamera( 53, 1, 1, 10000 );
|
||||
_camera.position.z = 2;
|
||||
|
||||
_material = new THREE.ShaderMaterial( {
|
||||
|
||||
uniforms: {
|
||||
|
||||
"mapLeft": { type: "t", value: 0, texture: _renderTargetL },
|
||||
"mapRight": { type: "t", value: 1, texture: _renderTargetR }
|
||||
|
||||
},
|
||||
|
||||
vertexShader: [
|
||||
|
||||
"varying vec2 vUv;",
|
||||
|
||||
"void main() {",
|
||||
|
||||
"vUv = vec2( uv.x, 1.0 - uv.y );",
|
||||
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
|
||||
|
||||
"}"
|
||||
|
||||
].join("\n"),
|
||||
|
||||
fragmentShader: [
|
||||
|
||||
"uniform sampler2D mapLeft;",
|
||||
"uniform sampler2D mapRight;",
|
||||
"varying vec2 vUv;",
|
||||
|
||||
"void main() {",
|
||||
|
||||
"vec2 uv = vUv;",
|
||||
|
||||
"if ( ( mod(gl_FragCoord.x, 2.0) ) > 1.00 ) {",
|
||||
|
||||
"gl_FragColor = texture2D( mapLeft, uv );",
|
||||
|
||||
"} else {",
|
||||
|
||||
"gl_FragColor = texture2D( mapRight, uv );",
|
||||
|
||||
"}",
|
||||
|
||||
"}"
|
||||
|
||||
].join("\n")
|
||||
|
||||
} );
|
||||
|
||||
var _scene = new THREE.Scene();
|
||||
_scene.add( new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), _material ) );
|
||||
|
||||
this.setSize = function ( width, height ) {
|
||||
|
||||
_setSize.call( _this, width, height );
|
||||
|
||||
_renderTargetL.width = width;
|
||||
_renderTargetL.height = height;
|
||||
|
||||
_renderTargetR.width = width;
|
||||
_renderTargetR.height = height;
|
||||
|
||||
};
|
||||
|
||||
/*
|
||||
* Renderer now uses an asymmetric perspective projection (http://paulbourke.net/miscellaneous/stereographics/stereorender/).
|
||||
* Each camera is offset by the eye seperation and its projection matrix is also skewed asymetrically back to converge on the same
|
||||
* projection plane. Added a focal length parameter to, this is where the parallax is equal to 0.
|
||||
*/
|
||||
|
||||
this.render = function ( scene, camera, renderTarget, forceClear ) {
|
||||
|
||||
camera.update( null, true );
|
||||
|
||||
var hasCameraChanged = aspect !== camera.aspect || near !== camera.near || fov !== camera.fov;
|
||||
|
||||
if( hasCameraChanged ) {
|
||||
|
||||
aspect = camera.aspect;
|
||||
near = camera.near;
|
||||
fov = camera.fov;
|
||||
|
||||
var projectionMatrix = camera.projectionMatrix.clone(),
|
||||
eyeSep = focalLength / 30 * 0.5,
|
||||
eyeSepOnProjection = eyeSep * near / focalLength,
|
||||
ymax = near * Math.tan( fov * Math.PI / 360 ),
|
||||
xmin, xmax;
|
||||
|
||||
//translate xOffset
|
||||
|
||||
eyeRight.n14 = eyeSep;
|
||||
eyeLeft.n14 = -eyeSep;
|
||||
|
||||
//For left eye
|
||||
|
||||
xmin = -ymax * aspect + eyeSepOnProjection;
|
||||
xmax = ymax * aspect + eyeSepOnProjection;
|
||||
projectionMatrix.n11 = 2 * near / ( xmax - xmin );
|
||||
projectionMatrix.n13 = ( xmax + xmin ) / ( xmax - xmin );
|
||||
_cameraL.projectionMatrix = projectionMatrix.clone();
|
||||
|
||||
//for right eye
|
||||
|
||||
xmin = -ymax * aspect - eyeSepOnProjection;
|
||||
xmax = ymax * aspect - eyeSepOnProjection;
|
||||
projectionMatrix.n11 = 2 * near / ( xmax - xmin );
|
||||
projectionMatrix.n13 = ( xmax + xmin ) / ( xmax - xmin );
|
||||
_cameraR.projectionMatrix = projectionMatrix.clone();
|
||||
|
||||
}
|
||||
|
||||
_cameraL.matrix = camera.matrixWorld.clone().multiplySelf( eyeLeft );
|
||||
_cameraL.update( null, true );
|
||||
_cameraL.position.copy( camera.position );
|
||||
_cameraL.near = near;
|
||||
_cameraL.far = camera.far;
|
||||
_render.call( _this, scene, _cameraL, _renderTargetL, true );
|
||||
|
||||
_cameraR.matrix = camera.matrixWorld.clone().multiplySelf( eyeRight );
|
||||
_cameraR.update( null, true );
|
||||
_cameraR.position.copy( camera.position );
|
||||
_cameraR.near = near;
|
||||
_cameraR.far = camera.far;
|
||||
_render.call( _this, scene, _cameraR, _renderTargetR, true );
|
||||
|
||||
_render.call( _this, _scene, _camera );
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
Reference in New Issue
Block a user