Skip to content

Commit

Permalink
Merge branch 'development'
Browse files Browse the repository at this point in the history
  • Loading branch information
@bitworking
bitworking committed Jul 11, 2014
2 parents ed6f938 + b2f3d3c commit 8a7b140
Show file tree
Hide file tree
Showing 11 changed files with 368 additions and 29 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ engine.update().render();
```

### TODO
* Collision detection
* ~~Collision detection~~
* Build scene from json
* Depth cueing
* Animation system
Expand Down
2 changes: 1 addition & 1 deletion examples/example08.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<title></title>
<script src="../release/css3d.js"></script>
<script src="../release/css3d.min.js"></script>


<style>
Expand Down
68 changes: 65 additions & 3 deletions examples/example09.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@
<html>
<head>
<title></title>
<script src="../release/css3d.js"></script>
<script src="../release/css3d.min.js"></script>


<style>
body {
margin: 0;
font-family: sans-serif;
overflow: hidden;
background-color: #000;
}

#container {
Expand Down Expand Up @@ -62,6 +63,11 @@

var deltaTimeCounter = 0;
var engineDeltaTime = 0;


// init collision
var collision = new css3d.collision(scene.getElements());
var collisionElements = [];

engine.onRender = updateScene;
engine.startRender();
Expand All @@ -70,7 +76,7 @@
{
engineDeltaTime = deltaTime;
scene.getCamera().getTranslation().y = 0;

}

/* FPS camera *********************************************************/
Expand All @@ -94,21 +100,45 @@
// w
if (code == 87) {
scene.getCamera().forward(speed * engineDeltaTime);

// collision
collisionElements = collision.getCollisions(scene.getCamera().getTranslation(), scene.getCamera().forwardVector(), 20);
if (collisionElements.length > 0) {
scene.getCamera().forward(-speed * engineDeltaTime);
}
}
// s
if (code == 83) {
scene.getCamera().forward(-speed * engineDeltaTime);

// collision
collisionElements = collision.getCollisions(scene.getCamera().getTranslation(), scene.getCamera().forwardVector(), 20);
if (collisionElements.length > 0) {
scene.getCamera().forward(speed * engineDeltaTime);
}
}
// d
if (code == 68) {
scene.getCamera().left(-speed * engineDeltaTime);

// collision
collisionElements = collision.getCollisions(scene.getCamera().getTranslation(), scene.getCamera().forwardVector(), 20);
if (collisionElements.length > 0) {
scene.getCamera().left(speed * engineDeltaTime);
}
}
// a
if (code == 65) {
scene.getCamera().left(speed * engineDeltaTime);

// collision
collisionElements = collision.getCollisions(scene.getCamera().getTranslation(), scene.getCamera().forwardVector(), 20);
if (collisionElements.length > 0) {
scene.getCamera().left(-speed * engineDeltaTime);
}
}


/*
// up
if (code == 38) {
scene.getCamera().up(speed * engineDeltaTime);
Expand All @@ -127,6 +157,12 @@
cameraRotationY += (0.2 * engineDeltaTime);
scene.getCamera().setRotation(cameraRotationAxis, cameraRotationY);
}
*/

// f for fullscreen
if (code == 70) {
toggleFullScreen();
}

}
};
Expand Down Expand Up @@ -179,6 +215,32 @@
lastXY = [x, y];

}

function toggleFullScreen()
{
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}

</script>

Expand Down
161 changes: 150 additions & 11 deletions release/css3d.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ var css3d = (function(document)
* @memberof! css3d
* @instance
*/
this.version = '0.9.1';
this.version = '0.9.2';

/**
* Browser supports CSS 3D
Expand Down Expand Up @@ -307,8 +307,9 @@ var css3d = (function(document)

// shading
if (element.shading) {
var projected = element.normal.transform(element.getTotalRotation());
projected = projected.toVector3().normalize();
//var projected = element.normal.transform(element.getTotalRotation());
//projected = projected.toVector3().normalize();
var projected = element.normalWorld;
var dot = Math.abs(projected.dot(this._scene.getLight())).toFixed(10);
dot = dot * this._scene.getShadingIntensity() + (1-this._scene.getShadingIntensity());
if (this._hasFilter) {
Expand Down Expand Up @@ -759,6 +760,17 @@ css3d.camera = (function()
{
return css3d.matrix4.back(this._rotation).normalize();
};

/**
*
* @memberof! css3d.camera
* @instance
* @returns {css3d.vector3}
*/
camera.prototype.forwardVector = function()
{
return css3d.matrix4.forward(this._rotation).normalize();
};

/**
* Move camera forward
Expand All @@ -770,11 +782,11 @@ css3d.camera = (function()
*/
camera.prototype.forward = function(steps)
{
var backVector = this.backVector();
var forwardVector = this.forwardVector();
this.setTranslation(
this._translation.x - (backVector.x * steps),
this._translation.y - (backVector.y * steps),
this._translation.z - (backVector.z * steps)
this._translation.x + (forwardVector.x * steps),
this._translation.y + (forwardVector.y * steps),
this._translation.z + (forwardVector.z * steps)
);
return this;
};
Expand Down Expand Up @@ -1028,6 +1040,90 @@ css3d.camera = (function()
return camera;

}());
/**
* CSS 3D engine
*
* @category css3d
* @package css3d.collision
* @author Jan Fischer, bitWorking <[email protected]>
* @copyright 2014 Jan Fischer
* @license http://www.opensource.org/licenses/mit-license.html MIT License
*/

/**
*
* @name css3d.collision
* @class
* @param {Array} elements
* @returns {css3d.collision}
*/
css3d.collision = (function()
{
/**
*
* @param {Array} elements
* @returns {css3d.collision}
*/
var collision = function(elements)
{
this._elements = elements;
}

/**
*
* @memberof! css3d.collision
* @instance
* @param {css3d.vector3} position
* @param {css3d.vector3} normal
* @param {Number} distance
* @returns {Array}
*/
collision.prototype.getCollisions = function(position, normal, distance)
{
var collisionPoint = new css3d.vector3(
position.x + (normal.x * distance),
position.y + (normal.y * distance),
position.z + (normal.z * distance)
);

var elementPosition, elementDistance, elementSize, planeDistance;
var collisionElements = [];

for (var i=0;i<this._elements.length;i++) {
if (null == this._elements[i]._domElement) {
continue;
}

elementPosition = this._elements[i].getTotalTranslation();
elementDistance = css3d.vector3.prototype.distance(elementPosition, collisionPoint);
elementSize = Math.max(
this._elements[i]._domElement.offsetWidth / 2,
this._elements[i]._domElement.offsetHeight / 2
);

if (elementDistance < elementSize) {
elementPosition.sub(collisionPoint);
planeDistance = css3d.vector3.prototype.dot2(this._elements[i].normalWorld, elementPosition);
//console.log(planeDistance);

//if (planeDistance <= 0) {
if (Math.abs(planeDistance) < distance) { // normally <= 0, but if the steps are too large the collision is missed
//this._elements[i]._domElement.style.border = '1px solid red';
collisionElements.push(this._elements[i]);
}
}
else {
//this._elements[i]._domElement.style.border = 'none';
}
}
return collisionElements;
}

return collision;
}());



/**
* CSS 3D engine
*
Expand Down Expand Up @@ -1084,6 +1180,7 @@ css3d.element = (function()
this.backfaceCullingDirty = false;
this.worldView = null;
this.normal = new css3d.vector3(0, 0, 1);
this.normalWorld = new css3d.vector3(0, 0, 1);

/**
* Indicates if the element inherits the scaling from an parent element.
Expand Down Expand Up @@ -1478,6 +1575,17 @@ css3d.element = (function()
{
return this._translation;
};

/**
*
* @memberof! css3d.element
* @instance
* @returns {css3d.vector3}
*/
element.prototype.getTotalTranslation = function()
{
return new css3d.vector3(this._world[3], this._world[7], this._world[11]);
};

/**
*
Expand All @@ -1489,6 +1597,17 @@ css3d.element = (function()
{
return css3d.matrix4.back(this._world).normalize();
};

/**
*
* @memberof! css3d.element
* @instance
* @returns {css3d.vector3}
*/
element.prototype.forwardVector = function()
{
return css3d.matrix4.forward(this._world).normalize();
};

/**
* Move forward
Expand All @@ -1500,11 +1619,11 @@ css3d.element = (function()
*/
element.prototype.forward = function(steps)
{
var backVector = this.backVector();
var forwardVector = this.forwardVector();
this.setTranslation(
this._translation.x - (backVector.x * steps),
this._translation.y - (backVector.y * steps),
this._translation.z - (backVector.z * steps)
this._translation.x + (forwardVector.x * steps),
this._translation.y + (forwardVector.y * steps),
this._translation.z + (forwardVector.z * steps)
);
return this;
};
Expand Down Expand Up @@ -1750,6 +1869,11 @@ css3d.element = (function()
this._parent.update(); // this seems to be needed if you only call engine.update().render()
this._world = css3d.matrix4.multiply(this._parent.getWorldMatrix(), this._world);
}

// transform normal
// isn't it always the forward vector?
this.normalWorld = this.normal.transform(this.getTotalRotation());
this.normalWorld = this.normalWorld.toVector3().normalize();

this._isDirty = false;

Expand Down Expand Up @@ -2948,6 +3072,16 @@ css3d.matrix4 = {
{
return new css3d.vector3(matrix[2], matrix[6], matrix[10]);
},

/**
*
* @param {Array} matrix
* @returns {css3d.vector3}
*/
forward : function(matrix)
{
return new css3d.vector3(-matrix[2], -matrix[6], -matrix[10]);
},

/**
*
Expand Down Expand Up @@ -3843,6 +3977,11 @@ css3d.vector3 = (function(css3d)
{
return (this.x == 0 && this.y == 0 && this.z == 0);
};

vector3.prototype.distance = function(a, b)
{
return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2) + Math.pow(a.z - b.z, 2));
};

return vector3;

Expand Down
Loading

0 comments on commit 8a7b140

Please sign in to comment.