DJC1 - Día 17 - Llegando al millón de usuarios activos
¿Cómo crear tu primer cubo 3D con Three.js?
Transforma líneas de código en formas tridimensionales: tu primer cubo 3D está a solo unos pasos.
Three.js es una biblioteca de JavaScript que permite crear gráficos 3D interactivos en el navegador de manera sencilla y eficiente. Crear tu primer cubo es una forma perfecta de empezar a entender los fundamentos del modelado y la visualización 3D en la web.
Para crear un cubo básico necesitas tres elementos principales: escena, cámara y renderizador. La escena (Scene) es el contenedor donde se colocan todos los objetos 3D. La cámara (PerspectiveCamera) define la perspectiva desde la que se verá la escena. El renderizador (WebGLRenderer) es el encargado de dibujar todo en el lienzo del navegador.
Un ejemplo básico para crear un cubo sería:
// 1. Crear la escena
const scene = new THREE.Scene();
// 2. Configurar la cámara
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 3. Configurar el renderizador
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 4. Crear la geometría y el material del cubo
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
// 5. Añadir el cubo a la escena
scene.add(cube);
// 6. Crear la animación
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
Con este código, tendrás un cubo girando en 3D en tu navegador. A partir de aquí, puedes explorar cómo añadir más objetos, luces, texturas y controles interactivos para hacer escenas más complejas y dinámicas. Three.js también permite integrar modelos 3D externos, efectos de partículas y animaciones avanzadas, convirtiéndolo en una herramienta muy poderosa para desarrolladores web que quieran llevar sus proyectos al siguiente nivel.
Versiones
v0.1.0
- ¿Cómo crear tu primer cubo 3D con Three.js?