ThreeJS Scene Builder for Elementor
The Threejs Scene Builder Widget for Elementor allows you to create a WebGL 3D scene for your page and define animations for your 3D objects based on the scroll position. There are a number of features and usage scenarios, what you create with it is up to your imagination.
Below is an example of the widget settings that were defined to create the 3D scene above.
How It's Made
Other than the settings shown below, everything else is set to the widget's defaults.
Note: The Section has a black backgound set
Scene Category
Fog
Effects
Lights Category
Ambient Light
Directional Light
Objects & Animations Category
Mesh 1 ( Sphere Mesh )
General
Shape 1/2
Shape 2/2
Material
Mesh 2 ( Torus - Mesh )
General
Shape 1/2
Shape 1/2
Material
Torus - Animation
General
Animation 1/2
Animation 2/2
Camera - Animation
Note: In this specific example, We only want the 3D shape to be shown in the hero section. So the Trigger Location End is set to 20 based on the overall page length that I have here. If you have a smaller page and want to do the same, you will most likely need to change that value to something else.
Make use of the Design Helpers > Show Current Scroll Indicator tool to help you find the right values for your specific page.
General
Animation 1/2
Animation 2/2
