Three.js es una biblioteca JavaScript de código abierto que se utiliza para crear y visualizar gráficos 3D en un navegador web. Es compatible con WebGL, una tecnología de gráficos en 3D que se ejecuta en la GPU (unidad de procesamiento de gráficos) del ordenador, lo que permite crear escenas 3D complejas en tiempo real.

Three.js ofrece una amplia gama de herramientas y funciones para crear gráficos 3D interactivos en un navegador web, incluyendo la capacidad de cargar modelos 3D desde archivos, aplicar texturas y materiales a los objetos, y manipular la cámara para ver la escena desde diferentes ángulos. También incluye soporte para sombras, iluminación, animación y física.

En este ejemplo vamos a crear nuestra primera escena y mostrar un modelo 3D en formato GLB.

Para comenzar vamos a crear un proyecto nuevo en este caso vamos a usar Vite npm create vite@latest seleccionamos un proyecto vanilla con javascript.

La estructura del proyecto es la siguiente:

En main.js vamos a agregar el siguiente código:

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

// Crear escena
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  15,
  window.innerWidth / window.innerHeight,
  0.1,
  2000
)
camera.position.set(200, 200, 200)
camera.lookAt(0, 0, 0)
const renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
window.addEventListener("resize", () => {
  renderer.setSize(window.innerWidth, window.innerHeight)
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
});
// Luz ambiental
const ambient_light = new THREE.AmbientLight('#FFF', 0.5)
scene.add(ambient_light)
// Punto de luz
const light = new THREE.PointLight('#FFF', 1, 100)
light.position.set(15, 15, 15)
scene.add(light)
// Permite mover la camara al rededor de un objeto
const controls = new OrbitControls(camera, renderer.domElement)
// Carga de modelo en formato GLB
const loader = new GLTFLoader()
loader.load('models/Flamingo.glb', (gltf) => {
  const model = gltf.scene
  model.scale.set(0.3, 0.3, 0.3)
  model.position.set(0, 0, 0)
  scene.add(model)
  const animate = () => {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
    // Rotar modelo
    model.rotation.y += 0.01
  }
  animate();
}, undefined, (error) => {
  console.error(error)
})

En resultado sera este, un modelo 3D que gira y puedes usar el click izquierdo y derecho para mover la camara.

En este repositorio encontrarás el codigo completo y el modelo para que puedas probar. El formato GLB permite animar nuestros modelos, para un proximo post vamos a ver como mostrar esas animaciones desde Three JS.