Skip to content

Commit cab27c9

Browse files
bitworkingbitworking
committedJul 9, 2014
More examples, elementFactory width/height
Signed-off-by: Jan Fischer <[email protected]>
·
v0.9.2v0.9
1 parent 1231d04 commit cab27c9

10 files changed

+303
-7
lines changed
 

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ engine.update().render();
3232
* Animation system
3333
* Use textures/uvw coordinates from obj file
3434
* Billboard element
35+
* Speed/memory optimization
3536

3637
### More infos
3738
http://css3d.bitworking.de/

‎examples/example03.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,10 @@
4141
}
4242

4343
.slider {
44+
/*
4445
width: 960px;
45-
height: 300px;
46+
height: 300px;
47+
*/
4648
}
4749

4850
#footer {

‎examples/example04.html

+5-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
77

88
<style>
9+
* {
10+
/*cursor: none;*/
11+
}
12+
913
body {
1014
margin: 0;
1115
font-family: sans-serif;
@@ -175,7 +179,7 @@
175179

176180
function updateScene(deltaTime)
177181
{
178-
engineDeltaTime = deltaTime;
182+
engineDeltaTime = deltaTime;
179183
if (fpsUpdate == 60) {
180184
document.getElementById('fps').innerHTML = 'FPS: '+ (deltaTimeCounter).toFixed(2);
181185
fpsUpdate = 0;

‎examples/example06.html

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
<script src="../release/css3d.min.js"></script>
6+
7+
8+
<style>
9+
body {
10+
margin: 0;
11+
font-family: sans-serif;
12+
}
13+
14+
#container {
15+
width: 500px;
16+
height: 500px;
17+
margin: auto auto;
18+
margin-top: 300px;
19+
position: relative;
20+
}
21+
22+
.cube {
23+
background-color: #999;
24+
}
25+
26+
</style>
27+
</head>
28+
<body>
29+
30+
<div id="container">
31+
32+
</div>
33+
34+
<script>
35+
36+
var container = document.getElementById('container');
37+
38+
// init engine and scene
39+
var engine = new css3d(container);
40+
var scene = new css3d.scene();
41+
42+
var cube01 = css3d.elementFactory.cube(container, scene, 300, null, 'cube');
43+
44+
var cube02 = css3d.elementFactory.cube(container, scene, 200, null, 'cube');
45+
cube02.setTranslation(-600, 0, 0);
46+
cube02.setParent(cube01);
47+
48+
var cube03 = css3d.elementFactory.cube(container, scene, 100, null, 'cube');
49+
cube03.setTranslation(-200, 0, 0);
50+
cube03.setParent(cube02);
51+
52+
// add scene to engine
53+
engine.setScene(scene);
54+
55+
if (!engine.browserSupports3d) {
56+
alert('This browser does not support CSS 3D');
57+
}
58+
59+
var axis = new css3d.vector3(0.2, 1, 0).normalize();
60+
var angle = 0;
61+
62+
engine.onRender = updateScene;
63+
engine.startRender();
64+
65+
function updateScene(deltaTime)
66+
{
67+
cube01.setRotation(axis, -angle);
68+
cube02.setRotation(axis, -angle*2);
69+
cube03.setRotation(axis, -angle*3);
70+
angle += 0.01;
71+
}
72+
73+
</script>
74+
75+
</body>
76+
</html>

‎examples/example07.html

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
<script src="../release/css3d.min.js"></script>
6+
7+
8+
<style>
9+
body {
10+
margin: 0;
11+
font-family: sans-serif;
12+
overflow: hidden;
13+
}
14+
15+
#container {
16+
width: 500px;
17+
height: 500px;
18+
margin: auto auto;
19+
margin-top: 300px;
20+
position: relative;
21+
}
22+
23+
.skybox {
24+
background-image: url('../textures/skybox.png');
25+
position: absolute;
26+
}
27+
28+
.skybox.skybox-back {
29+
background-position: -1024px -1024px;
30+
}
31+
32+
.skybox.skybox-front {
33+
background-position: -3072px -1024px;
34+
}
35+
36+
.skybox.skybox-left {
37+
background-position: 0px -1024px;
38+
}
39+
40+
.skybox.skybox-right {
41+
background-position: -2048px -1024px;
42+
}
43+
44+
.skybox.skybox-top {
45+
background-position: -1024px 0px;
46+
}
47+
48+
.skybox.skybox-bottom {
49+
background-position: -1024px -2048px;
50+
}
51+
52+
53+
</style>
54+
</head>
55+
<body>
56+
57+
<div id="container">
58+
59+
</div>
60+
61+
<script>
62+
63+
var container = document.getElementById('container');
64+
65+
// init engine and scene
66+
var engine = new css3d(container);
67+
var scene = new css3d.scene();
68+
scene.getCamera().setTranslation(0, 0, 0);
69+
70+
var skybox = css3d.elementFactory.skybox(container, scene, 1024, null, 'skybox');
71+
72+
// add scene to engine
73+
engine.setScene(scene);
74+
75+
if (!engine.browserSupports3d) {
76+
alert('This browser does not support CSS 3D');
77+
}
78+
79+
var axis = new css3d.vector3(0.2, 1, 0).normalize();
80+
var angle = 0;
81+
82+
var engineDeltaTime = 0;
83+
84+
engine.onRender = updateScene;
85+
engine.update().render();
86+
87+
88+
function updateScene(deltaTime)
89+
{
90+
engineDeltaTime = deltaTime;
91+
}
92+
93+
/* mouse events */
94+
95+
var cameraRotationX = 0;
96+
var cameraRotationY = 0;
97+
var cameraRotationAxis = new css3d.vector3(0, -1, 0).normalize();
98+
99+
var lastXY = null;
100+
101+
document.onmousedown = function(evt)
102+
{
103+
lastXY = null;
104+
document.addEventListener('mousemove', onMouseMove);
105+
engine.startRender();
106+
};
107+
108+
document.onmouseup = function(evt)
109+
{
110+
document.removeEventListener('mousemove', onMouseMove);
111+
engine.stopRender();
112+
};
113+
114+
function onMouseMove(evt)
115+
{
116+
var x = evt.pageX;
117+
var y = evt.pageY;
118+
var relX, relY;
119+
120+
if (null == lastXY) {
121+
lastXY = [x, y];
122+
return;
123+
}
124+
125+
relX = x - lastXY[0];
126+
relY = lastXY[1] - y;
127+
128+
cameraRotationX += (relY/100 * engineDeltaTime);
129+
cameraRotationY += (relX/100 * engineDeltaTime);
130+
131+
scene.getCamera().setRotationXYZ(-cameraRotationX, -cameraRotationY, 0);
132+
133+
lastXY = [x, y];
134+
135+
}
136+
137+
</script>
138+
139+
</body>
140+
</html>

‎release/css3d.js

+38-2
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ var css3d = (function(document)
4444
this._renderId = null;
4545
this._lastCalledTime = 0;
4646

47-
this.version = '1.0';
47+
this.version = '0.9';
4848
this.browserSupports3d = this._init();
4949
this.onRender = null;
5050
};
@@ -1748,26 +1748,38 @@ css3d.elementFactory = {
17481748

17491749
var backDiv = document.createElement('div');
17501750
backDiv.style.position = 'absolute';
1751+
backDiv.style.width = size+'px';
1752+
backDiv.style.height = size+'px';
17511753
container.appendChild(backDiv);
17521754

17531755
var frontDiv = document.createElement('div');
17541756
frontDiv.style.position = 'absolute';
1757+
frontDiv.style.width = size+'px';
1758+
frontDiv.style.height = size+'px';
17551759
container.appendChild(frontDiv);
17561760

17571761
var leftDiv = document.createElement('div');
17581762
leftDiv.style.position = 'absolute';
1763+
leftDiv.style.width = size+'px';
1764+
leftDiv.style.height = size+'px';
17591765
container.appendChild(leftDiv);
17601766

17611767
var rightDiv = document.createElement('div');
17621768
rightDiv.style.position = 'absolute';
1769+
rightDiv.style.width = size+'px';
1770+
rightDiv.style.height = size+'px';
17631771
container.appendChild(rightDiv);
17641772

17651773
var topDiv = document.createElement('div');
17661774
topDiv.style.position = 'absolute';
1775+
topDiv.style.width = size+'px';
1776+
topDiv.style.height = size+'px';
17671777
container.appendChild(topDiv);
17681778

17691779
var bottomDiv = document.createElement('div');
17701780
bottomDiv.style.position = 'absolute';
1781+
bottomDiv.style.width = size+'px';
1782+
bottomDiv.style.height = size+'px';
17711783
container.appendChild(bottomDiv);
17721784

17731785
if (id) {
@@ -1876,27 +1888,39 @@ css3d.elementFactory = {
18761888

18771889
var backDiv = document.createElement('div');
18781890
backDiv.style.position = 'absolute';
1891+
backDiv.style.width = width+'px';
1892+
backDiv.style.height = height+'px';
18791893
container.appendChild(backDiv);
18801894

18811895
var frontDiv = document.createElement('div');
18821896
frontDiv.style.position = 'absolute';
1897+
frontDiv.style.width = width+'px';
1898+
frontDiv.style.height = height+'px';
18831899
container.appendChild(frontDiv);
18841900

18851901
var leftDiv = document.createElement('div');
18861902
leftDiv.style.position = 'absolute';
1903+
leftDiv.style.width = depth+'px';
1904+
leftDiv.style.height = height+'px';
18871905
container.appendChild(leftDiv);
18881906

18891907
var rightDiv = document.createElement('div');
18901908
rightDiv.style.position = 'absolute';
1909+
rightDiv.style.width = depth+'px';
1910+
rightDiv.style.height = height+'px';
18911911
container.appendChild(rightDiv);
18921912

18931913
if (addTopAndBottom) {
18941914
var topDiv = document.createElement('div');
18951915
topDiv.style.position = 'absolute';
1916+
topDiv.style.width = width+'px';
1917+
topDiv.style.height = depth+'px';
18961918
container.appendChild(topDiv);
18971919

18981920
var bottomDiv = document.createElement('div');
18991921
bottomDiv.style.position = 'absolute';
1922+
bottomDiv.style.width = width+'px';
1923+
bottomDiv.style.height = depth+'px';
19001924
container.appendChild(bottomDiv);
19011925
}
19021926

@@ -2242,32 +2266,44 @@ css3d.elementFactory = {
22422266
*/
22432267
skybox : function(container, scene, size, id, className)
22442268
{
2245-
var translation = size/2;
2269+
var translation = (size-2)/2;
22462270

22472271
var elementGroup = new css3d.element();
22482272

22492273
var backDiv = document.createElement('div');
22502274
backDiv.style.position = 'absolute';
2275+
backDiv.style.width = size+'px';
2276+
backDiv.style.height = size+'px';
22512277
container.appendChild(backDiv);
22522278

22532279
var frontDiv = document.createElement('div');
22542280
frontDiv.style.position = 'absolute';
2281+
frontDiv.style.width = size+'px';
2282+
frontDiv.style.height = size+'px';
22552283
container.appendChild(frontDiv);
22562284

22572285
var leftDiv = document.createElement('div');
22582286
leftDiv.style.position = 'absolute';
2287+
leftDiv.style.width = size+'px';
2288+
leftDiv.style.height = size+'px';
22592289
container.appendChild(leftDiv);
22602290

22612291
var rightDiv = document.createElement('div');
22622292
rightDiv.style.position = 'absolute';
2293+
rightDiv.style.width = size+'px';
2294+
rightDiv.style.height = size+'px';
22632295
container.appendChild(rightDiv);
22642296

22652297
var topDiv = document.createElement('div');
22662298
topDiv.style.position = 'absolute';
2299+
topDiv.style.width = size+'px';
2300+
topDiv.style.height = size+'px';
22672301
container.appendChild(topDiv);
22682302

22692303
var bottomDiv = document.createElement('div');
22702304
bottomDiv.style.position = 'absolute';
2305+
bottomDiv.style.width = size+'px';
2306+
bottomDiv.style.height = size+'px';
22712307
container.appendChild(bottomDiv);
22722308

22732309
if (id) {

‎release/css3d.min.js

+2-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css3d.elementFactory.js

+37-1
Original file line numberDiff line numberDiff line change
@@ -34,26 +34,38 @@ css3d.elementFactory = {
3434

3535
var backDiv = document.createElement('div');
3636
backDiv.style.position = 'absolute';
37+
backDiv.style.width = size+'px';
38+
backDiv.style.height = size+'px';
3739
container.appendChild(backDiv);
3840

3941
var frontDiv = document.createElement('div');
4042
frontDiv.style.position = 'absolute';
43+
frontDiv.style.width = size+'px';
44+
frontDiv.style.height = size+'px';
4145
container.appendChild(frontDiv);
4246

4347
var leftDiv = document.createElement('div');
4448
leftDiv.style.position = 'absolute';
49+
leftDiv.style.width = size+'px';
50+
leftDiv.style.height = size+'px';
4551
container.appendChild(leftDiv);
4652

4753
var rightDiv = document.createElement('div');
4854
rightDiv.style.position = 'absolute';
55+
rightDiv.style.width = size+'px';
56+
rightDiv.style.height = size+'px';
4957
container.appendChild(rightDiv);
5058

5159
var topDiv = document.createElement('div');
5260
topDiv.style.position = 'absolute';
61+
topDiv.style.width = size+'px';
62+
topDiv.style.height = size+'px';
5363
container.appendChild(topDiv);
5464

5565
var bottomDiv = document.createElement('div');
5666
bottomDiv.style.position = 'absolute';
67+
bottomDiv.style.width = size+'px';
68+
bottomDiv.style.height = size+'px';
5769
container.appendChild(bottomDiv);
5870

5971
if (id) {
@@ -162,27 +174,39 @@ css3d.elementFactory = {
162174

163175
var backDiv = document.createElement('div');
164176
backDiv.style.position = 'absolute';
177+
backDiv.style.width = width+'px';
178+
backDiv.style.height = height+'px';
165179
container.appendChild(backDiv);
166180

167181
var frontDiv = document.createElement('div');
168182
frontDiv.style.position = 'absolute';
183+
frontDiv.style.width = width+'px';
184+
frontDiv.style.height = height+'px';
169185
container.appendChild(frontDiv);
170186

171187
var leftDiv = document.createElement('div');
172188
leftDiv.style.position = 'absolute';
189+
leftDiv.style.width = depth+'px';
190+
leftDiv.style.height = height+'px';
173191
container.appendChild(leftDiv);
174192

175193
var rightDiv = document.createElement('div');
176194
rightDiv.style.position = 'absolute';
195+
rightDiv.style.width = depth+'px';
196+
rightDiv.style.height = height+'px';
177197
container.appendChild(rightDiv);
178198

179199
if (addTopAndBottom) {
180200
var topDiv = document.createElement('div');
181201
topDiv.style.position = 'absolute';
202+
topDiv.style.width = width+'px';
203+
topDiv.style.height = depth+'px';
182204
container.appendChild(topDiv);
183205

184206
var bottomDiv = document.createElement('div');
185207
bottomDiv.style.position = 'absolute';
208+
bottomDiv.style.width = width+'px';
209+
bottomDiv.style.height = depth+'px';
186210
container.appendChild(bottomDiv);
187211
}
188212

@@ -528,32 +552,44 @@ css3d.elementFactory = {
528552
*/
529553
skybox : function(container, scene, size, id, className)
530554
{
531-
var translation = size/2;
555+
var translation = (size-2)/2;
532556

533557
var elementGroup = new css3d.element();
534558

535559
var backDiv = document.createElement('div');
536560
backDiv.style.position = 'absolute';
561+
backDiv.style.width = size+'px';
562+
backDiv.style.height = size+'px';
537563
container.appendChild(backDiv);
538564

539565
var frontDiv = document.createElement('div');
540566
frontDiv.style.position = 'absolute';
567+
frontDiv.style.width = size+'px';
568+
frontDiv.style.height = size+'px';
541569
container.appendChild(frontDiv);
542570

543571
var leftDiv = document.createElement('div');
544572
leftDiv.style.position = 'absolute';
573+
leftDiv.style.width = size+'px';
574+
leftDiv.style.height = size+'px';
545575
container.appendChild(leftDiv);
546576

547577
var rightDiv = document.createElement('div');
548578
rightDiv.style.position = 'absolute';
579+
rightDiv.style.width = size+'px';
580+
rightDiv.style.height = size+'px';
549581
container.appendChild(rightDiv);
550582

551583
var topDiv = document.createElement('div');
552584
topDiv.style.position = 'absolute';
585+
topDiv.style.width = size+'px';
586+
topDiv.style.height = size+'px';
553587
container.appendChild(topDiv);
554588

555589
var bottomDiv = document.createElement('div');
556590
bottomDiv.style.position = 'absolute';
591+
bottomDiv.style.width = size+'px';
592+
bottomDiv.style.height = size+'px';
557593
container.appendChild(bottomDiv);
558594

559595
if (id) {

‎src/css3d.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ var css3d = (function(document)
4444
this._renderId = null;
4545
this._lastCalledTime = 0;
4646

47-
this.version = '1.0';
47+
this.version = '0.9';
4848
this.browserSupports3d = this._init();
4949
this.onRender = null;
5050
};

‎textures/skybox.png

1.36 MB
Loading

0 commit comments

Comments
 (0)
Please sign in to comment.