Creando herramientas CAD personalizadas en la web con ThreeJS

Rate this content
Bookmark

Las herramientas de creación de contenido 3D no tienen por qué ser complejas; a veces lo que necesitas es una herramienta especializada que resuelva un problema específico y te proporcione exactamente el modelo que necesitas. Construir este tipo de herramientas utilizando tecnologías web modernas es más fácil de lo que piensas. En esta masterclass, repasaremos los conceptos básicos de cómo escribir una herramienta personalizada basada en la web que pueda exportar modelos 3D.

8 min
28 Sep, 2023

Video Summary and Transcription

Hoy vamos a hablar sobre la creación de herramientas CAD personalizadas en la web con ThreeJS. Exploraremos las razones por las que deberías crear herramientas basadas en la web, incluyendo su naturaleza amigable para principiantes y su idoneidad para contenido generado por los usuarios. Aprenderemos cómo crear geometría personalizada y paramétrica utilizando Three.js, configurar geometría y materiales en Three.js y mejorar la visibilidad añadiendo normales a la geometría.

Available in English

1. Introducción a la creación de herramientas CAD personalizadas con 3JS

Short description:

Hoy vamos a hablar sobre la creación de herramientas CAD personalizadas en la web con 3JS. Exploraremos las razones por las que deberías hacer herramientas basadas en la web, incluyendo su naturaleza amigable para principiantes y su idoneidad para el contenido generado por el usuario. También compartiré un ejemplo de una herramienta que hice usando Three.js, una biblioteca fantástica que simplifica el proceso de creación de modelos 3D.

Hola a todos. Mi nombre es Adrian Herbez y hoy vamos a hablar sobre la creación de herramientas CAD personalizadas en la web con 3JS. Soy desarrollador web y desarrollador de juegos y también hago juguetes, principalmente impresiones 3D para videos de acción. Como tal, he utilizado muchas herramientas 3D a lo largo de los años y en general me encantan todas, excepto que son realmente complicadas. Así que creo que deberías hacer algunas nuevas.

Ahora, ¿por qué querrías hacer eso? Hay muchas razones, pero las más significativas para mí son que puedes hacer herramientas realmente amigables para principiantes y puedes hacer herramientas que son excelentes para el contenido generado por el usuario. Además, no es tan difícil como podrías pensar. Entonces, ¿por qué hacer una herramienta basada en la web? Bueno, porque la web es la mejor plataforma. Es fácil de distribuir, es inherentemente cross-platform, y nuevamente, todo esto contribuye a ser muy accesible para los principiantes.

Aquí tienes un ejemplo del tipo de cosa que quiero decir. Quería que fuera fácil hacer paneles de ciencia ficción de Reebly, así que hice esta herramienta que se ejecuta en un navegador y en lugar de mover puntos o vértices o polígonos, simplemente dibujas un rectángulo en la superficie de la forma base y puedes agregar una característica paramétrica de algunos tipos diferentes. Puedes agregar extrusiones, puedes agregar matrices de botones, puedes agregar asas del tipo que podrías ver en equipos montados en rack, y puedes agregar diales. Y nada de esto requiere habilidades convencionales de modelado 3D, así que es muy accesible. Y hice esto con Three.js. Three.js es una biblioteca fantástica. Es un envoltorio alrededor de WebGL. Tiene muchas cualidades excelentes. Ha estado disponible durante unos 13 años, por lo que tiene un ecosistema muy completo. Funciona bien con React y otros frameworks. Y, al menos personalmente, siento que tiene un gran nivel de abstracción.

2. Creación de un Cubo y Definición de Geometría

Short description:

Hoy vamos a hacer un cubo y aprenderemos cómo crear geometría personalizada y paramétrica usando Three.js. La geometría está compuesta por vértices y caras, que nos permiten construir formas. Comenzaremos ordenando los vértices y especificando sus posiciones. Luego, configuraremos nuestros datos de vértices utilizando un arreglo unidimensional. Finalmente, definiremos las caras haciendo referencia a los vértices en el orden deseado.

Así que hoy vamos a hacer un cubo y vamos a tomar un camino un poco indirecto para llegar allí, pero al hacerlo, aprenderemos todo lo que necesitamos saber para crear geometría personalizada y paramétrica propia.

Pero antes de eso, hay un poco de plantilla. Sé que este código probablemente es demasiado pequeño para ver. Tendré un enlace a un repositorio de GitHub al final, pero lo que quiero destacar es que esto es todo lo que necesitas para configurar una escena en Three.js. Aquí solo hay alrededor de 30 líneas. Todo es muy sencillo.

Entonces, habiendo terminado con eso, hablemos de geometría. La geometría puede contener muchos datos, pero los dos tipos más importantes son los vértices, que son puntos posicionados en el espacio 3D, y las caras, superficies que conectan esos puntos. Hay muchas otras cosas de las que no tendremos tiempo para hablar hoy, pero con los vértices y las caras podemos crear geometría.

Así que aquí tenemos un cubo. Vamos a quitarle su piel y veremos que tiene ocho puntos. Comencemos dándole a esos puntos un orden. Les daremos algunos números, del cero al siete, para organizarlos en algún orden. Y una vez que hayamos hecho eso, especifiquemos dónde están en el espacio. Para mantenerlo simple, solo estamos usando negativos y positivos, lo que nos dará un cubo de dos unidades centrado en el origen, lo cual es genial. Habiendo hecho todo eso, podemos especificar nuestros datos de vértices. Para hacer eso, simplemente voy a configurar un arreglo y voy a agregar números para las coordenadas X, Y y Z de cada vértice. Ten en cuenta que este es un arreglo unidimensional. No estoy agregando un conjunto completo de tripletas a la vez, y esto termina siendo unidimensional, lo cual es importante más adelante.

Entonces, esos son nuestros datos de vértices. Ahora estamos listos para configurar nuestras caras. Las caras se especifican dando una secuencia de vértices en orden. En lugar de tener datos reales, simplemente hacemos referencia a los datos que ya existen en la lista de vértices. El orden en el que especificamos los vértices es muy importante. En gráficos 3D, una gran parte de lograr un rendimiento óptimo es no dibujar cosas que no necesitas ver. Y una de las formas en que lo hacemos es dibujando solo un lado de las caras de forma predeterminada. Las caras realmente solo existen desde una dirección. Y la forma en que especificamos qué dirección es esa es el orden en el que especificamos los vértices. Es importante que especifiquemos nuestros vértices en orden antihorario. Por ejemplo, este triángulo azul involucra los vértices cero, cuatro y tres.

3. Configuración de Geometría y Material en Three.js

Short description:

Para asegurar la representación correcta de las caras en gráficos 3D, debemos especificarlas en orden contrario a las agujas del reloj. Esto se puede hacer ingresando tres enteros como índices en los datos de vértices para cada triángulo. Una vez que se especifican los datos de las caras, podemos configurar la geometría en Three.js. Los objetos en Three.js consisten en geometría y un material. En este caso, estamos usando un material básico de malla con un color verde brillante. Para una transferencia eficiente de datos desde la CPU a la GPU, utilizamos geometría de búfer y llenamos los búferes con datos binarios tipados. Para los vértices, utilizamos float32 como tipo de datos, que representa la posición en el espacio tridimensional.

Pero si los especificamos en orden cero, cuatro, tres, eso sería en sentido de las agujas del reloj. Y esta cara apuntaría hacia el interior del cubo en lugar de hacia el exterior del cubo. Y no veríamos nada y nos preguntaríamos por qué no se está representando nada, lo cual es un estado muy común en los gráficos 3D.

Entonces, en cambio, debemos asegurarnos de especificarlos en orden contrario a las agujas del reloj, como tres, cuatro, cero. Dicho esto, podemos especificar nuestros datos de las caras. Comenzamos nuevamente con un arreglo. Y para cada triángulo, ingresamos tres enteros que son índices en los datos de vértices. Así que hacemos eso una vez por cada triángulo que tengamos.

Y con eso, estamos listos para configurar realmente alguna geometría en Three.js. Los objetos en Three.js siempre consisten en geometría y un material. Así que configuremos eso. Vamos a usar un material básico de malla. Hay muchos tipos de materiales diferentes en Three.js. Este es el más simple, pero todos funcionan de manera similar en el sentido de que los creamos y pasamos un objeto con parámetros. En este caso, simplemente pasamos un color, verde brillante, y para la geometría, vamos a usar una geometría de búfer.

Ahora también hay una geometría básica en Three.js, pero está un poco desactualizada y es un poco menos eficiente. Quiero que todo esté configurado realmente bien para el futuro. Así que vamos a usar una geometría de búfer, lo que significa que tenemos que llenar búferes. Un búfer es un dato binario tipado que se puede utilizar para mover datos de manera eficiente desde la CPU a la GPU. Para los vértices, queremos usar float32 como tipo de datos. Porque estamos hablando de números de punto flotante que representan la posición en el espacio tridimensional. Así que primero creamos un arreglo float32 a partir de nuestros vértices. Luego creamos un nuevo atributo de búfer. Y esto puede parecer un poco críptico. Pasamos los datos de vértices, ¿verdad? Pero luego pasamos este tres. Y lo que tiene que ver con eso es que los atributos de búfer siempre están en función de cada vértice. A medida que pasamos datos, debemos especificar cuántos números o qué tan rápido consumimos datos por vértice. En este caso, son datos de posición. Así que tenemos una X, una Y y una Z. Así que tenemos tres números por vértice.

4. Configuración de Geometría y Normales en Three.js

Short description:

Configuramos el atributo de búfer como la posición y definimos los índices. Con la geometría configurada, podemos mejorar la visibilidad agregando normales. Las normales son vectores que apuntan hacia afuera de una superficie y pueden ser calculadas por Three.js. Usando un material de normales de malla, podemos asignar colores a los vectores, lo que resulta en un mejor detalle de la geometría.

Así que pasamos el valor tres. Ahora que tenemos el atributo de búfer, lo configuramos como la posición. Y ahora estamos listos para los índices, que es similar, excepto que usamos un unsigned int en su lugar. Y cuando creamos el atributo de búfer, esto es un índice por vértice, así que pasamos el valor uno. Y luego configuramos el índice. Y con eso, tenemos la geometría.

Pero es un poco difícil de ver, porque todo es de color verde brillante. Así que podemos solucionarlo rápidamente con las normales. Entonces, ¿qué es una normal? Una normal es un vector que apunta hacia afuera de una superficie. Puedes tener normales de vértice como en la izquierda o normales de cara como en la derecha. Y puedes pasar esto como atributos de búfer, pero lo haremos un poco más fácil, y dejaremos que Three.js las calcule por nosotros con compute vertex normals. Y una vez que hayamos hecho eso, podemos usar un material de normales de malla, que funciona tomando cada vector, una normal es un vector con componentes x, y y z. Y si interpretamos el x, y y z como un valor RGB, obtenemos colores. Y con esos colores, podemos obtener algo que podemos ver y obtener un detalle mucho mejor de la geometría que hemos creado. Y eso es todo. Muchas gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.

Workshops on related topic

JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.