threepipe/examples/obj-to-glb/script.js

A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.

import { _testFinish, downloadBlob, LoadingScreenPlugin, ThreeViewer } from 'threepipe';
const viewer = new ThreeViewer({ canvas: document.getElementById('mcanvas'), msaa: true,
    plugins: [LoadingScreenPlugin], });
async function init() {
    // load obj + mtl
    const result = await viewer.load('https://threejs.org/examples/models/obj/male02/male02.obj', {
        autoCenter: true,
        autoScale: true,
    });
    // todo wait for images to load
    // export to glb
    const blob = await viewer.export(result);
    // const blob = await viewer.exportScene(); // its possible to export the whole scene also
    if (!blob || blob.ext !== 'glb') {
        console.error('Unable to export scene');
        return;
    }
    // clear scene
    viewer.scene.disposeSceneModels();
    // load environment map and glb
    await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr');
    await viewer.load({
        path: 'file.glb',
        file: blob,
    });
    // add download button
    const downloadButton = document.createElement('button');
    downloadButton.innerText = 'Download .glb';
    downloadButton.style.position = 'absolute';
    downloadButton.style.bottom = '3rem';
    downloadButton.style.right = '3rem';
    downloadButton.style.zIndex = '10000';
    downloadButton.onclick = () => downloadBlob(blob, 'file.glb');
    document.body.appendChild(downloadButton);
}
init().finally(_testFinish);