Scrollable pages with GSAP and WebGI - Custom Threejs Render

The project that we will create together will be this landing page, which shows a drill as a product launch, showing the differentiators in an interactive way, telling a story as the user progresses with the Scroll.

Using the same knowledge of this course, you will be able to develop many other pages, like those demonstrated in the video. They were created using the same concepts applied in this course, modifying the model and design. Some of these experiences won an honorable mention award on the awwwards website.

Links to these pages can be found in the description link. Take the opportunity to get inspired and have your own ideas because the possibilities are endless.

[IMPORTANT UPDATE]

WebGI changed recently and now you can access the editor by clicking on the "EDITOR" button on the top menu bar. The click on the "latest version" button isn't working anymore.

In this class we will create the page design, using a base design file that contains the idea of what we are going to create. We will use the WEBGi Editor to load a chosen free 3D model and go through all the main options on how to use the editor to configure the 3D model for the experience we are going to create.

The editor allows saving, inside the file that will be exported, all the configurations that we make inside it. So you don't have to worry about hundreds of lines of code to achieve the same result. We'll load this template into the API's provided boilerplate and everything will work as expected.

Now that you have the 3D model configured the way you want to use it on your page, in this class, we are going to install the WEBGi boilerplate and configure the dependencies. Here, it is important that you have NODE.JS installed on your computer. If you haven't already, you can access the page linked to this class and install the version corresponding to your operating system.

Let's take the opportunity to modify the basic settings of the supplied Boilerplate so that it works on full screen.

Let's use the html page and css that we already have in the default file to modify it to the layout we need. Let's see how to create the main block of the page and how to merge the elements using basic css that fills the entire available height of the screen for each section.

We will continue to configure the other blocks of the page with basic CSS and HTML, creating an HTML element that will be the background of the second section and that will pass behind the 3D model when scrolling.