Skip to content

Commit 8a7b140

Browse files
bitworkingbitworking
committed
Merge branch 'development'
2 parents ed6f938 + b2f3d3c commit 8a7b140

11 files changed

+368
-29
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ engine.update().render();
2626
```
2727

2828
### TODO
29-
* Collision detection
29+
* ~~Collision detection~~
3030
* Build scene from json
3131
* Depth cueing
3232
* Animation system

‎examples/example08.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title></title>
5-
<script src="../release/css3d.js"></script>
5+
<script src="../release/css3d.min.js"></script>
66

77

88
<style>

‎examples/example09.html

+65-3
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
<html>
33
<head>
44
<title></title>
5-
<script src="../release/css3d.js"></script>
5+
<script src="../release/css3d.min.js"></script>
66

77

88
<style>
99
body {
1010
margin: 0;
1111
font-family: sans-serif;
1212
overflow: hidden;
13+
background-color: #000;
1314
}
1415

1516
#container {
@@ -62,6 +63,11 @@
6263

6364
var deltaTimeCounter = 0;
6465
var engineDeltaTime = 0;
66+
67+
68+
// init collision
69+
var collision = new css3d.collision(scene.getElements());
70+
var collisionElements = [];
6571

6672
engine.onRender = updateScene;
6773
engine.startRender();
@@ -70,7 +76,7 @@
7076
{
7177
engineDeltaTime = deltaTime;
7278
scene.getCamera().getTranslation().y = 0;
73-
79+
7480
}
7581

7682
/* FPS camera *********************************************************/
@@ -94,21 +100,45 @@
94100
// w
95101
if (code == 87) {
96102
scene.getCamera().forward(speed * engineDeltaTime);
103+
104+
// collision
105+
collisionElements = collision.getCollisions(scene.getCamera().getTranslation(), scene.getCamera().forwardVector(), 20);
106+
if (collisionElements.length > 0) {
107+
scene.getCamera().forward(-speed * engineDeltaTime);
108+
}
97109
}
98110
// s
99111
if (code == 83) {
100112
scene.getCamera().forward(-speed * engineDeltaTime);
113+
114+
// collision
115+
collisionElements = collision.getCollisions(scene.getCamera().getTranslation(), scene.getCamera().forwardVector(), 20);
116+
if (collisionElements.length > 0) {
117+
scene.getCamera().forward(speed * engineDeltaTime);
118+
}
101119
}
102120
// d
103121
if (code == 68) {
104122
scene.getCamera().left(-speed * engineDeltaTime);
123+
124+
// collision
125+
collisionElements = collision.getCollisions(scene.getCamera().getTranslation(), scene.getCamera().forwardVector(), 20);
126+
if (collisionElements.length > 0) {
127+
scene.getCamera().left(speed * engineDeltaTime);
128+
}
105129
}
106130
// a
107131
if (code == 65) {
108132
scene.getCamera().left(speed * engineDeltaTime);
133+
134+
// collision
135+
collisionElements = collision.getCollisions(scene.getCamera().getTranslation(), scene.getCamera().forwardVector(), 20);
136+
if (collisionElements.length > 0) {
137+
scene.getCamera().left(-speed * engineDeltaTime);
138+
}
109139
}
110140

111-
141+
/*
112142
// up
113143
if (code == 38) {
114144
scene.getCamera().up(speed * engineDeltaTime);
@@ -127,6 +157,12 @@
127157
cameraRotationY += (0.2 * engineDeltaTime);
128158
scene.getCamera().setRotation(cameraRotationAxis, cameraRotationY);
129159
}
160+
*/
161+
162+
// f for fullscreen
163+
if (code == 70) {
164+
toggleFullScreen();
165+
}
130166

131167
}
132168
};
@@ -179,6 +215,32 @@
179215
lastXY = [x, y];
180216

181217
}
218+
219+
function toggleFullScreen()
220+
{
221+
if (!document.fullscreenElement && // alternative standard method
222+
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
223+
if (document.documentElement.requestFullscreen) {
224+
document.documentElement.requestFullscreen();
225+
} else if (document.documentElement.msRequestFullscreen) {
226+
document.documentElement.msRequestFullscreen();
227+
} else if (document.documentElement.mozRequestFullScreen) {
228+
document.documentElement.mozRequestFullScreen();
229+
} else if (document.documentElement.webkitRequestFullscreen) {
230+
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
231+
}
232+
} else {
233+
if (document.exitFullscreen) {
234+
document.exitFullscreen();
235+
} else if (document.msExitFullscreen) {
236+
document.msExitFullscreen();
237+
} else if (document.mozCancelFullScreen) {
238+
document.mozCancelFullScreen();
239+
} else if (document.webkitExitFullscreen) {
240+
document.webkitExitFullscreen();
241+
}
242+
}
243+
}
182244

183245
</script>
184246

‎release/css3d.js

+150-11
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ var css3d = (function(document)
4949
* @memberof! css3d
5050
* @instance
5151
*/
52-
this.version = '0.9.1';
52+
this.version = '0.9.2';
5353

5454
/**
5555
* Browser supports CSS 3D
@@ -307,8 +307,9 @@ var css3d = (function(document)
307307

308308
// shading
309309
if (element.shading) {
310-
var projected = element.normal.transform(element.getTotalRotation());
311-
projected = projected.toVector3().normalize();
310+
//var projected = element.normal.transform(element.getTotalRotation());
311+
//projected = projected.toVector3().normalize();
312+
var projected = element.normalWorld;
312313
var dot = Math.abs(projected.dot(this._scene.getLight())).toFixed(10);
313314
dot = dot * this._scene.getShadingIntensity() + (1-this._scene.getShadingIntensity());
314315
if (this._hasFilter) {
@@ -759,6 +760,17 @@ css3d.camera = (function()
759760
{
760761
return css3d.matrix4.back(this._rotation).normalize();
761762
};
763+
764+
/**
765+
*
766+
* @memberof! css3d.camera
767+
* @instance
768+
* @returns {css3d.vector3}
769+
*/
770+
camera.prototype.forwardVector = function()
771+
{
772+
return css3d.matrix4.forward(this._rotation).normalize();
773+
};
762774

763775
/**
764776
* Move camera forward
@@ -770,11 +782,11 @@ css3d.camera = (function()
770782
*/
771783
camera.prototype.forward = function(steps)
772784
{
773-
var backVector = this.backVector();
785+
var forwardVector = this.forwardVector();
774786
this.setTranslation(
775-
this._translation.x - (backVector.x * steps),
776-
this._translation.y - (backVector.y * steps),
777-
this._translation.z - (backVector.z * steps)
787+
this._translation.x + (forwardVector.x * steps),
788+
this._translation.y + (forwardVector.y * steps),
789+
this._translation.z + (forwardVector.z * steps)
778790
);
779791
return this;
780792
};
@@ -1028,6 +1040,90 @@ css3d.camera = (function()
10281040
return camera;
10291041

10301042
}());
1043+
/**
1044+
* CSS 3D engine
1045+
*
1046+
* @category css3d
1047+
* @package css3d.collision
1048+
* @author Jan Fischer, bitWorking <info@bitworking.de>
1049+
* @copyright 2014 Jan Fischer
1050+
* @license http://www.opensource.org/licenses/mit-license.html MIT License
1051+
*/
1052+
1053+
/**
1054+
*
1055+
* @name css3d.collision
1056+
* @class
1057+
* @param {Array} elements
1058+
* @returns {css3d.collision}
1059+
*/
1060+
css3d.collision = (function()
1061+
{
1062+
/**
1063+
*
1064+
* @param {Array} elements
1065+
* @returns {css3d.collision}
1066+
*/
1067+
var collision = function(elements)
1068+
{
1069+
this._elements = elements;
1070+
}
1071+
1072+
/**
1073+
*
1074+
* @memberof! css3d.collision
1075+
* @instance
1076+
* @param {css3d.vector3} position
1077+
* @param {css3d.vector3} normal
1078+
* @param {Number} distance
1079+
* @returns {Array}
1080+
*/
1081+
collision.prototype.getCollisions = function(position, normal, distance)
1082+
{
1083+
var collisionPoint = new css3d.vector3(
1084+
position.x + (normal.x * distance),
1085+
position.y + (normal.y * distance),
1086+
position.z + (normal.z * distance)
1087+
);
1088+
1089+
var elementPosition, elementDistance, elementSize, planeDistance;
1090+
var collisionElements = [];
1091+
1092+
for (var i=0;i<this._elements.length;i++) {
1093+
if (null == this._elements[i]._domElement) {
1094+
continue;
1095+
}
1096+
1097+
elementPosition = this._elements[i].getTotalTranslation();
1098+
elementDistance = css3d.vector3.prototype.distance(elementPosition, collisionPoint);
1099+
elementSize = Math.max(
1100+
this._elements[i]._domElement.offsetWidth / 2,
1101+
this._elements[i]._domElement.offsetHeight / 2
1102+
);
1103+
1104+
if (elementDistance < elementSize) {
1105+
elementPosition.sub(collisionPoint);
1106+
planeDistance = css3d.vector3.prototype.dot2(this._elements[i].normalWorld, elementPosition);
1107+
//console.log(planeDistance);
1108+
1109+
//if (planeDistance <= 0) {
1110+
if (Math.abs(planeDistance) < distance) { // normally <= 0, but if the steps are too large the collision is missed
1111+
//this._elements[i]._domElement.style.border = '1px solid red';
1112+
collisionElements.push(this._elements[i]);
1113+
}
1114+
}
1115+
else {
1116+
//this._elements[i]._domElement.style.border = 'none';
1117+
}
1118+
}
1119+
return collisionElements;
1120+
}
1121+
1122+
return collision;
1123+
}());
1124+
1125+
1126+
10311127
/**
10321128
* CSS 3D engine
10331129
*
@@ -1084,6 +1180,7 @@ css3d.element = (function()
10841180
this.backfaceCullingDirty = false;
10851181
this.worldView = null;
10861182
this.normal = new css3d.vector3(0, 0, 1);
1183+
this.normalWorld = new css3d.vector3(0, 0, 1);
10871184

10881185
/**
10891186
* Indicates if the element inherits the scaling from an parent element.
@@ -1478,6 +1575,17 @@ css3d.element = (function()
14781575
{
14791576
return this._translation;
14801577
};
1578+
1579+
/**
1580+
*
1581+
* @memberof! css3d.element
1582+
* @instance
1583+
* @returns {css3d.vector3}
1584+
*/
1585+
element.prototype.getTotalTranslation = function()
1586+
{
1587+
return new css3d.vector3(this._world[3], this._world[7], this._world[11]);
1588+
};
14811589

14821590
/**
14831591
*
@@ -1489,6 +1597,17 @@ css3d.element = (function()
14891597
{
14901598
return css3d.matrix4.back(this._world).normalize();
14911599
};
1600+
1601+
/**
1602+
*
1603+
* @memberof! css3d.element
1604+
* @instance
1605+
* @returns {css3d.vector3}
1606+
*/
1607+
element.prototype.forwardVector = function()
1608+
{
1609+
return css3d.matrix4.forward(this._world).normalize();
1610+
};
14921611

14931612
/**
14941613
* Move forward
@@ -1500,11 +1619,11 @@ css3d.element = (function()
15001619
*/
15011620
element.prototype.forward = function(steps)
15021621
{
1503-
var backVector = this.backVector();
1622+
var forwardVector = this.forwardVector();
15041623
this.setTranslation(
1505-
this._translation.x - (backVector.x * steps),
1506-
this._translation.y - (backVector.y * steps),
1507-
this._translation.z - (backVector.z * steps)
1624+
this._translation.x + (forwardVector.x * steps),
1625+
this._translation.y + (forwardVector.y * steps),
1626+
this._translation.z + (forwardVector.z * steps)
15081627
);
15091628
return this;
15101629
};
@@ -1750,6 +1869,11 @@ css3d.element = (function()
17501869
this._parent.update(); // this seems to be needed if you only call engine.update().render()
17511870
this._world = css3d.matrix4.multiply(this._parent.getWorldMatrix(), this._world);
17521871
}
1872+
1873+
// transform normal
1874+
// isn't it always the forward vector?
1875+
this.normalWorld = this.normal.transform(this.getTotalRotation());
1876+
this.normalWorld = this.normalWorld.toVector3().normalize();
17531877

17541878
this._isDirty = false;
17551879

@@ -2948,6 +3072,16 @@ css3d.matrix4 = {
29483072
{
29493073
return new css3d.vector3(matrix[2], matrix[6], matrix[10]);
29503074
},
3075+
3076+
/**
3077+
*
3078+
* @param {Array} matrix
3079+
* @returns {css3d.vector3}
3080+
*/
3081+
forward : function(matrix)
3082+
{
3083+
return new css3d.vector3(-matrix[2], -matrix[6], -matrix[10]);
3084+
},
29513085

29523086
/**
29533087
*
@@ -3843,6 +3977,11 @@ css3d.vector3 = (function(css3d)
38433977
{
38443978
return (this.x == 0 && this.y == 0 && this.z == 0);
38453979
};
3980+
3981+
vector3.prototype.distance = function(a, b)
3982+
{
3983+
return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2) + Math.pow(a.z - b.z, 2));
3984+
};
38463985

38473986
return vector3;
38483987

0 commit comments

Comments
 (0)