Creating a 3D Interaction in Webflow

In this tutorial, we will be creating a 3D interaction in Webflow where we can click to change the shape's color and push them around with our cursor. This tutorial is based on a website and was requested by one of the patrons.

Getting Started with Webflow

First, let's start by navigating to the Library Tab in Webflow and opening a 3D concrete shape. To manipulate the shape, we will hit command minus twice to zoom out and then select all layers except the directional light and group. Next, we'll delete those layers and move the shape outside the group. You can rename the shape to 'shape' and edit the material by removing all parts except for lighting and color. Set the color to be white and rename the material to 'white'.

Reset the rotation on the shape to be zero and zero and then scale it down. You can make the size closer to 100.

Creating a Cube and a Sphere

Now, let's create a cube by clicking off to the side and setting the dimensions to 1000 by 1000. Reset the position to be 0 and 0 so it's in the center. We'll also create a sphere with a height of 4000 and an x value of zero.

To create a bowl-like shape, move the sphere up and then subtract it from the cube by holding shift and selecting both and then choosing subtract.

Setting Up the Environment

After creating the bowl, go to the shadows section and turn off 'cast shadows' and 'receive shadows' to remove any shadows from the bowl. Next, go to the simulation and turn on physics. Select the shape and scroll down to the physics section. Set the body type to dynamic, add some weight, and incorporate damping and bouncing to make the shape interact within the bowl.

Duplicating Shapes

Once the setup for the bowl and the shape is completed, duplicate the shape multiple times and position them around the bowl. Select some of the shapes and change their colors by unlinking the material and assigning new color codes. Create new materials for each color so that you can easily manage color changes for the shapes.

Performance Optimization

After adding multiple shapes, it's important to optimize performance by decreasing the complexity of the shapes. Select all the shapes and change the subdivision to ensure they are perfectly blocky but still maintaining a smooth appearance. By doing so, you can run a performance test to check the total polygons and ensure smooth performance.

Creating Cursor Interaction

Now, we'll create a cube that represents the cursor interaction. Set the dimensions of the cube to create a pole that follows the cursor. Create an event to make the cube follow the cursor aligned with the camera but not move up and down. Also, ensure that the cube doesn't cast shadows on the shapes and hide its lighting and color.

Next, set the background color to dark, as this will create a visually appealing contrast for the shapes.

Introducing Color Changes

To enable color changes upon clicking, we will use variables. Create number variables like 'color one opacity' and 'color two opacity' and set them to 100 by default. Link the opacity of the shape's material to these variables.

Now, we will set up an event to change the shape's color when clicked. Add a condition to check the opacity of both colors and change the opacity accordingly upon each click. By setting up these conditions, we ensure that the colors cycle in an endless loop.

Finalizing the Interaction

Finally, enable the auto-zoom feature to allow the entire scene to resize with the browser window. Set the default zoom to maintain the desired appearance.

Upon previewing the interaction, you will notice that the scene resizes with the browser width and height while maintaining the visual effects.

By following these steps, you have successfully created a 3D interaction in Webflow where users can click to change the shapes' color and push them around with their cursor. This interaction not only showcases the capabilities of Webflow but also allows for engaging user experiences.