Carrying on from the theme of developing 3d effects in JavaScript I decided to keep researching flash examples and tutorials, trying to recode them into JavaScript. I was then pointed to another really handy website that has some superb flash examples.
Kirupa had one demo in particular that I wanted to see if I could emulate called Scripting 3D in Flash. This example showed how to create a camera movement in flash giving a feeling of perspective.
Having looked at the code I decided this was most definitely possible in JavaScript and here’s what I came up with…
code
HTML
The HTML as seen below is pretty simplistic. Firstly we have a sceneContainer that wraps the whole 3D Engine, then we have a scene3D container which acts very much as a view for the the engine as will be described below and finally we have the individual images within the scene, each with an id allowing individual styling.
<div id="sceneContainer">
<div id="scene3d">
<img src="director.png" id="joe" />
<img src="director.png" id="joe2" />
<img src="director.png" id="joe3" />
<img src="director.png" id="joe4" />
<img src="director.png" id="joe5" />
<img src="director.png" id="joe6" />
<img src="director.png" id="joe7" />
<img src="director.png" id="joe8" />
</div>
</div>
CSS
The CSS details simple styling for the engine. Points to note are as follows:
- sceneContainer has a fixed width/height and an overflow of hidden. This allows us to mask the images as they move back and forth in perspective.
- Next we have the scene3D positioned absolutely with a width of 100% of it’s container (sceneContainer). This allows for easy resizing and positioning of the container within the sceneContainer.
- Finally we have styles for each individual image within the containers. This allows us to position all the images within the scene3d container.
#sceneContainer{
border:1px solid #CCCCCC;
position:absolute;
width:800px;
height:500px;
overflow:hidden;
}
#scene3d{
position:absolute;
left:0%;
width:100%;
}
#joe{
position:absolute;
left:0px;
}
#joe2{
position:absolute;
right:0px;
}
#joe3{
position:absolute;
left:25%;
}
#joe4{
position:absolute;
right:25%;
}
#joe5{
position:absolute;
left:50%;
}
#joe6{
position:absolute;
right:50%;
}
#joe7{
position:absolute;
left:75%;
}
#joe8{
position:absolute;
right:75%;
}
JavaScript
Lastly we have the JavaScript. This is strongly based on the kirupa example and works by looping through the images included in the scene and scaling them based on the variables set in the movie. To achieve the effect of the images zooming in and out we also have to scale and reposition the scene3D container at the same time hiding the overflow within the sceneContainer.
Have a play about with the variables to get to grips with how they control the effect and more over, have fun!
var sceneContainer = document.getElementById(‘sceneContainer’);
var scene3d = document.getElementById(‘scene3d’);
x = 0;
y = 100;
z = 300;
cameraView = new Object();
cameraView.x = 0;
cameraView.y = 0;
cameraView.z = 500;
focalLength = 300;
dir = -1;
speed = 20;
backAndForth = function(){
cameraView.z += speed*dir;
if (cameraView.z > 500){
cameraView.z = 500;
dir = -1;
}else if (cameraView.z < 0){
cameraView.z = 0;
dir = 1;
}
var sprites = scene3d.getElementsByTagName(‘img’);
var spritesLength = sprites.length;
var scaleRatio = focalLength/(focalLength + z – cameraView.z);
for( var i = 0; i < spritesLength; i++ ){
var sprite = sprites[i];
sprite.style.top = ((y – cameraView.y) * scaleRatio)+’px’;
sprite.style.width = sprite.style.height = (100 * scaleRatio)+’px’;
scene3d.style.width = (100 * scaleRatio)+’%';
scene3d.style.left = ’50%’;
scene3d.style.marginLeft = ‘-’+(100 * scaleRatio)/2+’%';
}
};
setInterval(‘backAndForth()’, 30);
demo
Have a look at the Simple 3D JavaScript Engine Demo.
download
Feel free to download the Simple 3D JavaScript Engine Code.
In light of my inpending article on how to create a simple Facebook application I thought I would point you all to a link which you may find helpful now if you already have some experience in developing facebook applications, or if not, you will 100% find it useful after my next article.
Describing themselves as "an index of Free Vector Graphics available for download by some of the best artists around the world" is not an understatement. I must admit I think I’ll be using some of their graphics on my next project. You can see an example icon set to the left and I’ll think you’ll agree the quality is very high.
I decided to post the following link for those budding designers out there. I came across a really handy article on