threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
45 lines (44 loc) • 2.62 kB
JavaScript
import { _testFinish, CameraView, CameraViewPlugin, EasingFunctions, LoadingScreenPlugin, ThreeViewer, Vector3, } from 'threepipe';
import { TweakpaneUiPlugin } from '@threepipe/plugin-tweakpane';
import { createSimpleButtons } from '../examples-utils/simple-bottom-buttons.js';
async function init() {
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
renderScale: 'auto',
plugins: [LoadingScreenPlugin],
});
const cameraViewPlugin = viewer.addPluginSync(CameraViewPlugin);
console.log(cameraViewPlugin);
await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr');
await viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
autoCenter: true,
autoScale: true,
});
// Get the current camera view and save it in a variable
const initialView = cameraViewPlugin.getView();
const topView = new CameraView('topView', new Vector3(0, 6, 0), initialView.target);
const leftView = new CameraView('leftView', new Vector3(-6, 0, 0), initialView.target);
const rightView = new CameraView('rightView', new Vector3(6, 0, 0), initialView.target);
createSimpleButtons({
['Top View']: async () => cameraViewPlugin.animateToView(topView, 1000, EasingFunctions.easeInOutSine),
['Left View']: async () => cameraViewPlugin.animateToView(leftView, 1000, EasingFunctions.easeInOutSine),
['Right View']: async () => cameraViewPlugin.animateToView(rightView, 1000, EasingFunctions.easeInOutSine),
['Pan right/left']: async (btn) => {
btn.disabled = true;
const currentView = cameraViewPlugin.getView();
await cameraViewPlugin.animateToView(new CameraView('view', currentView.position, new Vector3(4, 0, 0).sub(currentView.target)));
btn.disabled = false;
},
['Move up/down']: async (btn) => {
btn.disabled = true;
const currentView = cameraViewPlugin.getView();
await cameraViewPlugin.animateToView(new CameraView('view', new Vector3(currentView.position.x, 5 - currentView.position.y, currentView.position.z), currentView.target));
btn.disabled = false;
},
['Reset']: async () => cameraViewPlugin.animateToView(initialView, 1000, EasingFunctions.easeInOutSine),
});
const ui = viewer.addPluginSync(TweakpaneUiPlugin, true);
ui.appendChild(viewer.scene.mainCamera.uiConfig);
ui.setupPluginUi(CameraViewPlugin, { expanded: true });
}
init().finally(_testFinish);