Introdução ao Three.js em três minutos: como criar uma cena 3D com JavaScript

No desenvolvimento da Web, os gráficos 3D estão recebendo cada vez mais atenção, e o Three.js, como uma biblioteca JavaScript de renderização 3D baseada em WebGL, nos fornece uma maneira simples e rápida de criar cenas 3D complexas. Se você está apenas aprendendo o Three.js e deseja começar rapidamente, este artigo mostrará como criar uma cena 3D simples em JavaScript.

1. Crie uma cena

Primeiro, precisamos criar uma cena Three.js. Adicione um elemento `<div>` vazio ao arquivo HTML e crie um objeto de cena básico usando JavaScript:

var scene = new THREE.Scene();

2. Adicionar câmera

Em seguida, precisamos adicionar uma câmera para que possamos ver a cena do ângulo correto. Three.js oferece suporte a vários tipos de câmeras, como câmeras de perspectiva (PerspectiveCamera) e câmeras ortogonais (OrthographicCamera). Aqui, usamos uma câmera de perspectiva para criar um efeito 3D com um senso de perspectiva.

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

Entre eles, o primeiro parâmetro especifica o alcance do ângulo de visão da câmera, o segundo parâmetro especifica a proporção da câmera e o terceiro e o quarto parâmetros especificam a seção próxima e a seção distante da câmera, respectivamente. Esses parâmetros podem ser ajustados conforme necessário.

3. Adicione um renderizador

Para exibir a cena em uma página da Web, precisamos adicionar um renderizador. Three.js suporta vários tipos de renderizadores, como WebGLRenderer, CanvasRenderer, CSS3DRenderer, etc. Aqui, usamos o WebGLRenderer para criar um renderizador WebGL acelerado por hardware e anexá-lo a um elemento DOM.

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

4. Adicione objetos

Agora que criamos a cena, a câmera e o renderizador, precisamos adicionar alguns objetos e materiais para renderizar o efeito 3D. Aqui criamos um cubo simples e usamos um material básico (MeshBasicMaterial) para colori-lo.

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

5. Renderize a cena

Por fim, use o método `requestAnimationFrame()` na função `render()` para percorrer a cena e atualizar a posição e a rotação da câmera. Isso permite mudanças dinâmicas na cena.

function render() {
    requestAnimationFrame(render);

    // 使立方体绕着X轴和Y轴旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // 更新相机的位置
    camera.position.z = 5;

    renderer.render(scene, camera);
}
render();

Agora, criamos com sucesso uma cena 3D simples e usamos JavaScript para controlar a posição e a rotação da câmera e dos objetos. Esta é apenas a ponta do iceberg do Three.js, ele tem muitos outros recursos e recursos para explorar.

Este artigo fornece um tutorial introdutório básico, na esperança de ajudar os iniciantes. Se quiser aprender mais sobre o Three.js, consulte a documentação oficial e o código de exemplo ou leia os livros e blogs relacionados.