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="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.
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 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.
2 Comments Received
Nice work Andy,
I found a fairly complex example of a 3d engine here (using jQuery): http://www.willjessup.com/sandbox/jquery/solar_system/rotator.html
Impressive stuff – as a flash developer I’m always surprised when this kind of functionality can be gleaned from the browser alone.
Stephen
That’s rather epic, both the simple engine you’ve made and the link SB sent through.
There’s an increasingly large list of things that Javascript can accomplish and both examples are testament to that.
Good work.
Leave A Reply