threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
59 lines (58 loc) • 2.58 kB
JavaScript
import { _testFinish, CanvasSnapshotPlugin, isWebpExportSupported, LoadingScreenPlugin, ThreeViewer } from 'threepipe';
import { createSimpleButtons } from '../examples-utils/simple-bottom-buttons.js';
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
msaa: true,
renderScale: 'auto',
plugins: [LoadingScreenPlugin],
});
async function init() {
const snapshotPlugin = viewer.addPluginSync(new CanvasSnapshotPlugin());
await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr');
await viewer.load('https://threejs.org/examples/models/gltf/kira.glb', {
autoCenter: true,
autoScale: true,
});
createSimpleButtons({
['Download snapshot (rect png)']: async (btn) => {
btn.disabled = true;
await snapshotPlugin.downloadSnapshot('snapshot.png', {
scale: 1, // scale the final image
displayPixelRatio: 2, // render scale
mimeType: 'image/png', // mime type of the image
rect: {
height: viewer.canvas.clientHeight / 2,
width: viewer.canvas.clientWidth / 2,
x: viewer.canvas.clientWidth / 4,
y: viewer.canvas.clientHeight / 4,
},
});
btn.disabled = false;
},
['Download snapshot (jpeg)']: async (btn) => {
btn.disabled = true;
await snapshotPlugin.downloadSnapshot('snapshot.jpeg', {
mimeType: 'image/jpeg', // mime type of the image
quality: 0.9, // quality of the image (0-1) only for jpeg and webp
displayPixelRatio: 2, // render scale
});
btn.disabled = false;
},
['Download snapshot (webp)']: async (btn) => {
btn.disabled = true;
if (!isWebpExportSupported()) {
alert('WebP export is not supported in this browser, try the latest version of chrome, firefox or edge.');
btn.disabled = false;
return;
}
await snapshotPlugin.downloadSnapshot('snapshot.webp', {
mimeType: 'image/webp', // mime type of the image
scale: 1, // scale the final image
quality: 0.9, // quality of the image (0-1) only for jpeg and webp
displayPixelRatio: 2, // render scale
});
btn.disabled = false;
},
});
}
init().finally(_testFinish);