Palash Bansal
vor 11 Monaten
4 geänderte Dateien mit 144 neuen und 3 gelöschten Zeilen
+ 64
- 0
examples/dispose-reimport-test-2/index.html
Datei anzeigen
| @@ -0,0 +1,64 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="UTF-8"> | |||
| <title>Dispose + Reimport Test with config</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, Color} from 'threepipe' | |||
| const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')}) | |||
| async function init() { | |||
| viewer.deleteImportedViewerConfigOnLoad = true | |||
| viewer.deleteImportedViewerConfigOnLoadWait = 2000 | |||
| const model3 = await viewer.load('https://asset-samples.threepipe.org/demos/classic-watch.glb') | |||
| console.log(model3.children.length) | |||
| viewer.scene.backgroundColor = new Color(0x000000) | |||
| await timeout(500) | |||
| viewer.scene.clearSceneModels() | |||
| await timeout(500) | |||
| // should load white bg | |||
| const model4 = await viewer.load('https://asset-samples.threepipe.org/demos/classic-watch.glb') | |||
| console.log(model3.children.length, model4.children.length) | |||
| viewer.scene.backgroundColor = new Color(0xff0000) | |||
| await timeout(500) | |||
| viewer.scene.clearSceneModels() | |||
| await timeout(500) | |||
| // should not change bg with console warn | |||
| const model5 = await viewer.load('https://asset-samples.threepipe.org/demos/classic-watch.glb') | |||
| } | |||
| _testStart() | |||
| init().finally(_testFinish) | |||
| </script> | |||
| </head> | |||
| <body> | |||
| <div id="canvas-container"> | |||
| <canvas id="mcanvas"></canvas> | |||
| </div> | |||
| </body> | |||
+ 78
- 0
examples/dispose-reimport-test/index.html
Datei anzeigen
| @@ -0,0 +1,78 @@ | |||
| <!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() { | |||
| await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr') | |||
| viewer.scene.background = viewer.scene.environment | |||
| const model = await viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', { | |||
| autoCenter: true, | |||
| autoScale: true, | |||
| }) | |||
| console.log(model.uuid) | |||
| await timeout(500) | |||
| viewer.scene.clearSceneModels(false) | |||
| await timeout(500) | |||
| const model2 = await viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', { | |||
| autoCenter: true, | |||
| autoScale: true, | |||
| }) | |||
| 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) | |||
| const model3 = await viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', { | |||
| autoCenter: true, | |||
| autoScale: true, | |||
| }) | |||
| 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 | |||
| } | |||
| _testStart() | |||
| init().finally(_testFinish) | |||
| </script> | |||
| </head> | |||
| <body> | |||
| <div id="canvas-container"> | |||
| <canvas id="mcanvas"></canvas> | |||
| </div> | |||
| </body> | |||
+ 0
- 3
examples/gltf-spec-gloss-import/script.ts
Datei anzeigen
| @@ -18,9 +18,6 @@ async function init() { | |||
| viewer.addPluginSync(GLTFDracoExportPlugin) | |||
| viewer.addPluginSync(GLTFSpecGlossinessConverterPlugin) | |||
| // Note: see asset-exporter-plugin example as well | |||
| // load obj + mtl | |||
| await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr') | |||
| const model = await viewer.load<IObject3D>('https://asset-samples.threepipe.org/tests/SpecGlossVsMetalRough.glb', { | |||
| autoCenter: true, | |||
+ 2
- 0
examples/index.html
Datei anzeigen
| @@ -552,6 +552,8 @@ | |||
| <li><a href="./import-test/">Import Test</a></li> | |||
| <li><a href="./js-image-data-test/">JS ImageData Test</a></li> | |||
| <li><a href="./gltf-transmission-test-msaa-zprepass/">glTF Transmission Test + MSAA + zPrepass</a></li> | |||
| <li><a href="./dispose-reimport-test/">Dispose + Reimport (URL)</a></li> | |||
| <li><a href="./dispose-reimport-test-2/">Dispose + Reimport (URL, Root)</a></li> | |||
| </ul> | |||
| </div> | |||
| <div class="iframe-container"> | |||
Laden…