Pristupi 3D unutar HTML-a
Prije ovog dijela treba reći da postoje 3 pristupa za izradu 3D unutar HTML-a
- CSS3 koristeći 3D transformacije (sa ili bez javascripta)
- Canvas 2D (HTML5 + JavaScript) ovaj pristup koristimo mi u našem projektu
- WebGL (HTML5 + Javascript)
Uz sva tri pristupa postoje gotove biblioteke koje se koriste za izradu 3D objekata, njihove transformacije i interakciju sa mišem/tipkovnicom. Razlike u korištenju gotovih biblioteka i izrade vlastitih JavaScript datoteka je u tome da je izrada vlastitih JavaScript datoteka spor i mukotrpan posao. Razlog tome je što se susrećemo sa sljedećim situacijama:
- Crtamo 3D objekte u 2D canvasu (pretvorba točaka iz 3D u 2D zaslon)
- Kordinate zaslona nisu jednake kordinatama koordinatnog sustava
- Ručna izrada metoda za rotaciju, zrcaljenje i translaciju modela/točaka
- ...i mnogi drugi
Primjer rotirajuće kocke koristeći library THREE.js
Kod za izradu kocke koristeći THREE.js
<script src="dist/js/three.min.js">
<script defer="defer">
// revolutions per second
var angularSpeed = 0.1;
var lastTime = 0;
// this function is executed on each animation frame
function animate(){
// update
var time = (new Date()).getTime();
var timeDiff = time - lastTime;
var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
cube.rotation.y += angleChange;
cube.rotation.x += angleChange;
lastTime = time;
// render
renderer.render(scene, camera);
// request new frame
requestAnimationFrame(function(){
animate();
});
}
// renderer
container = document.getElementById( 'kocka' );
renderer = new THREE.WebGLRenderer();
renderer.setSize(500, 250);
container.appendChild( renderer.domElement );
// camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
// scene
var scene = new THREE.Scene();
// cube
var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshNormalMaterial());
cube.overdraw = true;
scene.add(cube);
// start animation
animate();
</script>
Primjer rotirajuće kocke - bez biblioteke (ručno)
Kod za izradu kocke ručno
<script type="text/javascript">
window.onload = startDemo;
function Point3D(x,y,z) {
this.x = x;
this.y = y;
this.z = z;
this.rotateX = function(angle) {
var rad, cosa, sina, y, z
rad = angle * Math.PI / 180
cosa = Math.cos(rad)
sina = Math.sin(rad)
y = this.y * cosa - this.z * sina
z = this.y * sina + this.z * cosa
return new Point3D(this.x, y, z)
}
this.rotateY = function(angle) {
var rad, cosa, sina, x, z
rad = angle * Math.PI / 180
cosa = Math.cos(rad)
sina = Math.sin(rad)
z = this.z * cosa - this.x * sina
x = this.z * sina + this.x * cosa
return new Point3D(x,this.y, z)
}
this.rotateZ = function(angle) {
var rad, cosa, sina, x, y
rad = angle * Math.PI / 180
cosa = Math.cos(rad)
sina = Math.sin(rad)
x = this.x * cosa - this.y * sina
y = this.x * sina + this.y * cosa
return new Point3D(x, y, this.z)
}
this.project = function(viewWidth, viewHeight, fov, viewDistance) {
var factor, x, y
factor = fov / (viewDistance + this.z)
x = this.x * factor + viewWidth / 2
y = this.y * factor + viewHeight / 2
return new Point3D(x, y, this.z)
}
}
var vertices = [
new Point3D(-1,1,-1),
new Point3D(1,1,-1),
new Point3D(1,-1,-1),
new Point3D(-1,-1,-1),
new Point3D(-1,1,1),
new Point3D(1,1,1),
new Point3D(1,-1,1),
new Point3D(-1,-1,1)
];
// Define the vertices that compose each of the 6 faces. These numbers are
// indices to the vertex list defined above.
var faces = [[0,1,2,3],[1,5,6,2],[5,4,7,6],[4,0,3,7],[0,4,5,1],[3,2,6,7]];
// Define the colors for each face.
var colors = [[255,0,0],[0,255,0],[0,0,255],[255,255,0],[0,255,255],[255,0,255]];
var angle = 0;
/* Constructs a CSS RGB value from an array of 3 elements. */
function arrayToRGB(arr) {
if( arr.length == 3 ) {
return "rgb(" + arr[0] + "," + arr[1] + "," + arr[2] + ")";
}
return "rgb(0,0,0)";
}
function startDemo() {
canvas = document.getElementById("thecanvas");
if( canvas && canvas.getContext ) {
ctx = canvas.getContext("2d");
setInterval(loop,33);
}
}
function loop() {
var t = new Array();
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(0,0,400,250);
for( var i = 0; i < vertices.length; i++ ) {
var v = vertices[i];
var r = v.rotateX(angle).rotateY(angle);
var p = r.project(400,250,200,4);
t.push(p)
}
var avg_z = new Array();
for( var i = 0; i < faces.length; i++ ) {
var f = faces[i];
avg_z[i] = {"index":i, "z":(t[f[0]].z + t[f[1]].z + t[f[2]].z + t[f[3]].z) / 4.0};
}
avg_z.sort(function(a,b) {
return b.z - a.z;
});
for( var i = 0; i < faces.length; i++ ) {
var f = faces[avg_z[i].index]
ctx.fillStyle = arrayToRGB(colors[avg_z[i].index]);
ctx.beginPath()
ctx.moveTo(t[f[0]].x,t[f[0]].y)
ctx.lineTo(t[f[1]].x,t[f[1]].y)
ctx.lineTo(t[f[2]].x,t[f[2]].y)
ctx.lineTo(t[f[3]].x,t[f[3]].y)
ctx.closePath()
ctx.fill()
}
angle += 2
}
</script>
<canvas id="thecanvas" width="400" height="250"> </canvas>