threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
67 lines (66 loc) • 3.82 kB
JavaScript
import { _testFinish, DropzonePlugin, EditorViewWidgetPlugin, GBufferPlugin, GLTFAnimationPlugin, LoadingScreenPlugin, PickingPlugin, ThreeViewer, TransformControlsPlugin, } from 'threepipe';
import { TweakpaneUiPlugin } from '@threepipe/plugin-tweakpane';
import { ThreeSVGRendererPlugin } from '@threepipe/plugin-svg-renderer';
async function init() {
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
msaa: false,
rgbm: false,
// zPrepass: true,
tonemap: false,
plugins: [GBufferPlugin, PickingPlugin, TransformControlsPlugin, LoadingScreenPlugin], /* TransformControlsPlugin */ // todo: transform controls doesnt work when selected object is in a parent.
dropzone: {
autoAdd: true,
addOptions: {
disposeSceneObjects: true,
},
},
});
viewer.addPluginSync(new EditorViewWidgetPlugin('bottom-left', 128));
viewer.renderEnabled = false;
viewer.addPluginSync(new ThreeSVGRendererPlugin(true));
viewer.addPluginSync(GLTFAnimationPlugin); // .autoplayOnLoad = true
// viewer.scene.addObject(new DirectionalLight2(0xffffff, 1).rotateZ(0.5).rotateX(0.5))
await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr');
const models = [
// working/sort of working
'https://threejs.org/examples/models/gltf/Horse.glb',
'https://demo-assets.pixotronics.com/pixo/gltf/jewlr1.glb',
'https://demo-assets.pixotronics.com/pixo/gltf/engagement_ring.glb',
'https://threejs.org/examples/models/gltf/Flamingo.glb',
'https://threejs.org/examples/models/gltf/ShadowmappableMesh.glb',
'https://threejs.org/examples/models/gltf/BoomBox.glb',
'https://cdn.jsdelivr.net/gh/LokiResearch/three-svg-renderer/resources/pig.gltf',
'https://cdn.jsdelivr.net/gh/LokiResearch/three-svg-renderer/resources/vincent.gltf', // https://studio.blender.org/characters/5718a967c379cf04929a4247/v1/
'https://threejs.org/examples/models/fbx/Samba Dancing.fbx',
'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf',
'https://threejs.org/examples/models/obj/male02/male02.obj',
'https://threejs.org/examples/models/gltf/kira.glb', // slow
// to test
'https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets/Models/WaterBottle/glTF-Draco/WaterBottle.gltf',
'https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets/Models/MaterialsVariantsShoe/glTF/MaterialsVariantsShoe.gltf',
// not working/very slow
'https://threejs.org/examples/models/gltf/Soldier.glb',
'https://threejs.org/examples/models/gltf/LittlestTokyo.glb',
'https://threejs.org/examples/models/gltf/ferrari.glb',
];
await viewer.load(models[0], {
autoCenter: true,
autoScale: true,
});
viewer.scene.backgroundColor = null;
viewer.scene.background = null;
viewer.scene.mainCamera.controls.enableDamping = false;
viewer.renderEnabled = true;
// waiting because we need to render pipeline once to autoscale?
await viewer.doOnce('postFrame');
// optionally disable rendering. but its required if drawImageFills option is enabled
// viewer.renderManager.autoBuildPipeline = false
// viewer.renderManager.pipeline = [] // this will disable main viewer rendering
// make canvas transparent to hide it. We still need pointer events so dont set display to none
// viewer.canvas.style.opacity = '0'
const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true));
ui.setupPlugins(ThreeSVGRendererPlugin);
ui.setupPlugins(GLTFAnimationPlugin, PickingPlugin, DropzonePlugin);
}
init().finally(_testFinish);