Versión en EspañolES

Building 3D Web Apps in 2025 – React, XR & AI?

Maintainer of react-three/uikit and react-three/xr

El 3D en la web ya no se trata solo de demostraciones tecnológicas llamativas: ahora se utiliza para construir herramientas de alta calidad, visualizaciones, juegos y experiencias inmersivas. En esta charla, exploraremos por qué, qué y cómo construir aplicaciones web 3D listas para producción con React en 2025, y si la IA puede ayudar. Lo que cubriremos:

Una breve historia del 3D en la web
El estado actual del ecosistema de React Three
Comenzando en vivo construyendo una aplicación XR con React
El papel que puede jugar la IA en la construcción de experiencias 3D
Por qué el 3D se está convirtiendo en una frontera para expresar tus habilidades creativas y de ingeniería

Ya sea que solo tengas curiosidad por el 3D o ya estés construyendo aplicaciones con el ecosistema de React Three, esta charla te mostrará lo que viene, lo que ya es posible y cómo comenzar con React y 3D.

This talk has been presented at React Advanced 2025, check out the latest edition of this React Conference.

Bela Bohlender

17 min

01 Dec, 2025

Comments

Video Summary and Transcription

Bela, mantenedor de código abierto, discute el desarrollo de aplicaciones web 3D en 2025, aprovechando React para aplicaciones XR y la asistencia de IA. Explora la evolución del 3D en la web, el papel de React y el impacto de la IA, centrándose en los modelos de lenguaje grandes y los desafíos. La fundación 3GS hace que el desarrollo web 3D sea accesible; React 3 Fiber simplifica la orquestación de escenas y mejora el rendimiento. React 3 XR permite el desarrollo de aplicaciones AR y VR multiplataforma con comprensión espacial y renderizado de medios de alta calidad. Usando React 3 Fiber y componentes XR, el lienzo configura escenas interactivas con mallas para una visualización precisa. Rotación de cubo imperativa para el rendimiento, el impacto de la IA en la web 3D y los desafíos de la IA en el desarrollo de aplicaciones 3D.

Available in English: Building 3D Web Apps in 2025 – React, XR & AI?

Video transcription and chapters available for users with access.

Available in other languages:

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

TresJS, una forma declarativa de crear escenas 3D a partir de componentes Vue

Vue.js London 2023

27 min

TresJS, una forma declarativa de crear escenas 3D a partir de componentes Vue

Alvaro Saburido

Storyblok

The speaker discovered 3D with 3GS and was inspired to create a 3D ecosystem for the Vue community using Troy.js. The process of setting up a 3D scene and objects in Tress was explained, along with creating and configuring 3D objects. The talk also covered animating objects with Tress and the 'Cientos' package, as well as the future of Tress.js and its compatibility with older versions of Three. The speaker expressed gratitude to sponsors and contributors and highlighted the potential for product customization with Tress.js.

vue vue 3 3d

De Blender a la Web - el Viaje de un Modelo 3D

React Advanced 2021

27 min

De Blender a la Web - el Viaje de un Modelo 3D

Top Content

Liad Yosef

Shopify

This Talk explores the use of TypeScript, 3JS, hand recognition, and TensorFlow.js to create 3D experiences on the web. It covers topics such as rendering 3D objects, adding lights and objects, hand tracking, and creating interactive gestures. The speaker demonstrates how to build a cube and a bouncy box, move objects with flick gestures, and create a solar system with stars and planets. The Talk also discusses the possibilities of using hand gestures for web navigation and controlling websites, as well as the performance limits of these technologies.

tensorflow three.js 3d

Escalando aplicaciones React-Three-Fiber más allá del Hola Mundo

React Summit 2023

20 min

Escalando aplicaciones React-Three-Fiber más allá del Hola Mundo

Giulio Zausa

Flux.ai

WebGL has evolved from showcasing technology to being used in everyday applications like Google Maps and Figma. React and 3.js can be used together to build WebGL applications, allowing for reusable components and declarative development. Building complex 3D graphics applications requires efficient data structures, algorithms, and rendering techniques. The Flux CAD editor uses React, 3.js, and React ReFiber to handle complex engineering documents and optimize GPU utilization. Optimizing the render loop and GPU performance is crucial for improving WebGL application performance. Instance rendering can be used to optimize text rendering in WebGL applications, achieving efficient rendering of thousands of 3D characters.

scalability react three fiber react three fiber performance best practices three.js 3d

Trae la Magia del 3D a Tus Aplicaciones Vue Con TresJS

JSNation US 2024

9 min

Trae la Magia del 3D a Tus Aplicaciones Vue Con TresJS

Alvaro Saburido

Storyblok

What if I told you that this scene or game is entirely done with Vue components? I'm presenting Trace.js, a library to bring 3D to Vue applications. In the setup syntax of Vue, we import the TraceCampos component and add it with a prop called window size. By adding a light to the scene, we can create our first 3D renderer. The post processing library for TresCS was launched, allowing developers to easily add effects like glow to their 3D scenes. TresCS allows you to build impressive scenes with minimal code. Let's quickly demo some galaxies using view components.

vue 3d