Estudio de Three.js

• Renderizado de gráficos 3D con WebGL
• Carga de variedad de formatos de modelos 3D
• Soporte para efectos de postprocesamiento

• Juegos 3D en el navegador
• Visualización de datos en 3D
• Realidad virtual y aumentada

Instalación: npm i three

import * as THREE from 'three';
const s = new THREE.Scene();
s.add(new THREE.Mesh(new THREE.BoxGeometry(),
  new THREE.MeshBasicMaterial({ color: 0xff6600 })));

1. Cubo que rota

Escena 3D con un cubo animado por el render loop.

import * as THREE from 'three';

const s = new THREE.Scene();
const cam = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 100);
cam.position.z = 3;
const r = new THREE.WebGLRenderer();
document.body.appendChild(r.domElement);

const cubo = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 0xff6600 }));
s.add(cubo);

function loop() { cubo.rotation.x += 0.01; cubo.rotation.y += 0.01; r.render(s, cam); requestAnimationFrame(loop); }
loop();

2. Luz y cámara orbitante

Escena iluminada con cámara que orbita alrededor del objeto.

import * as THREE from 'three';

const s = new THREE.Scene();
s.add(new THREE.AmbientLight(0x404040));
const luz = new THREE.DirectionalLight(0xffffff, 1); luz.position.set(2, 3, 4); s.add(luz);

const cam = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100);
cam.position.set(3, 2, 5);
const r = new THREE.WebGLRenderer(); document.body.appendChild(r.domElement);

const esfera = new THREE.Mesh(new THREE.SphereGeometry(1), new THREE.MeshStandardMaterial({ color: 0x3399ff }));
s.add(esfera);

function loop() { cam.position.x = 5 * Math.sin(Date.now() / 1000); cam.position.z = 5 * Math.cos(Date.now() / 1000); cam.lookAt(0, 0, 0); r.render(s, cam); requestAnimationFrame(loop); }
loop();