3D Model Widget

Use Three.js in your Elementor editor to enhance your designs by displaying 3D models and 3D animations. Never-before-seen in Elementor.

watch the 3D Model Widget tutorial

Play Video

Revamp, augment and elevate your designs with 3d models and 3d animations by using three.js directly within your Elementor editor, and even connect it to GSAP scroll animations.

Three.js is a cross-browser JavaScript library API used to display animated 3D computer graphics in a web browser using WebGL. It’s an extremely powerful tool, but completely inaccessible to non-developers and non-3d artists. That changes thanks to Gloo’s 3D Model Widget. Now, the only knowledge required is the ability to use the Elementor editor.

The 3D Model Widget will allow us to upload GLB and GLTF files, even files containing animations, and change values like Camera settings, 3D Object settings, Lighting settings, Animation settings, User interaction, and even Sequence Scene settings in order to integrate the 3D Model Widget with Gloo’s GSAP feature, which will let us change the values in the settings according to the scrolling position of the page. Simply drop the Widget inside a Container and we can get started.

Widget General Settings.

The General Settings will let us assign an ID to the 3D model(s) we’re going to be working with. By toggling on “Allow Preview Rendering” we’ll be able to see the changes in settings reflected on the model directly within the Elementor editor. We’d want to turn this off when working on other sections as sometimes the 3d rendering might make the editor slower than we want.

Base Files Settings.

Here we’ll be able to upload different files for High, Medium and Low quality variations of the same 3D Object, and select the preferred Display Quality according to needs. At least one of them is mandatory, as that’s the main field where the Widget will get the 3D Object from. We can upload a separate Environment file for background and reflections, and apply that file with the special toggle.

Canvas General Settings.

When using the 3D Model Widget inside a complex Elementor page design, we might have issues with overlap or the 3D Object taking more or less space than required. To avoid this we can set a custom canvas size for the Widget, as the Container Layout settings will not work on the Widget as well.

The Start and End fields need two values each to work properly. For example: Start at top top and End at bottom bottom. With either or both value being able to be replaced by any number expressed in percentage, for example 50%, or any other position, for example center.

Base Camera Settings.

Here we’ll find the settings for the 3D Camera which will define the default view of the 3D Object.

  • Field Of View

This slider sets the Field Of View for the model, which is the Object’s viewable angle from the camera.

  • Camera Position X

This slider changes the X-axis (horizontal) position of the 3D camera.

  • Camera Position Y

This slider changes the Y-axis (vertical) position of the 3D camera.

  • Camera Position Z

This slider changes the Z-axis (depth) position of the 3D camera.

Base 3D Object Settings.

Here we’ll find basic settings for the 3D Object such as Scale, Position, Zoom, Rotation and Opacity.

  • 3D Object Scale: X,Y,Z

Three sliders to change the overall scale of the Object. The sliders aren’t linked so to keep the proportions, the same value needs to be in all three sliders.

  • 3D Object Position: X,Y

A slider for each positional axis.

  • 3D Object Zoom (Z Position)

A further control for the Z position that will act as zoom.

  • 3D Object Rotate: X,Y,Z

A slider for each rotational axis.

  • 3D Object Opacity

Sets the overall object opacity. Being a setting for 3D objects, half-values like for example 50 will show the back of the object through the front.

Base Lighting Settings.

This menu will let us set the Lighting values for our 3D Object. These range from Ambient Light to Directional Lighting.

  • Ambient Light Intensity

Ambient Light is light that is present all around the Object and as such produces no shadows or highlights. Its main use in this application is to set the overall brightness and visibility for the 3D Object before we set up the Directional Lighting.

By enabling Directional Lighting, we’ll have further options available which will let us setup the perfect lighting for our object in a more realistic manner.

  • Directional Light Intensity

Lets us set the overall intensity of the directional light.

  • Directional Light Color

The color of the light source.

  • Directional Light Position: X,Y,Z

A slider for each positional axis for the light source of the directional light.

Base Animation Settings.

Some GLB and GLTF files come with animations packaged within the single 3D file. The Base Animation Settings will let us enable that animation, and set its speed. If we plan to connect the animation to GSAP so that the animation only plays as the page is scrolling, we will have to toggle this off and toggle it back on in the individual Scene settings, which we’ll see later.

Base Interaction Modes.

This will let us set ways the User can interact with the 3D model view. After toggling Enable Interaction Model on there will be three options which represent the ways users can interact with the object in the 3D view: Drag to Rotate, Scroll to Zoom and Pan.

It’s important to note that if we’re using the 3D Model Widget along with the GSAP feature, you may want to toggle off Enable Interaction Model, so that only the GSAP scrolltrigger animation will control the interactions. Though, if you want your users to be able to move the object as it animates, this isn’t necessary.

GSAP Integration:
Sequence Scene Settings.

In order to control 3D interactions using GSAP scrolltrigger animations, we’ll need to setup a new scene. The option to do this is found in the last settings submenu in the 3D Model Widget Content tab: Sequence Scene Settings.

We can add as many items in the Animation Sequence as we’d like using the repeater.

This will allow us to set up as many animation steps in the GSAP animation as there are scenes.

It’s important to give our new Scenes an ID in the Scene ID field. Moving forward, we’ll refer to a single example scene called Scene 1.

We will then see that within Scene 1 we have access to all the same settings we’ve seen before except for the Interaction ModesDisplay In Preview Mode will let us preview the changes we make to these settings in the Elementor editor. By toggling this on and off we can directly see the changes we’ve made to the model in the Scene settings compared to the base settings we’ve set beforehand. We can change all or some of the values. The unchanged values will fall back to the base values in case they’re not modified.

In animation terms, we can say that the base values and the Scene 1 values represent keyframes, with the base values as a starting point to our animation, and each starting value will then, according to the GSAP parameters, eventually reach the values in the Scene 1 settings.

GSAP Integration:
Setting the GSAP scrolltrigger animation.

A more in-depth overview for each GSAP setting and value can be found in the GSAP Scrolltrigger Module Page.

Make sure both Interactor and GSAP are toggled on in the Gloo settings dashboard. In the Elementor editor, we can toggle on GSAP by going to the Page Settings and finding the toggle inside the Interactor menu.

We then need to enable both Timeline and Timeline Scrolling. We don’t need to change any of the Timeline parameters to animate the 3D model as everything we need is already contained either in the base values or in Scene 1, and we’ll be working using the GSAP Events.

GSAP Integration:
GSAP Events (Tweens).

Let’s create the GSAP Event (tween) and give it a title, and set the Function to TO. This means that the values will move from the base values TO the Scene 1 values. Next step is toggling on Event Scrolling and setting up a trigger element, which is the CSS ID of the Container that contains the 3D Model Widget. Again, we can ignore all other settings here except for Attach Scene, which will need to be toggled on. This will simplify the GSAP Event menu.

We then need to specify the Model ID, which we’ve set before, and the Scene ID, which in this case is Scene 1. It’s suggested to toggle on Show Markers as well so that we can see what we’re doing. In the Canvas Settings, in order to make sure everything works right out of the box, we can set the default values of top top for Start, bottom bottom for End, and 1 for Scrub. In case we’re working with multiple GSAP Events (tweens), because we’ve set up more than one Scene in the 3D Model Widget, we need to keep in mind that we’re going to need to stack the animations using the start and end values in their respective canvas options. For example if we have four Scenes and four Events (tweens): Scene 1 will start at top top, but end at 25% bottom, Scene 2 will start at 25% top, and end at 50% bottom, Scene 3 will start at 50% top and end at 75% bottom, and Scene 4 will start at 75% top and end at bottom bottom. The percentages need to stack to 100% of the View Height of the Container in order to use all the available scrolling space.

The reason the Start and End fields need two values each to work properly is as follows:

  • First Value: 

The first value is the reference point on the ScrollTrigger’s Trigger element (like top, bottom, center, 25%, 50%)

  • Second Value:

The second value is the reference point on the viewport (like top, bottom, center, 25%, 50%).

For example, top center in the Start field means the animation will start when the top of the Trigger element hits the center of the viewport, and bottom center in the End field would mean the animation ends when the bottom of the trigger element reaches the center of the viewport.

The Scrub value of 1 will connect the animation with the page scrolling. With the field empty or a value of 0, the animation will simply run once the container is in view. With Scrubbing turned on using a value of 1, we don’t have to set up further scroll settings.

It’s important to keep in mind that the View Height of the Container with the 3D Model Widget will essentially control the speed of the scrolling animation. The higher the View Height, the lower the scrolling speed. By setting up further Scenes and GSAP Events, we can then chain multiple animations and have the 3d object follow the user as they scroll through the page.

Resources:

You can find free to use GLB or GLTF 3D files to use with the 3D Model Widget here. Each main folder is a different 3D object, inside, find the GLTF binary, GLB binary or just Binary folder for each, where you’ll find files fully compatible with the Widget.

Important: Gloo for Elementor is designed with performance in mind. It will not impact your site’s speed unless features are enabled and used incorrectly or to create complex logic. Use features like Interactor and Fluid Logic wisely and ensure thorough testing.

Scope : Widget
Dependencies: Elementor

Frequently Asked Questions

The 3D Model Widget is a powerful tool that allows users to incorporate and manipulate 3D models within their web designs using Three.js, a JavaScript library for rendering animated 3D graphics. This widget simplifies the process, making it accessible even to those without extensive development or 3D art skills. Users can upload GLB or GLTF files, adjust camera and object settings, and integrate animations. The widget also supports GSAP scroll animations for dynamic interaction based on page scrolling.
The 3D Model Widget offers several interaction modes for users to engage with 3D models. These include: Drag to Rotate: Allows users to rotate the model by dragging. Scroll to Zoom: Enables zooming in and out of the model using the scroll wheel. However, when using the widget with GSAP for scroll-triggered animations, you may want to disable the interaction mode to allow only GSAP to control the interactions, though if you want your users to be able to move the object as it animates, this isn’t necessary.
To effectively set up GSAP scrolltrigger animations with the 3D Model Widget in Elementor, follow these steps: Set Base Values in the 3D Widget: Begin by configuring the base settings for your 3D model in the widget. This includes setting up the camera position, lighting, object scale, position, and other relevant parameters. These settings will serve as the starting point for your animation. Create Scenes in the 3D Widget: Next, create one or more scenes within the 3D Model Widget. Each scene represents a different state of the model, with its own unique settings like camera angle, lighting, and object position. These scenes will act as keyframes in your animation. Configure GSAP: Go to the Page Settings in Elementor and enable GSAP within the Interactor menu. Set Up Timeline and Scrolling in GSAP: Enable the Timeline and Timeline Scrolling options in the GSAP settings. This step is crucial for creating the animation sequence. Create a GSAP Event: Create a new GSAP Event, give it a title, and set the function to ‘TO’. This means the animation will transition from the base values to the values set in your created scene(s). Configure Event Scrolling: Toggle on Event Scrolling and select the appropriate trigger element, typically the CSS ID of the container holding the 3D Model Widget. Attach Scene to GSAP Event: In the GSAP Event settings, toggle on ‘Attach Scene’ and specify the Model ID and the Scene ID (e.g., Scene 1) that you created in the 3D Widget. Preview and Fine-Tune: Finally, preview the page to see the animation in action. Adjust settings like Z-Index, Canvas size, and Container dimensions as needed to ensure the animation works seamlessly with your page design.

THIS FEATURE IS PART OF :

SWIPE TO ROTATE

SCROLL TO ZOOM

CONNECT TO GSAP

More Modules

Jet Relation Field Tag New
Composer Kit Module New
Repeater Dynamic Tag
Salesforce CRM Form Action
GSAP Slider Tween New
GSAP Custom Tween New
JetEngine Dynamic Visibility: BuddyPress Addon New
Autocomplete Address Fields
Form Actions Pro
Terms Field
Dynamic Form Actions New
Grain Control
Custom DB Value Dynamic Tag New
Swatches Widget New
Draggable+
Zoho CRM Form Action
GSAP Video Scrolling
Country Dial Code Field New
Calculation Field New
Form Field Validation

1. Click on Navigator…

Click on Navigator…

2. Click on Advanced

Click on Advanced

3. Type “canvas”

Type "canvas"

4. Click on Navigator and choose the 3d model

Click on Navigator and choose the 3d model

5. Click on Advanced

Click on Advanced

6. Click on the gloo icon on the top bar to access interactor

Please make sure all 3 features are enabled in the gloo admin settings page

  • Interactor engine
  • Gsap scrollTrigger
  • 3D model widget

Click on the gloo icon on the top bar to access interactor

7. Scroll down and : Check Enable GSAP

Scroll down and : Check Enable GSAP

8. Check Enable Timeline

Check Enable Timeline

9. Check Timeline Scrolling

Check Timeline Scrolling

10. Click on Add Item

Click on Add Item

11. Type “3d scene 1”

Type "3d scene 1"

12. Select To from Function

Select To from Function

13. Type “#canvas”

Type "#canvas"

14. Check Attach Scene

Check Attach Scene

15. Type “model”

Same as model id specified in the 3d widget

In Order for this effect to work you also need to change the widget position to Sticky (top) and turn on the “stay In column” Option

Type "model"

16. Type “scene1”

Type "scene1"

17. Choose The 3d Model Widget

Choose The 3d Model Widget

18. Click on Content

Click on Content

19. Type “model” to match the id we specified in gsap

Type "model" to match the id we specified in gsap

20. Click on sequence scene settings

Click on sequence scene settings

21. Click on Add Item

Click on Add Item

22. Check Display In Preview Mode to see your changes in the editor

Check Display In Preview Mode to see your changes in the editor

23. Type “scene1” to match what we specified in the gsap menu

Type "scene1" to match what we specified in the gsap menu

24. Change The settings To your Likings

Change The settings To your Likings