threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
35 lines (34 loc) • 1.75 kB
JavaScript
import { _testFinish, AssetExporterPlugin, getUrlQueryParam, LoadingScreenPlugin, SceneUiConfigPlugin, ThreeViewer, } from 'threepipe';
import { TweakpaneUiPlugin } from '@threepipe/plugin-tweakpane';
import { TransfrSharePlugin } from '@threepipe/plugin-network';
async function init() {
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
msaa: true,
plugins: [SceneUiConfigPlugin, LoadingScreenPlugin],
});
viewer.getPlugin(LoadingScreenPlugin).minimizeOnSceneObjectLoad = false;
const sharePlugin = viewer.addPluginSync(new TransfrSharePlugin());
const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true));
await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
setBackground: true,
});
const modelUrlParam = 'm'; // this is the default in TransfrSharePlugin
sharePlugin.queryParam = modelUrlParam;
sharePlugin.baseUrls.viewer = 'https://threepipe.org/examples/model-viewer/index.html';
sharePlugin.baseUrls.editor = 'https://threepipe.org/examples/tweakpane-editor/index.html';
const modelUrl = getUrlQueryParam(modelUrlParam) ??
'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf';
const result = await viewer.load(modelUrl, {
autoCenter: true,
autoScale: true,
});
ui.setupPluginUi(AssetExporterPlugin, { expanded: true });
ui.setupPluginUi(TransfrSharePlugin, { expanded: true });
ui.setupPluginUi(SceneUiConfigPlugin);
const model = result?.getObjectByName('node_damagedHelmet_-6514');
const config = model?.uiConfig;
if (config)
ui.appendChild(config);
}
init().finally(_testFinish);