lzy
/
threepipe


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dispose and Reimport Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Import maps polyfill -->
    <!-- Remove this when import maps will be widely supported -->
    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

    <script type="importmap">
    {
        "imports": {
          "threepipe": "./../../dist/index.mjs"
        }
    }

    </script>
    <style id="example-style">
        html, body, #canvas-container, #mcanvas {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script type="module" src="../examples-utils/global-loading.mjs"></script>
    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
    <script id="example-script" type="module">
        import {_testFinish, _testStart, ThreeViewer, timeout} from 'threepipe'

        const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')})

        async function init(loadAsFile = true) {
            const url = 'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf'
            let file
            if(loadAsFile){
                file = new File([await (await fetch(url)).blob()], url)
            }
            const load = async ()=> {
                return viewer.load(file ?? url, {
                    autoCenter: true,
                    autoScale: true,
                })
            }

            await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
            viewer.scene.background = viewer.scene.environment
            const model = await load()
            console.log(model.uuid)
            await timeout(500)
            viewer.scene.clearSceneModels(false)
            await timeout(500)
            const model2 = await load()
            console.log(model2.uuid)
            if(model !== model2) throw new Error('Error in Test - Models should be the same after clearing scene models');
            await timeout(500)
            viewer.scene.disposeSceneModels()
            await timeout(500)
            // readd model2 which is disposed
            viewer.addSceneObject(model2)
            await timeout(500)
            viewer.scene.disposeSceneModels()
            await timeout(500)
            const model3 = await load()
            console.log(model3.uuid)
            if(model2 === model3) throw new Error('Error in Test - Models should not be the same after disposing scene models');
            await timeout(500)
            viewer.scene.disposeSceneModels()
            await timeout(500)
            viewer.scene.addObject(model.translateX(-0.5)) // add back cleared model
            viewer.scene.addObject(model2.translateX(-0.5)) // again, shouldn't change anything
            viewer.scene.addObject(model3.translateX(1)) // add back disposed model
            await timeout(1000)
            viewer.scene.disposeSceneModels()
        }

        _testStart()
        init(false).then(()=>init(true)).finally(_testFinish)
    </script>
</head>
<body>
<div id="canvas-container">
    <canvas id="mcanvas"></canvas>
</div>

</body>