O que é Three.js
Three.js é uma biblioteca JavaScript que facilita a criação de gráficos 3D no browser. Em vez de trabalhar direto com WebGL (que é bem verboso), a gente usa uma API mais amigável que cuida da renderização em WebGL ou canvas.
Primeiro canvas com Three.js
Hoje vamos fazer um cubo 3D animado — o clássico “hello world” do three js. No site threejs.org você encontra vários exemplos. Podemos baixar a biblioteca direto de lá ou usar um CDN. Vamos criar um arquivo HTML. Quem já trabalhou com software 3D sabe que basicamente temos uma cena onde acontecem as coisas em 3D:
<html>
<body>
<script src='//cdnjs.cloudflare.com/ajax/libs/three.js/88/three.js'></script>
<script>
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
</script>
</body>
</html>Esse parâmetro 75 é a profundidade de campo e o window é a proporção da câmera. Com isso, a gente cria uma câmera que tem visão cônica, igual a uma câmera normal. Além disso, temos um renderizador que vai ser responsável por transformar isso em algo a ser enxergado. Por fim, adicionamos ele dentro do body.
Ao rodar, temos uma tela preta, que é nossa scene. Agora vamos começar a adicionar alguns objetos:
<html>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/88/three.js">
</script>
<script>
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
const box = new THREE.BoxGeometry(1,1,1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const cube = new THREE.Mesh( box, material )
scene.add( cube )
camera.position.z = 5
const animate = () => {
requestAnimationFrame( animate )
renderer.render( scene, camera)
}
animate()
</script>
</body>
</html>O renderizador pega uma câmera e renderiza a cena na câmera, criando a imagem a partir disso.
O animate fica renderizando a todo momento, então caso a gente faça alguma alteração no objeto que está dentro da cena, vai ser atualizado na tela:
const animate = () => {
requestAnimationFrame(animate)
cube.rotation.x += 0.01
cube.rotation.y += 0.01
cube.rotation.z += 0.01
renderer.render(scene, camera)
}Fazendo isso, nosso cubo começa a girar em todas as direções. Isso está sendo renderizado com o WebGL e 3D. Conseguimos carregar modelos 3D, etc.
FAQ
O que é Three.js?
Three.js é uma biblioteca JavaScript que facilita a criação de gráficos 3D no navegador. Ela abstrai a complexidade do WebGL, oferecendo uma API mais simples para renderizar cenas 3D, objetos, câmeras e animações direto no canvas.
Para que serve o three js?
O three js serve para criar visualizações e aplicações 3D no browser sem precisar escrever WebGL puro. É usado em jogos web, visualizações de dados, experiências interativas, modelagem 3D no navegador e qualquer coisa que precise de gráficos tridimensionais.
Three.js o que é necessário para começar?
Para começar com Three.js você precisa de conhecimento básico de JavaScript e HTML. A biblioteca cuida do WebGL — você só precisa entender os conceitos de cena (scene), câmera (camera) e renderizador (renderer). O primeiro projeto pode ser um cubo animado, como mostramos acima.
Confira o video:
Curta o DevPleno no Facebook, se inscreva no canal no YouTube e cadastre seu e-mail para não perder as atualizações. Abraço!
Mestre em Sistemas de Informação pela USP e criador do DevPleno. Iniciou sua carreira como professor com apenas 18 anos em um curso técnico, foram 11 anos em sala de aula formando desenvolvedores fullstack no sul de Minas Gerais.