Após visitar alguns sites, e finalmente cair de paraquedas nessa linda biblioteca threejs.org, vi que a internet me surpreende a cada dia.
A proposta da biblioteca é :
O objetivo do projeto é criar uma biblioteca 3D leve, com um baixo nível de complexidade – em outras palavras, para iniciantes. A biblioteca oferece <canvas>, <svg>, CSS3D e renderizadores WebGL .
Em outras palavras, você pode fazer um monte de coisas legais em 3D com javascript rodando do lado do cliente sem necessidade de processamento gráfico pesado!
Veja uma imagem do que eu fiz aqui :
Não entendeu ainda o que eu quis diz dizer? Veja um live demo aqui
Viu que maneiro?
Que tal aprender a fazer um desses? Vamos lá?
O código resumidamente é bastante simples, vamos a nossa página HTML :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="pt" lang="pt">
<meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<head>
<title>Cubo 3D</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Js -->
<script src="../Content/js/jquery-1.10.1.min.js"></script>
<script src="../Content/js/canvas.js"></script>
<script src="../Content/js/three.js"></script>
</head>
<body style="background:#333;">
<div id="main">
<section class="cubo">
<div id="cubo-canvas"></div>
</section>
</div>
</html>
Você pode perceber que temos apenas 3 arquivos, a bilbioteca Jquery, nosso arquivo de configuração Canvas.js e a biblioteca 3D Three.js
Vamos dar uma olhada no código do nosso arquivo de configuração:
$(function () {
//cria elemento canvas do html5
var canvasEl = document.createElement('canvas');
if (!canvasEl.getContext || $(window).width() < 479) {
$("#cubo-canvas").append('<img src="../Content/img/cubo.png" alt="Cubo 3D" />');
return;
}
//instancia as variáveis necessárias
var camera, scene, renderer, cubo;
var targetRotationX = 0;
var targetRotationY = 0;
var targetRotationOnMouseDownX = 0;
var targetRotationOnMouseDownY = 0;
var mouseX = 0;
var mouseY = 0;
var mouseXOnMouseDown = 0;
var mouseYOnMouseDown = 0;
//define tamanho
var canvasWidth = 390;
var canvasHeight = 390;
//define o eixo
var canvasHalfX = canvasWidth / 2;
var canvasHalfY = canvasHeight / 2;
//define o inicio
window.requestAF = function () {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
}
);
} ();
//inicia a figura
init();
//incia a renderizaçao e animação
animate();
//cria o elemento
function init() {
var container = document.getElementById("cubo-canvas");
//posicao de camera
camera = new THREE.Camera(53, canvasWidth / canvasHeight, 1, 1000);
camera.position.y = 150;
camera.position.z = 500;
camera.target.position.y = 150;
//define um cenário
scene = new THREE.Scene();
//define as "faces" do cubo ( você pode fazer um dado! )
var materiais = [
new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("../Content/img/cubo.jpg") }), // Left side
new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("../Content/img/cubo.jpg") }), // Right side
new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("../Content/img/cubo.jpg") }), // Top side
new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("../Content/img/cubo.jpg") }), // Bottom side
new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("../Content/img/cubo.jpg") }), // Front side
new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("../Content/img/cubo.jpg") }) // Back side
];
//define o cubo
cubo = new THREE.Mesh(new THREE.Cube(260, 260, 260, 4, 4, 4, materiais), new THREE.MeshFaceMaterial());
cubo.position.y = 150;
//adiciona o cubo na cena
scene.addObject(cubo);
//renderiza
renderer = new THREE.CanvasRenderer();
renderer.setSize(canvasWidth, canvasHeight);
container.appendChild(renderer.domElement);
container.addEventListener('mousemove', onMouseMove, false);
}
//velocidade do cubo em relaçao ao mouse
function onMouseMove(event) {
mouseX = event.clientX - canvasHalfX;
mouseY = event.clientY - canvasHalfY;
targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDown) * 0.02;
targetRotationY = targetRotationOnMouseDownY + (mouseY - mouseYOnMouseDown) * 0.002;
}
function animate() {
requestAF(animate);
render();
}
//velocidade de renderizaçao
function render() {
cubo.rotation.x += (targetRotationY - cubo.rotation.x) * 0.05;
cubo.rotation.y += (targetRotationX - cubo.rotation.y) * 0.05;
renderer.render(scene, camera);
}
});
Ufa! Muitos detalhezinhos, mas nada que seja complicado de entender.
E pronto! Nosso cubo está funcionando.
Você pode baixar todo o projeto cubo3d, para estudar melhor.
Não esqueça de conferir ótimos exemplos aqui: http://threejs.org/
Ah, que tal dar aquela curtida na nossa Fã Page?
