Bem vindo ao Tutorial sobre Three.js

Esse tutorial faz parte do material da disciplina Computação Visual ministrada pelo professor Adolfo Guimarães na Universidade Tiradentes. O material desenvolvido foi baseado nos recursos disponiveis no site oficial do Three.js (www.threejs.org) e no livro Three.js Essentials.

O que é Three.js

Three.js é uma biblioteca open-source em JavaScript que permite criar e renderizar cenas 3D diretamente no navegador. Criada em 2010, a biblioteca permite criar diversas cenas 3D de maneira simples. Para renderizar, o Three.js utiliza WebGL (https://www.khronos.org/webgl/) (se o navegador suportar). Programar diretamente em WebGL não é uma tarefa tão simples. Three.js apresenta uma API de fácil utilização que permite criar e manipular objetos 3D sem a necessidade de um conhecimento aprofundado de WebGL or fórmulas matemáticas complexas.

Para ver um exemplo de aplicação do uso do Three.js, acesse o site: http://helloracer.com/racer-s/.

Você pode encontrar a documentação completa do uso do Three.js e vários exemplos no site: http://threejs.org. Uma série de livros também abordam tal assunto.

Clique aqui para ver a lista de alguns

Requisitos

Three.js é totalmente em JavaScript. Não é necessário nenhuma outra biblioteca para pode usar a ferramenta. No entanto, o navegador deve ter suporte a WebGL. Grande parte dos navegadores atuais possuem.

É possíve visualizar os exemplos de um celular, desde que o navegador suporte. O desempenho vai depender basicamente do dispositivo que está executando a cena.

Conteúdo abordado na disciplina

Na disciplia vamos procurar abordar alguns conceitos básicos de Computação Gráfica. O Three.js será utilizado para facilitar a construção dos exemplos e visualização de alguns conceitos teóricos. O conteúdo abordado na disciplina será:

Para começar, acesse o menu Criação de Cena Básica para montarmos o ambiente de desenvolvimento usando o Three.js ;)