How to Build a 3D Globe from Scratch in Webflow

Creating a 3D globe from scratch in Webflow offers an engaging way to display information or showcase a global perspective. In this tutorial, we will go through the step-by-step process of building a 3D globe using Webflow's intuitive interface without the need for any complex coding.

Setting Up the Globe Container

To start building your 3D globe in Webflow, follow these steps:

1. Add a Div Block: Begin by adding a div block to your page in Webflow. This will act as the container for the 3D globe.

2. Assign a Class: Give the div block a class name, for example, "fs 3d globe container." This will allow you to apply specific styling and functionality to this element.

3. Adjust Dimensions: You can adjust the width and height of the div block to your desired dimensions. In this tutorial, the width and height are set to 100 viewport width and 100 viewport height.

4. Add Attributes: Within the div block, add the necessary attributes. For the 3D globe element, add the attribute "fs 3d globe element" with a value of "container."

Uploading the 3D Globe Image

The next stage involves adding the 3D globe image and configuring the necessary attributes:

1. Upload the Image: Use the asset panel to upload the 3D globe image. Once uploaded, copy the image's URL.

2. Configure Attributes: Add a new attribute called "fs 3d globe img" and paste the copied URL as the attribute's value.

Creating a CMS Collection

Now, let's set up a CMS collection to store the data for the globe pins:

1. Create a CMS Collection: Create a new CMS collection, naming it "globe pins." Within this collection, add fields such as latitude, longitude, pin image, headshot, and email address.

2. Save the Collection: Once the fields are added, save the CMS collection to store the required data for the globe pins.

Configuring the Team Members

After setting up the CMS collection, it’s time to add team members and bind the data:

1. Add Team Members: Populate the CMS collection with the details of each team member, including their latitude, longitude, and optional information as per your requirements.

2. Navigate Back to the Designer: After adding all the team members, return to the Webflow Designer to proceed with the next steps.

Binding the Collection to the Webflow Elements

To connect the CMS collection with the Webflow elements, follow these steps:

1. Select the Body Tag: Ensure that the body tag is selected before adding a new collection inside it.

2. Bind the Collection: Bind the newly created collection to the CMS collection that was set up to store the globe pins’ data.

Adding Pin and Tooltip Elements

Now, we will incorporate the pin and tooltip elements using div blocks:

1. Add Div Blocks: Inside the collection item, add a div block named "fs globe pin" and another div block named "fs globe tooltip."

2. Include Text Blocks: Within the collection item, add two text blocks for longitude and latitude.

Setting Attributes for Pin, Tooltip, and Text Blocks

Configure the attributes for the added elements to enable the interaction with the 3D globe:

1. Tooltip Attributes: Assign the attribute "fs3dglobe element" to the tooltip.

2. Pin Attributes: Give the pin element the attribute "fs 3d globe element."

3. Latitude and Longitude Attributes: Assign "fs 3d globe element" with "lat" and "lon" values to the latitude and longitude text blocks, respectively.

4. Collection List Attribute: For the collection list, add the attribute "fs 3d globe element" with a value of "list."

Styling the Tooltip and Pins

Customize the appearance of the tooltip and pins to enhance the visual presentation:

1. Tooltip Styling: Set the maximum width, padding, border radius, border color, and background color for the tooltip to achieve the desired visual appeal.

2. Hide Latitude and Longitude: The latitude and longitude fields can be hidden by setting their display to "none."

3. Pin Styling: Adjust the dimensions and image properties for the pins, such as width, height, and image size.

Binding CMS Fields to Webflow Elements

Connect the CMS fields to the respective elements within the Webflow Designer:

1. Bind Text and Links: Bind the text and links for the name and email address fields from the CMS collection to the corresponding elements in the Webflow Designer.

2. Bind Images: Configure the image fields to pull the data from the CMS collection for the headshot and pin image.

3. Data Population: Ensure that the latitude and longitude fields are bound to the respective fields from the CMS collection to populate the geographic coordinates.

Adding Script Tags

To enable the functionality of the 3D globe, add the necessary script tags to the head and body of the Webflow project:

1. Paste the Script Code: Copy the provided script code and paste it into the body tag section within Webflow.

2. Paste the CSS Code: Similarly, include the provided CSS code by pasting it into the head tag section in the Webflow Designer.

3. Save the Project: Once the code snippets are added, save the Webflow project to apply the changes.

Finalizing the 3D Globe

To complete the 3D globe setup in Webflow, follow these steps:

1. Hide Collection List Wrapper: Hide the collection list wrapper to prevent it from appearing in the final output.

2. Publish the Site: Once the setup is complete, publish the site to make the 3D globe accessible to viewers.

3. Review the Globe: Verify that the 3D globe is functional and displays the custom pins for each team member as intended.

By following these steps, you have successfully created a 3D globe from scratch in Webflow. This tutorial demonstrates the seamless process of building an interactive and visually engaging 3D globe using Webflow’s powerful features and CMS capabilities.

In conclusion, building a 3D globe in Webflow is an exciting way to incorporate interactive elements and showcase geographical data in a visually captivating manner, all achieved without the need for complex coding.

Now, you can leverage this knowledge to create stunning 3D globes for various projects, presentations, or websites using Webflow's intuitive platform.