Skip to content

Commit 96f1e7f

Browse files
eduardolundgreneduardolundgren
committed
Resources
1 parent 9ffe8db commit 96f1e7f

11 files changed

Lines changed: 405 additions & 0 deletions

File tree

‎examples/css/camaro.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
body {
2+
background: #000;
3+
color: #fff;
4+
font-family: georgia;
5+
margin: 0;
6+
overflow: hidden;
7+
padding: 0;
8+
text-align: center;
9+
}
10+
11+
h1 {
12+
13+
}
14+
15+
a {
16+
color: skyblue
17+
}
18+
19+
canvas {
20+
pointer-events: none;
21+
position: relative;
22+
z-index: 10;
23+
}
24+
25+
#d {
26+
display: block;
27+
margin: 1em 0 -2.5em 0;
28+
position: relative;
29+
text-align: center;
30+
z-index: 0;
31+
}
32+
33+
#buttons {
34+
margin: 0.5em 0 0 0
35+
}
36+
37+
button {
38+
background: #222;
39+
border: 0;
40+
border-radius: 3px;
41+
color: #fff;
42+
cursor: pointer;
43+
font-family: georgia;
44+
padding: 0.2em 0.5em;
45+
}
46+
47+
button:hover {
48+
background: #333
49+
}
50+
51+
canvas {
52+
-moz-transform: scale(-1, 1);
53+
-o-transform: scale(-1, 1);
54+
-webkit-transform: scale(-1, 1);
55+
filter: FlipH;
56+
transform: scale(-1, 1);
57+
}
58+
59+
#videoContainer {
60+
position: absolute;
61+
top: 10px;
62+
right: 10px;
63+
border: 5px solid #fff;
64+
}

‎examples/js/threejs/camaro.js‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
2+
3+
var SCREEN_WIDTH = window.innerWidth;
4+
var SCREEN_HEIGHT = window.innerHeight;
5+
6+
var container, stats;
7+
8+
var camera, scene, renderer;
9+
10+
var lightMesh;
11+
12+
var directionalLight, pointLight;
13+
14+
var mouseX = 0, mouseY = 0;
15+
16+
var windowHalfX = window.innerWidth / 2;
17+
var windowHalfY = window.innerHeight / 2;
18+
19+
init();
20+
animate();
21+
22+
function init() {
23+
24+
container = document.createElement( 'div' );
25+
document.body.appendChild( container );
26+
27+
scene = new THREE.Scene();
28+
29+
// CAMERA
30+
31+
camera = new THREE.PerspectiveCamera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
32+
camera.position.z = 1000;
33+
scene.add( camera );
34+
35+
// LIGHTS
36+
37+
var ambient = new THREE.AmbientLight( 0x020202 );
38+
scene.add( ambient );
39+
40+
directionalLight = new THREE.DirectionalLight( 0xffffff );
41+
directionalLight.position.set( 1, 1, 0.5 ).normalize();
42+
scene.add( directionalLight );
43+
44+
pointLight = new THREE.PointLight( 0xffaa00 );
45+
pointLight.position.set( 0, 0, 0 );
46+
scene.add( pointLight );
47+
48+
sphere = new THREE.SphereGeometry( 100, 16, 8 );
49+
lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
50+
lightMesh.scale.set( 0.05, 0.05, 0.05 );
51+
lightMesh.position = pointLight.position;
52+
scene.add( lightMesh );
53+
54+
renderer = new THREE.WebGLRenderer();
55+
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
56+
renderer.setFaceCulling( 0 );
57+
58+
container.appendChild( renderer.domElement );
59+
60+
stats = new Stats();
61+
stats.domElement.style.position = 'absolute';
62+
stats.domElement.style.top = '0px';
63+
stats.domElement.style.zIndex = 100;
64+
65+
container.appendChild( stats.domElement );
66+
67+
// renderer.domElement.classList.add('flip-horizontally');
68+
69+
// document.addEventListener('mousemove', onDocumentMouseMove, false);
70+
71+
var r = "js/threejs/textures/cube/SwedishRoyalCastle/";
72+
var urls = [ r + "px.jpg", r + "nx.jpg",
73+
r + "py.jpg", r + "ny.jpg",
74+
r + "pz.jpg", r + "nz.jpg" ];
75+
76+
var textureCube = THREE.ImageUtils.loadTextureCube( urls );
77+
78+
var camaroMaterials = {
79+
80+
body: [],
81+
chrome: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube } ),
82+
darkchrome: new THREE.MeshLambertMaterial( { color: 0x444444, envMap: textureCube } ),
83+
glass: new THREE.MeshBasicMaterial( { color: 0x223344, envMap: textureCube, opacity: 0.25, combine: THREE.MixOperation, reflectivity: 0.25, transparent: true } ),
84+
tire: new THREE.MeshLambertMaterial( { color: 0x050505 } ),
85+
interior: new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } ),
86+
black: new THREE.MeshLambertMaterial( { color: 0x000000 } )
87+
88+
}
89+
90+
camaroMaterials.body.push( [ "Orange", new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
91+
camaroMaterials.body.push( [ "Blue", new THREE.MeshLambertMaterial( { color: 0x226699, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ) ] );
92+
camaroMaterials.body.push( [ "Red", new THREE.MeshLambertMaterial( { color: 0x660000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
93+
camaroMaterials.body.push( [ "Black", new THREE.MeshLambertMaterial( { color: 0x000000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
94+
camaroMaterials.body.push( [ "White", new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
95+
96+
camaroMaterials.body.push( [ "Carmine", new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, envMap: textureCube, combine: THREE.MultiplyOperation } ) ] );
97+
camaroMaterials.body.push( [ "Gold", new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, envMap: textureCube, combine: THREE.MultiplyOperation } ) ] );
98+
camaroMaterials.body.push( [ "Bronze", new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.5 } ) ] );
99+
camaroMaterials.body.push( [ "Chrome", new THREE.MeshPhongMaterial( { color: 0xffffff, specular:0xffffff, envMap: textureCube, combine: THREE.MultiplyOperation } ) ] );
100+
101+
var loader = new THREE.BinaryLoader();
102+
loader.load( "js/threejs/obj/camaro/CamaroNoUv_bin.js", function( geometry ) { createScene( geometry, camaroMaterials ) } );
103+
104+
}
105+
106+
function $( id ) { return document.getElementById( id ) }
107+
108+
109+
function createButtons( materials, geometry ) {
110+
111+
var i, src = "", parent = $( "buttons" );
112+
113+
for( i = 0; i < materials.length; i ++ ) {
114+
115+
src += '<button id="m' + i + '">' + materials[ i ][ 0 ] + '</button>';
116+
117+
}
118+
119+
parent.innerHTML = src;
120+
121+
for( i = 0; i < materials.length; i ++ ) {
122+
123+
$( "m" + i ).counter = i;
124+
$( "m" + i ).addEventListener( 'click', function() { geometry.materials[ 0 ] = materials[ this.counter ][ 1 ] }, false );
125+
126+
}
127+
128+
}
129+
130+
function createScene( geometry, materials ) {
131+
132+
var s = 75, m = new THREE.MeshFaceMaterial();
133+
134+
geometry.materials[ 0 ] = materials.body[ 0 ][ 1 ]; // car body
135+
geometry.materials[ 1 ] = materials.chrome; // wheels chrome
136+
geometry.materials[ 2 ] = materials.chrome; // grille chrome
137+
geometry.materials[ 3 ] = materials.darkchrome; // door lines
138+
geometry.materials[ 4 ] = materials.glass; // windshield
139+
geometry.materials[ 5 ] = materials.interior; // interior
140+
geometry.materials[ 6 ] = materials.tire; // tire
141+
geometry.materials[ 7 ] = materials.black; // tireling
142+
geometry.materials[ 8 ] = materials.black; // behind grille
143+
144+
var mesh = new THREE.Mesh( geometry, m );
145+
mesh.rotation.y = 1;
146+
mesh.scale.set( s, s, s );
147+
scene.add( mesh );
148+
149+
createButtons( materials.body, geometry );
150+
151+
}
152+
153+
// function onDocumentMouseMove(event) {
154+
155+
// mouseX = ( event.clientX - windowHalfX );
156+
// mouseY = ( event.clientY - windowHalfY );
157+
158+
// }
159+
160+
mouseX = mouseY = 0;
161+
162+
//
163+
164+
function animate() {
165+
166+
requestAnimationFrame( animate );
167+
168+
render();
169+
stats.update();
170+
171+
}
172+
173+
function render() {
174+
175+
var timer = -0.0002 * Date.now();
176+
177+
camera.position.x += ( mouseX - camera.position.x ) * .08;
178+
camera.position.y += ( - mouseY - camera.position.y ) * .09;
179+
180+
camera.lookAt( scene.position );
181+
182+
lightMesh.position.x = 1500 * Math.cos( timer );
183+
lightMesh.position.z = 1500 * Math.sin( timer );
184+
185+
renderer.render( scene, camera );
186+
187+
}

‎examples/js/threejs/obj/camaro/CamaroNoUv_bin.bin‎

3.1 MB
Binary file not shown.

‎examples/js/threejs/obj/camaro/CamaroNoUv_bin.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
{
2+
3+
"metadata" :
4+
{
5+
"formatVersion" : 3,
6+
"sourceFile" : "CamaroNoUv.obj",
7+
"generatedBy" : "OBJConverter",
8+
"vertices" : 53139,
9+
"faces" : 93251,
10+
"normals" : 46141,
11+
"uvs" : 0,
12+
"materials" : 9
13+
},
14+
15+
"materials": [ {
16+
"DbgColor" : 15658734,
17+
"DbgIndex" : 0,
18+
"DbgName" : "Body",
19+
"colorAmbient" : [0.0, 0.0, 0.0],
20+
"colorDiffuse" : [0.227, 0.408, 0.463],
21+
"colorSpecular" : [2.0, 2.0, 2.0],
22+
"illumination" : 2,
23+
"opticalDensity" : 1.0,
24+
"specularCoef" : 782.352941,
25+
"transparency" : 1.0
26+
},
27+
28+
{
29+
"DbgColor" : 15597568,
30+
"DbgIndex" : 1,
31+
"DbgName" : "mirror",
32+
"colorAmbient" : [0.0, 0.0, 0.0],
33+
"colorDiffuse" : [0.3, 0.3, 0.3],
34+
"colorSpecular" : [2.0, 2.0, 2.0],
35+
"illumination" : 2,
36+
"opticalDensity" : 1.0,
37+
"specularCoef" : 782.352941,
38+
"transparency" : 1.0
39+
},
40+
41+
{
42+
"DbgColor" : 60928,
43+
"DbgIndex" : 2,
44+
"DbgName" : "black",
45+
"colorAmbient" : [0.0, 0.0, 0.0],
46+
"colorDiffuse" : [0.102, 0.102, 0.102],
47+
"colorSpecular" : [0.2, 0.2, 0.2],
48+
"illumination" : 2,
49+
"opticalDensity" : 1.0,
50+
"specularCoef" : 7.843137,
51+
"transparency" : 1.0
52+
},
53+
54+
{
55+
"DbgColor" : 238,
56+
"DbgIndex" : 3,
57+
"DbgName" : "mizo",
58+
"colorAmbient" : [0.0, 0.0, 0.0],
59+
"colorDiffuse" : [0.0, 0.0, 0.0],
60+
"colorSpecular" : [0.0, 0.0, 0.0],
61+
"illumination" : 1,
62+
"opticalDensity" : 1.0,
63+
"specularCoef" : 0.0,
64+
"transparency" : 1.0
65+
},
66+
67+
{
68+
"DbgColor" : 15658496,
69+
"DbgIndex" : 4,
70+
"DbgName" : "glass",
71+
"colorAmbient" : [0.0, 0.0, 0.0],
72+
"colorDiffuse" : [0.2, 0.31, 0.306],
73+
"colorSpecular" : [2.0, 2.0, 2.0],
74+
"illumination" : 2,
75+
"opticalDensity" : 1.0,
76+
"specularCoef" : 782.352941,
77+
"transparency" : 0.34
78+
},
79+
80+
{
81+
"DbgColor" : 61166,
82+
"DbgIndex" : 5,
83+
"DbgName" : "Interieur",
84+
"colorAmbient" : [0.0, 0.0, 0.0],
85+
"colorDiffuse" : [0.102, 0.102, 0.102],
86+
"colorSpecular" : [0.44, 0.44, 0.44],
87+
"illumination" : 2,
88+
"opticalDensity" : 1.0,
89+
"specularCoef" : 98.039216,
90+
"transparency" : 1.0
91+
},
92+
93+
{
94+
"DbgColor" : 15597806,
95+
"DbgIndex" : 6,
96+
"DbgName" : "tire",
97+
"colorAmbient" : [0.0, 0.0, 0.0],
98+
"colorDiffuse" : [0.271, 0.271, 0.263],
99+
"colorSpecular" : [0.1, 0.1, 0.1],
100+
"illumination" : 2,
101+
"opticalDensity" : 1.0,
102+
"specularCoef" : 17.647059,
103+
"transparency" : 1.0
104+
},
105+
106+
{
107+
"DbgColor" : 3744854,
108+
"DbgIndex" : 7,
109+
"DbgName" : "tireling",
110+
"colorAmbient" : [0.0, 0.0, 0.0],
111+
"colorDiffuse" : [0.5, 0.5, 0.5],
112+
"colorSpecular" : [0.2, 0.2, 0.2],
113+
"illumination" : 2,
114+
"opticalDensity" : 1.0,
115+
"specularCoef" : 17.647059,
116+
"transparency" : 1.0
117+
},
118+
119+
{
120+
"DbgColor" : 4614226,
121+
"DbgIndex" : 8,
122+
"DbgName" : "black2",
123+
"colorAmbient" : [0.0, 0.0, 0.0],
124+
"colorDiffuse" : [0.0, 0.0, 0.0],
125+
"colorSpecular" : [0.0, 0.0, 0.0],
126+
"illumination" : 1,
127+
"opticalDensity" : 1.0,
128+
"specularCoef" : 0.0,
129+
"transparency" : 1.0
130+
}],
131+
132+
"buffers": "CamaroNoUv_bin.bin"
133+
134+
}

‎examples/js/threejs/textures/cube/SwedishRoyalCastle/nx.jpg‎

53.8 KB
Loading

‎examples/js/threejs/textures/cube/SwedishRoyalCastle/ny.jpg‎

25.7 KB
Loading

‎examples/js/threejs/textures/cube/SwedishRoyalCastle/nz.jpg‎

54.6 KB
Loading

‎examples/js/threejs/textures/cube/SwedishRoyalCastle/px.jpg‎

42.6 KB
Loading

‎examples/js/threejs/textures/cube/SwedishRoyalCastle/py.jpg‎

6.06 KB
Loading

‎examples/js/threejs/textures/cube/SwedishRoyalCastle/pz.jpg‎

73.8 KB
Loading

0 commit comments

Comments
 (0)