TheLazy.Dev
Portfolio GitHub

Blog

webdev |javascript |3d |threejs

Programación 3D con JavaScript - parte 2

jaimebboyjt

Jaimebboyjt

Posted on December 15, 2023

Programación 3D con JavaScript - parte 2

Primera parte

Configurando nuestro entorno 🤓

Bien, lo primero que vamos a hacer es configurar nuestro entorno de trabajo, no importa que editor uses, necesitaremos un archivo HTML como punto de entrada. Luego darle un margin:0 de estilo al body. Por último importaremos un script que contendrá nuestro archivo JS.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script type="module" src="/main.js"></script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Sip, eso es todo el HTML y CSS que necesitaremos 😮.

Bien, ahora depende de donde y como estés trabajando, puedes instalar ThreeJS o por CDN o por npm packages. Guía de instalacion

Elementos indispensables de toda escena 3D

Son 5 y veremos uno por uno, la idea es entender bien la función de cada uno, en lugar de solo copiar y pegar (si copias el código de Creating-a-scene de threejs ya tienes el famoso verde cubo girando, pero así ni una gracia).

  • Scene 🖼️: Contenedor de nuestras instancias
  • Camera 🎥: Actuará como nuestros ojos en la escena
  • Renderer 🔩: Motor de renderizado.
  • Mesh 🔮: Objecto 3D, algo que mostrar
  • Request animation frame API 💥: Para animar nuestras escenas

Scene 🖼️

El elemento Scene, va a servir como nuestro contenedor, en él van a vivir todos nuestros elementos, sean luces, cámaras, modelos 3D, etc.

Para crearlo solo debemos importarlo de ThreeJs e instanciarlo de la siguiente forma:

import * as THREE from 'three';

const scene = new THREE.Scene();
console.log('scene', scene)
Enter fullscreen mode Exit fullscreen mode

Nota: acá estamos importando todo como THREE, para mayor flexibilidad. Esto no tiene muy buen rendimiento pero es cómodo. Si quisiéramos pudiéramos importar Scene como:
import { Scene } from 'three'

Si prestamos atención a nuestro log veremos algo como:

Log example

Algo muy útil acerca de ThreeJs es que la gran mayoría de objetos heredan de la clase Object3D. Esto significa que muchas propiedades, serán compartidas en otras instancias.

Por ejemplo, una buena práctica es asignarles nombres a nuestro objeto y luego es fácil recorrer toda la escena en busca de él.

Algo particular para prestar atención es nuestra propiedad children 👶, allí veremos todos los objetos 3D que forman parte de nuestra escena.

Camera 🎥

Existen varios tipos de cámaras y para verlas todas en profundidad necesitaríamos un post completo 🙅‍♂️. Por ahora empezaremos usando la PerspectiveCamera Es la más fácil de entender por qué simula el ojo humano (los objetos más alejados se ven más pequeños).

Para la PerspectiveCamera necesitaremos proporcionar unos parámetros, la gran mayoría serán por ahora estándar, pero veamos que son:

  • fov: field of view, campo de visión. Me parece que con una imagen se expresa mejor este parámetro.

Field of view

  • aspect-ratio: en nuestro caso tomaremos el aspect-ratio de nuestro viewport, que no es más que dividir nuestro window.innerWidth / window.innerHeight

  • near: Que tan cerca de nosotros la cámara renderizará

  • far: Que tan lejos nuestra la cámara renderizará

// trabajar con un objecto sizes resulta muy comodo
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
};

const camera = new THREE.PerspectiveCamera(
  45,
  sizes.width / sizes.height,
  1,
  1000
);
console.log('camera', camera)
Enter fullscreen mode Exit fullscreen mode

Image description

Algo importante a tener en cuenta es que "si la cámara no lo renderiza, no consume recursos"

Ahora y como último detalle, recordemos añadir nuestra cámara a nuestra escena con la función scene.add():

...
scene.add(camera);
Enter fullscreen mode Exit fullscreen mode

Renderer 🔩

Nuestro renderer es el puente entre la WebGL API y ThreeJS, básicamente es el motor que da vida a nuestros increíbles gráficos.

ThreeJs provee varios renderers, nosotros en esta ocasión usaremos el WebGLRenderer, lo instanciamos de la siguiente forma:

const renderer = new THREE.WebGLRenderer();
renderer.setSize(sizes.width, sizes.height);
document.body.appendChild(renderer.domElement);
renderer.setClearColor("#111");
renderer.render(scene, camera);
Enter fullscreen mode Exit fullscreen mode

Entonces veamos paso a paso:

  1. Instanciamos nuestro WebGLRenderer desde threeJs
  2. Indicamos el tamaño que tendrá nuestra escena
  3. Acá podemos proporcionarle un elemento HTMLcanvas personalizado o cuando no hemos creado uno manualmente(como es nuestro caso) ThreeJs creará uno automáticamente y vivirá dentro de renderer.domElement Entonces lo que hacemos es colocarlo en nuestro body.
  4. Como detalle opcional (y muchas veces útil), colocaremos el fondo de la escena, un negro menos intenso
  5. Y el último paso es llamar a la función render que recibe como parámetros la escena y la cámara anteriormente creados

Si todo ha salido de manera correcta, veremos que nuestra pantalla está negra, esto es una buena señal, significa que tenemos una escena con threeJs corriendo exitosamente :).

Obviamente, no tiene nada que mostrar aún, pero cambiaremos esto y otros detalles en nuestro siguiente post

Happy 3D coding 😊

Tercera parte

💖 💪 🙅 🚩
jaimebboyjt
Jaimebboyjt

Posted on December 15, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Programación 3D con JavaScript - parte 2
webdev Programación 3D con JavaScript - parte 2

December 15, 2023