Skip to main content

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 then Camera 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 clicking Add Current View from the Camera View drop-down menu.
  • Save it as a camera view by clicking Add Current View from the Camera View drop down-menu.
  • Repeat steps 4-5 for as many views as you need.
info

Access the camera views created to change their properties and name.

  • Go to Scrollable Camera View Preview tab > check Enabled to preview your camera views on scroll.
tip

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>
tip

Instead of using ids or class names, you can use the HTML tag <section>

note

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 :