¿Alguna vez imaginó cómo se ejecutan estos gráficos y juegos en un navegador web? ¿Cuál es la tecnología principal detrás de esto? Por supuesto, no es posible simplemente usando HTML y CSS. En días anteriores usamos WebGL para esta tarea. WebGL (Biblioteca de gráficos web) es una API de JavaScript que se utiliza para representar objetos tridimensionales, objetos bidimensionales y gráficos en el navegador web. La API de WebGL permite a los usuarios experimentar contenido interactivo en páginas web, con aceleración de GPU, sin tener que descargar o instalar primero ningún complemento. Para los desarrolladores, WebGL proporciona acceso de bajo nivel al hardware con la estructura de código familiar de OpenGL ES.
WebGL fue creado por la Organización Mozilla. Con todos estos beneficios de WebGL, hay algunos inconvenientes de WebGL donde Three.js entra en juego. WebGL es un sistema de muy bajo nivel que solo dibuja objetos básicos como puntos, cuadrados y líneas. Para hacer algo significativo con WebGL generalmente se requiere bastante código y ahí es donde entra en juego Three.js .
¿Qué es Three.js?
Three.js es una biblioteca JavaScript de código abierto que se utiliza para mostrar gráficos, objetos 3D y 2D en el navegador web. Utiliza la API de WebGL detrás de escena. Three.js le permite usar su GPU (Unidad de procesamiento de gráficos) para representar los gráficos y los objetos 3D en un lienzo en el navegador web. ya que estamos usando JavaScript, también podemos interactuar con otros elementos HTML. Three.js fue lanzado por Ricardo Cabello en abril de 2010.
¿Por qué usamos Three.js?
- Dado que Three.js es de código abierto, podemos ver fácilmente el código fuente y comprender la funcionalidad del código (funciones).
- Cuando usamos WebGL para gráficos, no es compatible con la mayoría de los navegadores, pero Three.js es compatible con la mayoría de los navegadores.
- No requiere ningún complemento de terceros para ejecutar el código.
- Solo necesita trabajar en un solo lenguaje de programación JavaScript y, por supuesto, HTML.
¿Cómo incluir Three.js en sus proyectos?
Hay muchas maneras de agregar Three.js en proyectos, algunas de ellas son bastante simples y otras son un poco complejas, sin embargo, todas dicen que tenemos que incluir cualquiera de estos archivos en nuestro proyecto:
- tres.js
- tres.min.js
- tres.módulo.js
todos estos archivos están disponibles en la página de GitHub de Three.js .
Enfoque 1: (Descargue el proyecto completo Three.js): la forma más fácil de hacerlo es simplemente descargar el proyecto completo three.js en su sistema y usar los archivos desde allí.
Puede descargar la última versión de three.js desde su página de GitHub . Una vez que lo haya descargado, ábralo y busque dentro de la carpeta de compilación , encontrará los tres scripts allí.
Enfoque 2: (instalar el paquete de Three.js mediante NPM o YARN): Three.js también está disponible como paquete en NPM . Esto significa que si tiene Node.js y NPM configurados en su computadora, puede abrir un símbolo del sistema y escribir:
npm i three
Luego, puede importar three.js desde el archivo three.module.js a su archivo JavaScript consultando el paquete three:
import * as THREE from "three";
Y, si prefiere Yarn sobre NPM, también puede agregar el paquete usando el siguiente comando en la ventana de la terminal:
yarn add three
Enfoque 3: (Usar el enlace CDN): puede vincular los archivos desde una CDN (red de entrega de contenido), que es un sitio remoto dedicado a alojar archivos para que pueda usarlos en un sitio web.
De hecho, incluso puede usar el sitio Three.js.org como un CDN. Puede vincular el archivo three.js usando este enlace: https://threejs.org/build/three.js e incluirlo en su HTML de esta manera:
<script src="https://threejs.org/build/three.js"></script>
Pero hay un problema al usar el enlace CDN de three.js.org. Al usar este enlace, siempre funcionará en una versión actualizada. Es bueno cuando estamos en modo de desarrollo, pero si hablamos de producción, esto no es bueno si alguna función o sintaxis cambia con la actualización, su código dejará de funcionar, por lo que sugerimos usar CDN desde estos sitios:
Y eso es todo, al usar cualquiera de estos enfoques, puede usar Three.js en su proyecto.
Publicación traducida automáticamente
Artículo escrito por harshmishra2102 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA