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.

This talk has been presented at JS GameDev Summit 2023, check out the latest edition of this JavaScript Conference.

FAQ

Three.js es una biblioteca que actúa como un envoltorio alrededor de WebGL, facilitando la creación de gráficos 3D en la web. Es importante porque ayuda a integrar fácilmente gráficos 3D de calidad en aplicaciones web y es compatible con varios frameworks, incluyendo React.

Las principales ventajas incluyen la facilidad de distribución, la compatibilidad entre diferentes plataformas y la accesibilidad para principiantes, permitiendo crear herramientas amigables y eficientes para la generación de contenido por parte de los usuarios.

Adrian Herbez sugiere la creación de herramientas que no requieran habilidades convencionales de modelado 3D, como la herramienta que desarrolló para crear paneles de ciencia ficción, donde los usuarios dibujan rectángulos y añaden características paramétricas sin manipular puntos o vértices directamente.

Para configurar una escena en Three.js, solo se necesitan alrededor de 30 líneas de código para definir elementos básicos como la geometría y los materiales, haciendo que el proceso sea bastante sencillo.

En Three.js, la geometría se define mediante vértices y caras. Los vértices son puntos en el espacio 3D, y las caras son superficies que conectan estos puntos. Los vértices deben especificarse en orden antihorario para asegurar que las caras se orienten correctamente.

Un material básico de malla en Three.js es uno de los tipos más simples de materiales, utilizado para asignar color y otras propiedades básicas a la geometría 3D. Se utiliza para visualizar objetos en la escena con un color uniforme.

Las normales son vectores que apuntan hacia fuera de una superficie y se utilizan para mejorar la visualización de la geometría en Three.js. Se pueden calcular automáticamente con la función 'compute vertex normals', y luego se pueden usar materiales de normales de malla para interpretar estos vectores como colores RGB, proporcionando un detalle visual mejorado.

Usar una geometría de búfer en Three.js implica manejar datos binarios tipados para mover datos de manera eficiente desde la CPU a la GPU. Esto permite una gestión más eficiente y un mejor rendimiento de los recursos gráficos en aplicaciones 3D.

Adrian Herbez
Adrian Herbez
8 min
28 Sep, 2023

Comments

Sign in or register to post your comment.
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.

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.

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

Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Construyendo Experimentos Divertidos con WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Construyendo Experimentos Divertidos con WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Haciendo Juegos Increíbles con LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Haciendo Juegos Increíbles con LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
¡Mejora el rendimiento de tus juegos WebGL Unity!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
¡Mejora el rendimiento de tus juegos WebGL Unity!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Cómo no construir un videojuego
React Summit 2023React Summit 2023
32 min
Cómo no construir un videojuego
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Abrazando WebGPU y WebXR con Three.js
JSNation 2024JSNation 2024
27 min
Abrazando WebGPU y WebXR con Three.js
The 3JS project has evolved into a community-driven effort with numerous contributors over the past 14 years. It started with 3D engine work in Flash and transitioned to using SVGs for rendering in HTML5 before adopting WebGL. The project showcases various projects and frameworks, including a no-code tool powered by 3.js. The team is working on a new render using WebGPU and developing a new shader language called TSL. The hope is that WebGPU will eventually replace WebGL, offering better control and performance.

Workshops on related topic

Crea un Juego Con PlayCanvas en 2 Horas
JSNation 2023JSNation 2023
116 min
Crea un Juego Con PlayCanvas en 2 Horas
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
PlayCanvas de principio a fin: la versión rápida
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas de principio a fin: la versión rápida
Top Content
WorkshopFree
João Ruschel
João Ruschel
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
Introducción a WebXR con Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introducción a WebXR con Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js.
Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena
Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.
Masterclass de Codificación en Vivo de Juegos Pequeños
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Masterclass de Codificación en Vivo de Juegos Pequeños
Workshop
Frank Force
Frank Force
Sumérgete en el cautivador mundo del desarrollo de microjuegos con Frank Force en este interactivo masterclass de codificación en vivo. Diseñado tanto para desarrolladores experimentados como para curiosos principiantes, esta sesión explora los desafíos únicos y las alegrías de crear juegos y demos con restricciones extremas de tamaño.
Construyendo el Metaverso Interconectado y Traversable
JS GameDev Summit 2022JS GameDev Summit 2022
103 min
Construyendo el Metaverso Interconectado y Traversable
WorkshopFree
Avaer Kazmer
Avaer Kazmer
Basado en gran medida en Free Association en el Metaverso - Avaer @Exokit - M3, Avaer demostrará algunas de las formas en que los estándares abiertos permiten la travesía abierta y gratuita de usuarios y activos en todo el metaverso interconectado.