Skip to main content

ControlBar

ControlBar adds a bar at the bottom of the canvas that can control animation and other things.

import View3D, { ControlBar } from "@egjs/view3d";
import "@egjs/view3d/css/view3d-control-bar.min.css"; // If you're not using the bundled CSS (view3d-bundle.css)

const view3D = new View3D(...);

view3D.loadPlugins(new ControlBar({
autoHide: {
delay: 0
},
playButton: false
}));

Options

OptionTypeDefaultDescription
autoHideboolean | AutoHideOptionstrueShow control bar only on mouse over
classNameobjectControlBar.DEFAULT_CLASSOverride default class names
progressBarboolean | AnimationProgressBarOptionstrueShow animation progress bar
playButtonboolean | PlayButtonOptionstrueShow animation play / pause button
animationSelectorboolean | AnimationSelectorOptionstrueShow animation selector
fullscreenboolean | FullscreenButtonOptionstrueShow fullscreen button
navigationGizmoboolean | NavigationGizmoOptionstrueShow navigation gizmo

Customizing

autoHide: false,
progressBar: { position: "left" },
playButton: { order: 0 },
animationSelector: false,
navigationGizmo: false,
cameraResetButton: false