@threepipe/plugin-timeline-ui

A timeline UI component and panel for Threepipe Viewer and Editor to preview and edit global timeline for viewer animations and plugins.

Example — Source Code — API Reference

npm install @threepipe/plugin-timeline-ui

Includes TimelineUiPlugin that creates and manages the react component of the timeline ui.

To use the plugin, simply add it to the viewer or editor:

import { ThreeViewer } from 'threepipe';
import { TimelineUiPlugin } from '@threepipe/plugin-timeline-ui';

const viewer = new ThreeViewer({...});
const root = document.body // set a custom html root to add the timeline panel, document.body is the default if not passed
const timelineUi = viewer.addPluginSync(new TimelineUiPlugin(root));

The UI is shown while the plugin is enabled. To to remove/unmount the UI, you can disable the plugin, enabling it again will re-render the UI:

timelineUi.enabled = false; // this will remove the UI from the DOM
timelineUi.enabled = true; // this will re-render the UI

The React component can also be used in a standalone react application. Import the Timeline(react component), and TimelineManager, from the src directory and use it in your application:

import {Timeline} from '@threepipe/plugin-timeline-ui/src/Timeline';
import {useEffect, useRef} from 'react';
import {TimelineManager} from "@threepipe/plugin-timeline-ui/src/TimelineManager";
import {ThreeViewer} from "./ThreeViewer";

const viewer = new ThreeViewer({...}); // Initialize your ThreeViewer instance, check the react docs for more details

export function MyTimeline() {
    const manager = new TimelineManager(viewer);

    return (
        <Timeline
            manager={manager}
            closeTimeline={()=>{
                console.log('User clicked the close button');
            }}
        />
    );
}