threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
43 lines (42 loc) • 1.85 kB
JavaScript
import { _testFinish, BaseGroundPlugin, Color, GBufferPlugin, LoadingScreenPlugin, PickingPlugin, RenderTargetPreviewPlugin, SSAAPlugin, ThreeViewer, } from 'threepipe';
import { TweakpaneUiPlugin } from '@threepipe/plugin-tweakpane';
// @ts-expect-error todo fix import
import { BloomPlugin, SSReflectionPlugin, TemporalAAPlugin } from '@threepipe/webgi-plugins';
async function init() {
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
msaa: true,
dropzone: {
addOptions: {
disposeSceneObjects: true,
},
},
plugins: [LoadingScreenPlugin, GBufferPlugin, BloomPlugin, SSAAPlugin, TemporalAAPlugin],
// rgbm: false,
});
viewer.renderManager.stableNoise = true;
const inline = true;
const ssrefl = viewer.addPluginSync(new SSReflectionPlugin(inline));
const ground = viewer.addPluginSync(BaseGroundPlugin);
viewer.addPluginSync(PickingPlugin);
const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true));
ui.setupPluginUi(ssrefl, { expanded: true });
ui.setupPluginUi(BaseGroundPlugin);
ui.setupPluginUi(PickingPlugin);
ui.setupPluginUi(BloomPlugin);
const targetPreview = await viewer.addPlugin(RenderTargetPreviewPlugin);
if (!ssrefl.inlineShaderRayTrace) {
targetPreview.addTarget(() => ssrefl.target, 'ssrefl');
}
await viewer.load('https://asset-samples.threepipe.org/demos/classic-watch.glb', {
autoCenter: true,
autoScale: false,
});
viewer.scene.backgroundColor = new Color(0x1B1B1F);
ground.tonemapGround = false;
ground.material.color.set(0x1B1B1F);
ground.material.roughness = 0.2;
ground.material.userData.separateEnvMapIntensity = true;
ground.material.envMapIntensity = 0;
}
init().then(_testFinish);