threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
36 lines (35 loc) • 1.41 kB
JavaScript
import { _testFinish, LoadingScreenPlugin, MeshOptSimplifyModifierPlugin, PickingPlugin, ThreeViewer, } 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'),
msaa: true,
plugins: [PickingPlugin, LoadingScreenPlugin],
dropzone: {
addOptions: {
disposeSceneObjects: true,
},
},
});
const simplify = viewer.addPluginSync(MeshOptSimplifyModifierPlugin);
const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true));
await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
setBackground: true,
});
const result = await viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
autoCenter: true,
autoScale: true,
});
result?.traverse((obj) => {
obj.materials?.map(m => m.wireframe = true);
});
createSimpleButtons({
['Simplify']: async (_) => {
await simplify.simplifyAll(result, { factor: 0.5 });
},
});
ui.setupPluginUi(MeshOptSimplifyModifierPlugin);
ui.setupPluginUi(PickingPlugin);
}
init().finally(_testFinish);