threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
99 lines (98 loc) • 5.25 kB
JavaScript
import { _testFinish, CameraViewPlugin, CanvasSnapshotPlugin, ChromaticAberrationPlugin, ClearcoatTintPlugin, ContactShadowGroundPlugin, CustomBumpMapPlugin, DeviceOrientationControlsPlugin, DropzonePlugin, EditorViewWidgetPlugin, FilmicGrainPlugin, FragmentClippingExtensionPlugin, FrameFadePlugin, GBufferPlugin, getUrlQueryParam, GLTFAnimationPlugin, GLTFKHRMaterialVariantsPlugin, GLTFMeshOptDecodePlugin, HalfFloatType, HDRiGroundPlugin, HemisphereLight, InteractionPromptPlugin, KTX2LoadPlugin, KTXLoadPlugin, LoadingScreenPlugin, NoiseBumpMaterialPlugin, Object3DGeneratorPlugin, Object3DWidgetsPlugin, ParallaxMappingPlugin, PickingPlugin, PLYLoadPlugin, PointerLockControlsPlugin, ProgressivePlugin, RenderTargetPreviewPlugin, Rhino3dmLoadPlugin, SSAAPlugin, SSAOPlugin, STLLoadPlugin, ThreeFirstPersonControlsPlugin, ThreeViewer, TransformControlsPlugin, UnsignedByteType, USDZLoadPlugin, ViewerUiConfigPlugin, VignettePlugin, VirtualCamerasPlugin, } from 'threepipe';
import { GaussianSplattingPlugin } from '@threepipe/plugin-gaussian-splatting';
import { MaterialConfiguratorPlugin, SwitchNodePlugin } from '@threepipe/plugin-configurator';
import { BlendLoadPlugin } from '@threepipe/plugin-blend-importer';
import { extraImportPlugins } from '@threepipe/plugins-extra-importers';
import { AWSClientPlugin } from '@threepipe/plugin-network';
async function init() {
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
renderScale: 'auto',
msaa: true,
rgbm: true,
zPrepass: false, // set it to true if you only have opaque objects in the scene to get better performance.
dropzone: {
// allowedExtensions: ['gltf', 'glb', 'hdr', 'bin', 'png', 'jpeg', 'webp', 'jpg', 'exr', 'fbx', 'obj'], // only allow these file types. If undefined, all files are allowed.
addOptions: {
disposeSceneObjects: true, // auto dispose of old scene objects
autoSetEnvironment: true, // when hdr is dropped
autoSetBackground: true, // when any image is dropped
autoCenter: true, // auto center the object
autoScale: true, // auto scale according to radius
autoScaleRadius: 2,
// license: 'Imported from dropzone', // Any license to set on imported objects
importConfig: true, // import config from file
},
},
});
await viewer.addPlugins([
LoadingScreenPlugin,
new ProgressivePlugin(),
new SSAAPlugin(),
GLTFAnimationPlugin,
PickingPlugin,
new TransformControlsPlugin(false),
EditorViewWidgetPlugin,
CameraViewPlugin,
ViewerUiConfigPlugin,
ClearcoatTintPlugin,
FragmentClippingExtensionPlugin,
NoiseBumpMaterialPlugin,
CustomBumpMapPlugin,
new ParallaxMappingPlugin(false),
GLTFKHRMaterialVariantsPlugin,
VirtualCamerasPlugin,
// new SceneUiConfigPlugin(), // this is already in ViewerUiPlugin
new GBufferPlugin(HalfFloatType, true, true, true),
// new DepthBufferPlugin(HalfFloatType, false, false),
// new NormalBufferPlugin(HalfFloatType, false),
new RenderTargetPreviewPlugin(false),
new FrameFadePlugin(),
new HDRiGroundPlugin(false, true),
new VignettePlugin(false),
new ChromaticAberrationPlugin(false),
new FilmicGrainPlugin(false),
new SSAOPlugin(UnsignedByteType, 1),
KTX2LoadPlugin,
KTXLoadPlugin,
PLYLoadPlugin,
Rhino3dmLoadPlugin,
STLLoadPlugin,
USDZLoadPlugin,
BlendLoadPlugin,
Object3DWidgetsPlugin,
Object3DGeneratorPlugin,
GaussianSplattingPlugin,
ContactShadowGroundPlugin,
CanvasSnapshotPlugin,
DeviceOrientationControlsPlugin,
PointerLockControlsPlugin,
ThreeFirstPersonControlsPlugin,
InteractionPromptPlugin,
// new MeshOptSimplifyModifierPlugin(false, document.head), // will auto-initialize on first use.
new GLTFMeshOptDecodePlugin(true, document.head),
// new BasicSVGRendererPlugin(false, true),
...extraImportPlugins,
MaterialConfiguratorPlugin,
SwitchNodePlugin,
AWSClientPlugin,
]);
const hemiLight = viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 5), { addToRoot: true });
hemiLight.name = 'Hemisphere Light';
await viewer.setEnvironmentMap(getUrlQueryParam('env') ?? 'https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr');
const model = getUrlQueryParam('m') || getUrlQueryParam('model');
if (model) {
await viewer.load(model);
const promptDiv = document.getElementById('prompt-div');
promptDiv.style.display = 'none';
}
const dropzone = viewer.getPlugin(DropzonePlugin);
dropzone.addEventListener('drop', (e) => {
if (!e.assets?.length)
return; // no assets imported
console.log('Dropped Event:', e);
const promptDiv = document.getElementById('prompt-div');
promptDiv.style.display = 'none';
});
}
init().finally(_testFinish);