O que threejs-fundamentals faz?
Fundamentos do Three.js: configuração de cena, câmeras, renderizador, hierarquia Object3D e sistemas de coordenadas. Use ao configurar cenas 3D, criar câmeras, configurar renderizadores, gerenciar hierarquias de objetos ou trabalhar com transformações.
Visão Geral
Esta skill cobre os conceitos essenciais do Three.js para criar e manipular cenas 3D.
Principais Tópicos
- Configuração de cena (Scene, Camera, Renderer)
- Hierarquia e transformações de Object3D
- Sistemas de coordenadas e unidades
- Câmeras: PerspectiveCamera e OrthographicCamera
- Renderizador WebGL
Exemplo de Uso
import * as THREE from 'three';
// Configuração básica
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);
// Criação de objeto
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
// Loop de animação
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();