How to create an interactive 3D model viewer on a WeWeb website?

Step 1: Sign up or Login to WeWeb

The first thing you will need to do is create an account on WeWeb. So, go to their official website and sign up if you haven't already. If you have an account, simply go ahead with logging in. This process is straightforward and quite self-explanatory.

Step 2: Create a New Website on WeWeb

After your account has been set up, you can proceed to create a new website. On the dashboard, click on "Create a New Website." You will then choose the template that suits your preference. After picking a template, a new page configuration will appear.

Step 3: Access the Editor

In the new page configuration, locate the "Edit Page" option and click on it. This will lead you to WeWeb's visual editor where you can manipulate text, images, and add new elements to your page.

Step 4: Navigate to the 3D Model Component

In the visual editor, navigate to the "Components" section located on the left side of your screen. Scroll down until you find the "3D Model Viewer" component.

Step 5: Add the 3D Model Viewer to Your Website

Now that you've located the "3D Model Viewer" component, all you have to do next is click and drag the component to your preferred location on the page.

Step 6: Importing Your 3D Model

After adding the 3D Model Viewer component to the page, you will need to import your 3D model. Click on the 3D Model Viewer component on your page, and on the settings panel that appears on the right, choose "Upload 3D Model". This will allow you to select and upload a 3D model from your device.

Please note that your 3D model must be in .glb or .gltf format for it to be compatible with WeWeb's 3D Model Viewer.

Step 7: Adjust the Model Settings

With your 3D model uploaded, you can manipulate its settings to suit your preferences. These settings include the model rotation, background color, shadow softness, and more. The settings are available in the "3D viewer settings" on the right sidebar.

Step 8: Save Your Changes

It's important that after every adjustment, you save your changes. At the top right corner of the editor, you'll find the "Save" button. Click on it to save your progress.

Step 9: Publish Your Website

Now that you're satisfied with how your 3D model looks on your website, the next step is to publish your site. Locate the "Publish" button at the top right corner of your dashboard, and click on it. Your website with the interactive 3D model viewer will go live.

You have successfully created an interactive 3D model viewer on your WeWeb site. Your visitors can click and drag to view different parts of the model, giving them a more immersive experience.