threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
27 lines (26 loc) • 1.39 kB
JavaScript
import { _testFinish, CameraViewPlugin, LoadingScreenPlugin, Object3DGeneratorPlugin, Object3DWidgetsPlugin, PickingPlugin, ThreeViewer, } from 'threepipe';
import { TweakpaneUiPlugin } from '@threepipe/plugin-tweakpane';
import { HierarchyUiPlugin } from '@threepipe/plugin-tweakpane-editor';
async function init() {
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
msaa: true,
plugins: [PickingPlugin, CameraViewPlugin, Object3DWidgetsPlugin, HierarchyUiPlugin, LoadingScreenPlugin],
});
const generator = viewer.addPluginSync(Object3DGeneratorPlugin);
viewer.scene.setBackgroundColor('#444466');
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,
});
console.log(generator.generators);
const object = generator.generate('light-directional', { color: 0x00ff00 });
console.log(object);
viewer.getPlugin(PickingPlugin)?.setSelectedObject(object);
const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true));
ui.setupPluginUi(Object3DGeneratorPlugin).expanded = true;
ui.setupPluginUi(HierarchyUiPlugin);
ui.setupPluginUi(PickingPlugin);
}
init().finally(_testFinish);