threepipe/examples/file-load/script.ts

import {_testFinish, _testStart, LoadingScreenPlugin, ThreeViewer} from 'threepipe'

async function init() {

    const viewer = new ThreeViewer({
        canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
        msaa: true,
        dropzone: {
            addOptions: {
                disposeSceneObjects: true,
                autoSetEnvironment: true, // when hdr is dropped
                autoSetBackground: true,
            },
        },
    })

    viewer.addPluginSync(LoadingScreenPlugin)

    const env = 'https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr'
    const url = 'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf'

    const responses = await Promise.all([
        fetch(env),
        fetch(url),
    ])
    const envFile = new File([await responses[0].blob()], 'venice_sunset_1k.hdr')
    await viewer.setEnvironmentMap(envFile, {
        setBackground: true,
    })
    const blob = await responses[1].blob()
    const file = new File([blob], url) // Set the file name to the URL, so that internal textures can be resolved correctly from the base path
    const result = await viewer.load(file, {
        autoCenter: true,
        autoScale: true,
    })
    console.log(result)

}

_testStart()
init().finally(_testFinish)