Camera Views and Scroll
ScrollableCameraViewPlugin
is an extension of CameraViewPlugin
that can be used to create interactive scrollable landing pages with WebGi. It allows you to manage and interpolate between camera views on scroll, creating a smooth transition effect between different sections of your page. Camera views can be created in the editor and downloaded as a preset and applied at runtime.
To create Camera Views and manage them with ScrollableCameraViewPlugin
, follow these steps:
- Open the
Editor
- Import your 3D model to the editor by dragging and dropping it.
- Go to
Animations
tab and thenCamera Views
. - Adjust your camera angle to get the best shot for your model.
- Once you got the best shot for your model you can save that as a
camera view
by clickingAdd Current View
from the Camera View drop-down menu. - Save it as a
camera view
by clickingAdd Current View
from the Camera View drop down-menu. - Repeat steps 4-5 for as many views as you need.
Access the camera views created to change their properties and name.
- Go to
Scrollable Camera View Preview
tab > checkEnabled
to preview your camera views on scroll.
To see the HTML code used to preview you can click Show/Edit Code
button. you can change the code or paste your own HTML code there. make sure to add id attribute to your sections and press update
to see your changes reflect on the page.
- Export your model by going to
Export
>Asset Export
>GLB Export
- check the Draco Compression toggle to decrease the model size and click
Export GLB
- Add the model to your project
- import it to the viewer with
AssetManagerPlugin
:
import {
ViewerApp,
AssetManagerPlugin,
} from "webgi";
... // your code
const viewer = ...
... // viewer setup and other plugins.
const manager = await viewer.addPlugin(AssetManagerPlugin);
const assets = await manager.addFromPath("./assets/cube.glb");
- Import and add
ScrollableCameraViewPlugin
from webgi :
import {
ScrollableCameraViewPlugin,
} from "webgi";
...
...
await viewer.addPlugin(ScrollableCameraViewPlugin);
- Write your Html and add
id
attributes to sections corresponding to the camera view names.
How to write Html sections
ScrollableCameraViewPlugin
will find the HTML elements with the same id or class name as the camera view name. When adding a camera view a default name such as #view[view number]
will be used. since it starts with #
the plugin will search for HTML elements with the id #view[view number]
. you can change it to start with .
like .first section
and the plugin will look for an HTML element with the class .first section
.
<div id="view1">your html code</div>
<div id="view2">your html code</div>
Instead of using ids or class names, you can use the HTML tag <section>
The plugin interpolates camera views between sections in order, the view starts when the top of the HTML section is at the top of the window and ends after scrolling when the next section is at the top of the window, that's when the next view starts.
Using a different scroll parent
By default, the plugin takes the body
element as the parent element and the animation is played when scrolling the body, you can change that to use any html element as the parent and scroll inside that element, this is done when adding the plugin:
let scrollSection = documenet.getElementById("scrollSection");
await viewer.addPlugin(new ScrollableCameraViewPlugin(scrollSection));
Stopping and Resuming
When the plugin is added it's enabled by default. this means that camera interactions are disabled and only scrolling can move the camera, you can disable the plugin at any time to allow camera interactions with the mouse :
const scroller = viewer.getPlugin(ScrollableCameraViewPlugin);
scroller.enabled = false;
You can resume the scroll at any time and the plugin will smoothly interpolate to the camera view once it's enabled
scroller.enabled = true;
This is an example on how to use the plugin and how to stop and resume scrolling :