1. Introducción a Three.js

1.1 ¿Qué es Three.js?

Three.js es una biblioteca de JavaScript que facilita la creación y visualización de gráficos 3D en el navegador web utilizando WebGL. WebGL es una API de JavaScript que permite renderizar gráficos interactivos en 2D y 3D sin necesidad de plugins adicionales. Sin embargo, trabajar directamente con WebGL puede ser complejo debido a su bajo nivel. Aquí es donde Three.js entra en juego, proporcionando una abstracción más amigable y simplificando tareas comunes como la creación de escenas, cámaras, luces y objetos 3D.

1.2 Instalación y configuración básica

Para comenzar a trabajar con Three.js, es necesario configurar un entorno de desarrollo adecuado. A continuación, se detallan los pasos para instalar y configurar Three.js tanto de manera local como utilizando un gestor de paquetes como npm.

1.2.1 Métodos de instalación

Existen varias formas de incluir Three.js en tu proyecto:

Uso de un CDN (Content Delivery Network): Esta es la forma más sencilla de empezar, ideal para proyectos pequeños o para probar rápidamente.

   <!DOCTYPE html>
   <html lang="es">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Three.js con CDN</title>
   </head>
   <body>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
       <script>
           // Código Three.js aquí
           const scene = new THREE.Scene();
           const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
           const renderer = new THREE.WebGLRenderer();
           renderer.setSize(window.innerWidth, window.innerHeight);
           document.body.appendChild(renderer.domElement);

           const geometry = new THREE.BoxGeometry();
           const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
           const cube = new THREE.Mesh(geometry, material);
           scene.add(cube);

           camera.position.z = 5;

           function animate() {
               requestAnimationFrame(animate);
               cube.rotation.x += 0.01;
               cube.rotation.y += 0.01;
               renderer.render(scene, camera);
           }

           animate();
       </script>
   </body>
   </html>
   ```

2. **Descarga directa de Three.js:**
   Puedes descargar el archivo `three.min.js` desde el [sitio oficial de Three.js](https://threejs.org/) y enlazarlo localmente en tu proyecto.

   - Descarga el archivo desde [Three.js Builds](https://threejs.org/build/).
   - Coloca el archivo en una carpeta de tu proyecto, por ejemplo, `js/`.
   - Enlázalo en tu HTML:

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

Uso de npm (Node Package Manager): Ideal para proyectos más grandes y que requieren gestión de dependencias.
Paso 1: Inicializa un proyecto npm si aún no lo has hecho.

bash npm init -y
Paso 2: Instala Three.js.

bash npm install three
Paso 3: Configura tu proyecto para usar módulos ES6 o una herramienta de empaquetado como Webpack.
Ejemplo de uso con módulos ES6:

     // main.js
     import * as THREE from 'three';

     const scene = new THREE.Scene();
     const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
     const renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);

     const geometry = new THREE.BoxGeometry();
     const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
     const cube = new THREE.Mesh(geometry, material);
     scene.add(cube);

     camera.position.z = 5;

     function animate() {
         requestAnimationFrame(animate);
         cube.rotation.x += 0.01;
         cube.rotation.y += 0.01;
         renderer.render(scene, camera);
     }

     animate();

Configura un servidor de desarrollo: Puedes usar herramientas como webpack-dev-server o vite para servir tu proyecto.

bash npm install --save-dev webpack webpack-cli webpack-dev-server

1.2.2 Requisitos del entorno

Servidor local (opcional pero recomendado): Algunos navegadores imponen restricciones al cargar archivos locales (por ejemplo, texturas). Usar un servidor local evita estos problemas. Puedes usar extensiones como Live Server en Visual Studio Code o herramientas como http-server de npm.

bash npm install -g http-server http-server

Node.js y npm (si usas gestores de paquetes): Para proyectos que requieran empaquetadores, gestores de dependencias u otras herramientas, asegúrate de tener Node.js y npm instalados. Puedes descargarlos desde nodejs.org.

1.3 Preparación del entorno: HTML, JavaScript y Node.js (si se requiere)

A continuación, se detalla cómo preparar un entorno básico para trabajar con Three.js, tanto si decides usar un enfoque sencillo con HTML y JavaScript puro como si optas por un entorno más avanzado utilizando Node.js y módulos ES6.

1.3.1 Proyecto básico con HTML y JavaScript

Este enfoque es ideal para principiantes y proyectos pequeños.

Estructura de carpetas:

   mi-proyecto-threejs/
   ├── index.html
   └── js/
       └── three.min.js

Contenido de index.html:

   <!DOCTYPE html>
   <html lang="es">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Mi Primera Escena con Three.js</title>
       <style>
           body { margin: 0; }
           canvas { display: block; }
       </style>
   </head>
   <body>
       <!-- Enlace a Three.js -->
       <script src="js/three.min.js"></script>
       <script>
           // Crear la escena
           const scene = new THREE.Scene();

           // Crear la cámara
           const camera = new THREE.PerspectiveCamera(
               75, // Campo de visión
               window.innerWidth / window.innerHeight, // Aspect ratio
               0.1, // Near clipping plane
               1000 // Far clipping plane
           );

           // Crear el renderizador
           const renderer = new THREE.WebGLRenderer();
           renderer.setSize(window.innerWidth, window.innerHeight);
           document.body.appendChild(renderer.domElement);

           // Crear un cubo
           const geometry = new THREE.BoxGeometry();
           const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
           const cube = new THREE.Mesh(geometry, material);
           scene.add(cube);

           // Posicionar la cámara
           camera.position.z = 5;

           // Función de animación
           function animate() {
               requestAnimationFrame(animate);

               // Rotar el cubo
               cube.rotation.x += 0.01;
               cube.rotation.y += 0.01;

               // Renderizar la escena
               renderer.render(scene, camera);
           }

           animate();

           // Manejar el redimensionamiento de la ventana
           window.addEventListener('resize', () => {
               const width = window.innerWidth;
               const height = window.innerHeight;
               renderer.setSize(width, height);
               camera.aspect = width / height;
               camera.updateProjectionMatrix();
           });
       </script>
   </body>
   </html>

Ejecutar el proyecto:
Abre el archivo index.html en tu navegador.
Deberías ver un cubo verde girando en el centro de la pantalla.

1.3.2 Proyecto avanzado con Node.js y módulos ES6

Este enfoque es más adecuado para proyectos complejos que requieren una estructura modular, empaquetado y herramientas de desarrollo avanzadas.

Inicializar el proyecto:

   mkdir mi-proyecto-threejs
   cd mi-proyecto-threejs
   npm init -y

Instalar Three.js y otras dependencias (opcional):

bash npm install three

Configurar herramientas de desarrollo:
Uso de Webpack (opcional pero recomendado):

bash npm install --save-dev webpack webpack-cli webpack-dev-server
Crear archivos de configuración:
- webpack.config.js:

       const path = require('path');

       module.exports = {
           entry: './src/index.js',
           output: {
               filename: 'bundle.js',
               path: path.resolve(__dirname, 'dist'),
           },
           devServer: {
               contentBase: path.join(__dirname, 'dist'),
               compress: true,
               port: 9000,
           },
           module: {
               rules: [
                   {
                       test: /\.js$/,
                       exclude: /node_modules/,
                       use: {
                           loader: 'babel-loader',
                           options: {
                               presets: ['@babel/preset-env'],
                           },
                       },
                   },
               ],
           },
           mode: 'development',
       };

Instalar Babel (para compatibilidad):

bash npm install --save-dev babel-loader @babel/core @babel/preset-env
- Crear .babelrc:

       {
           "presets": ["@babel/preset-env"]
       }

Estructura de carpetas:

   mi-proyecto-threejs/
   ├── dist/
   │   └── index.html
   ├── src/
   │   └── index.js
   ├── package.json
   ├── webpack.config.js
   └── .babelrc

Contenido de src/index.js:

   import * as THREE from 'three';

   // Crear la escena
   const scene = new THREE.Scene();

   // Crear la cámara
   const camera = new THREE.PerspectiveCamera(
       75,
       window.innerWidth / window.innerHeight,
       0.1,
       1000
   );

   // Crear el renderizador
   const renderer = new THREE.WebGLRenderer({ antialias: true });
   renderer.setSize(window.innerWidth, window.innerHeight);
   document.body.appendChild(renderer.domElement);

   // Crear un cubo
   const geometry = new THREE.BoxGeometry();
   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
   const cube = new THREE.Mesh(geometry, material);
   scene.add(cube);

   // Posicionar la cámara
   camera.position.z = 5;

   // Función de animación
   function animate() {
       requestAnimationFrame(animate);

       // Rotar el cubo
       cube.rotation.x += 0.01;
       cube.rotation.y += 0.01;

       // Renderizar la escena
       renderer.render(scene, camera);
   }

   animate();

   // Manejar el redimensionamiento de la ventana
   window.addEventListener('resize', () => {
       const width = window.innerWidth;
       const height = window.innerHeight;
       renderer.setSize(width, height);
       camera.aspect = width / height;
       camera.updateProjectionMatrix();
   });

Contenido de dist/index.html:

   <!DOCTYPE html>
   <html lang="es">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Mi Proyecto Three.js</title>
       <style>
           body { margin: 0; }
           canvas { display: block; }
       </style>
   </head>
   <body>
       <script src="bundle.js"></script>
   </body>
   </html>
   ```

7. **Agregar scripts al `package.json`:**

   ```json
   "scripts": {
       "start": "webpack serve --open",
       "build": "webpack"
   }

Ejecutar el proyecto:
Inicia el servidor de desarrollo:

bash npm run start
Se abrirá automáticamente una ventana en tu navegador en http://localhost:9000 mostrando el cubo giratorio.