Palash Bansal
11 月之前
+ 64
- 0
examples/dispose-reimport-test-2/index.html
查看文件
| <!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
查看文件
| <!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
查看文件
| viewer.addPluginSync(GLTFDracoExportPlugin) | viewer.addPluginSync(GLTFDracoExportPlugin) | ||||
| viewer.addPluginSync(GLTFSpecGlossinessConverterPlugin) | 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') | 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', { | const model = await viewer.load<IObject3D>('https://asset-samples.threepipe.org/tests/SpecGlossVsMetalRough.glb', { | ||||
| autoCenter: true, | autoCenter: true, |
+ 2
- 0
examples/index.html
查看文件
| <li><a href="./import-test/">Import Test</a></li> | <li><a href="./import-test/">Import Test</a></li> | ||||
| <li><a href="./js-image-data-test/">JS ImageData 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="./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> | </ul> | ||||
| </div> | </div> | ||||
| <div class="iframe-container"> | <div class="iframe-container"> |
Loading…