Vue.js Live Conference

Vue.js London 2023

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.

Meet TresJS ▲ ■ ●, a declarative way of bringing the magic of ThreeJS using everyday Vue Components and composables. Think of it as React-three-fiber or Lunchbox but without the need of a custom renderer. It just works.Are you ready to add a new dimension to your Vue Apps?

TresJS, a declarative way of creating 3D scenes from Vue components

Alvaro Saburido

React Summit

React Summit 2023

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.

A lot of recent talks at other conferences have talked about how to start using React and THREE.js to create 3D experiences on the web. In my career I've built several complex applications using those technologies, including a big Figma-like 3D editor, and I've learnt a lot of patterns and tricks on how to make it actually fast and scalable. Unfortunately, though, nobody is also talking about those tricks an what it really takes to build an rendering engine similar to the one that Figma uses. My goal with this talk is to give people an overview of the challenges that may arise when you try scaling your application, and what are some lesser known tricks to overcome them: instancing, memory usage reduction techniques, SDF-based text rendering, GPGPU and tree data structures. Everything of course done with Javascript, React and THREE.js.

Scaling React-Three-Fiber Applications beyond the Hello World

Giulio Zausa‮ 

React Summit 2022

Today's Talk is about Blender and 3D in the web, covering topics such as rendering engines, material properties, exporting models, using React Fiber, lighting and shadows, state management, and adding wobbling effects. The speaker demonstrates how to create a 3D cupcake model and customize its appearance and behavior using React and Blender. The Talk also touches on topics like frosting selection, color changes, and adding orbit controls for interactive movement.

Creating 3D experiences in the web can be something that sounds very daunting. I’m here to remove this idea from your mind and show you that the 3D world is for everyone. For that we will get a model from the 3D software Blender into the web packed with animations, accessibility controls and optimised for web use so join me in this journey as we make the web more awesome. <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

From Blender to the Web - the Journey of a 3D Model

Sara Vieira

JS Nation

JSNation 2022

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.

We live in exciting times. Frameworks like TensorFlowJS allow us to harness the power of AI models in the browser, while others like Three.js allow us to easily create 3D worlds. In this talk we will see how we can combine both, to build a full solar system, in our browser, using nothing but hand gestures! <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

Build a 3D Solar System with Hand Recognition and Three.js

Liad Yosef

JS GameDev Summit

JS GameDev Summit 2022

This workshop focuses on mixed reality development using Babylon JS and WebXR. Participants will learn how to create a Babylon JS application with WebXR, build the Babylon.js environment, and add physics to the scene. They will also explore troubleshooting and creating a new repository, as well as creating character icons, buttons, and pop-up images. The workshop emphasizes the importance of documentation and provides opportunities for exploration. The code can be run on various platforms with WebXR support.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Introduction to WebXR with Babylon.js

Gustavo Cordido

The Workshop on Generative Art and JavaScript covers various topics, including drawing shapes, using the debugger and CSS styling, and exploring variables and colors. It also delves into creating fire effects, drawing lines and shapes, and working with oscillation and particles. The workshop emphasizes the importance of saving work, experimenting, and building up from the basics. It highlights the uses of generative art in different industries and draws inspiration from textiles and the real world. Overall, it provides a comprehensive overview of generative art techniques and their applications.

Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#3d