Idioma: ES
LuisLlamas Logo
Buscar
⏲️ ~ 2 minutos
three-js

Three.js, biblioteca WebGL para crear gráficos 3D

Three.js es una biblioteca de JavaScript que permite crear contenido 3D interactivo para la web. Utiliza WebGL, que es una API que permite que los navegadores web muestren contenido 3D mediante la aceleración por hardware en la GPU.

Three.js ofrece una amplia gama de funcionalidades para interactuar con la escena, como la capacidad de cargar modelos 3D desde archivos como OBJ o STL, aplicar transformaciones y animaciones, y añadir luz y sombras.

Además podemos aplicar transformaciones y animaciones, modificar la posición, rotación y escala de tus objetos utilizando las propiedades correspondientes de su geometría, añadir luz y sombras.

Cómo usar ThreeJS

Para instalar Three.js, hay varias opciones disponibles. Una opción es descargar el archivo de distribución desde el sitio web oficial de Three.js y luego incluirlo en tu proyecto mediante un enlace en el elemento “script” de tu página HTML, o a través de una CDN,

<script src="js/three.min.js"></script>

También puedes utilizar un gestor de paquetes como npm para instalar Three.js y luego importarlo en tu proyecto:

npm install three

Y luego importar el módulo en tu programa

import * as THREE from 'three';

Ejemplo ThreeJS

A continuación veamos un ejemplo sencillo de cómo inicializar ThreeJS, mostrando un sencillo cubo que gira en el espacio. El código necesario sería el siguiente,

<!DOCTYPE html>
<html>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
let camera, scene, renderer, cube

function init () {
  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 )
  camera.position.z = 1

  scene = new THREE.Scene()

  const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5)
  const material = new THREE.MeshNormalMaterial()

  cube = new THREE.Mesh(geometry, material)
  scene.add(cube)

  renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  animate()
}

function animate () {
  requestAnimationFrame(animate)

  cube.rotation.x += 0.01
  cube.rotation.y += 0.01

  renderer.render(scene, camera)
}

init()

Resultado

Con el código anterior obtendríamos este resultado

ThreeJS es Open Source, y todo el código y documentación está disponible en la página del proyecto https://threejs.org/ y en el repositorio del proyecto en https://github.com/mrdoob/three.js/

En esta página