Estudio de Babylon.js

• Renderizado 3D en el navegador
• Soporte para WebGL
• Animaciones y físicas

• Juegos en 3D
• Visualización de datos en 3D
• Experiencias interactivas

Instalación: npm i @babylonjs/core

import { Engine, Scene, FreeCamera, MeshBuilder, Vector3 } from '@babylonjs/core';
const e = new Engine(document.getElementById('c'));
const s = new Scene(e);
MeshBuilder.CreateBox('caja', {}, s);
e.runRenderLoop(() => s.render());

1. Escena + luz + caja

Renderiza una caja iluminada.

import { Engine, Scene, FreeCamera, Vector3, MeshBuilder, StandardMaterial, Color3, HemisphericLight } from '@babylonjs/core';

const e = new Engine(document.getElementById('c'));
const s = new Scene(e);
new HemisphericLight('luz', new Vector3(0, 1, 0), s);
const cam = new FreeCamera('cam', new Vector3(0, 1, -5), s); cam.setTarget(Vector3.Zero());
const caja = MeshBuilder.CreateBox('caja', { size: 1 }, s);
const mat = new StandardMaterial('m', s); mat.diffuseColor = new Color3(1, 0.4, 0);
caja.material = mat;
e.runRenderLoop(() => s.render());

2. Rotación animada

Gira la caja en cada frame.

import { Engine, Scene, FreeCamera, Vector3, MeshBuilder } from '@babylonjs/core';

const e = new Engine(document.getElementById('c'));
const s = new Scene(e);
const cam = new FreeCamera('cam', new Vector3(0, 1, -5), s); cam.setTarget(Vector3.Zero());
const caja = MeshBuilder.CreateBox('caja', {}, s);

e.runRenderLoop(() => { caja.rotation.y += 0.02; s.render(); });