Apresentando figuras 3D com Javascript

0

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 :

cubo 3D

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?

 

Compartilhe.

Sobre o autor

Criador do blog Código Simples e com mais 9 anos de experiência em TI, com títulos de MVP Microsoft na área de Visual Studio Development, Neo4j Top 50 Certificate, Scrum Master e MongoDB Evangelist. Atuando em funções analista, desenvolvedor, arquiteto, líder técnico e gestor de equipes. Mais informações em : http://jhonathansoares.com