Setting Up the Environment

In my last post, we explored making unique and stunning websites using 3D Gaussian splatting. Today, we dive deeper, showing you how to augment your Gaussian splat with JavaScript for mind-blowing 3D web experiences.

Getting Started with Package Downloads

Before we jump into coding, let's set the stage. Our focus in this session will be on using the Luma web library. For this demonstration, I'm using Wix, but feel free to adapt the process to your preferred setup.

Creating a Workspace in Wix

We start by navigating to Wix.com, creating a new site, and opting for a blank canvas. Turning on the developer mode, we then proceed to embed a custom element. After adjusting the custom element to fill the screen area, we specify the source for our code, either through hosting or creating a new Velo file.

Importing Necessary Packages

To harness the full potential of our 3D setup, we install the Luma web package and Three.js from NPM through the Wix interface. These packages form the backbone of our 3D web experience.

Diving into Custom Element Coding

With our packages installed, we dive into coding the custom element. This involves setting up the renderer, camera, and scene with Three.js, crucial components for rendering 3D graphics on the web.

Exploring Wix IDE and VS Code Integration

One neat feature is the ability to integrate the Wix IDE with VS Code. This synchronization allows for a more streamlined coding experience, especially helpful when dealing with complex 3D rendering code.

Connecting to GitHub and Finalizing the Project

The project is then connected to GitHub for version control and collaborative development. This step involves installing the Velo application and setting up a new repository for our project.

During the setup, I switched to a local IDE for better integration with tools like GitHub Copilot, which aids in writing more efficient and error-free code.

Implementing Advanced Visuals with LumaSplatsThree

The heart of our session lies in integrating LumaSplats3 for dynamic, interactive 3D visuals. The renderer is appended to our custom element, and with a few lines of code, our Gaussian splat comes to life, responsive to user interactions.

Wrapping Up: Previewing and Publishing

Finally, we preview our project locally and then publish it to Wix. The result is a live, interactive 3D scene, accessible to anyone visiting the site.

And that's a wrap for this session! We've successfully integrated a Gaussian splat into our website using JavaScript and the Luma web library. In the next videos, I'll take you through adding those extra touches that elevate your 3D web experience. Stay tuned!