| export function createSimpleButtons(buttons: Record<string, (btn: HTMLButtonElement) => void>) { | |||||
| export function createSimpleButtons(buttons: Record<string, (btn: HTMLButtonElement) => void>, container = document.body) { | |||||
| const entries = Object.entries(buttons) | const entries = Object.entries(buttons) | ||||
| entries.forEach(([text, onclick], i) => { | entries.forEach(([text, onclick], i) => { | ||||
| const btn = document.createElement('button') | const btn = document.createElement('button') | ||||
| btn.style.right = '3rem' | btn.style.right = '3rem' | ||||
| btn.style.zIndex = '10000' | btn.style.zIndex = '10000' | ||||
| btn.onclick = async() => onclick(btn) | btn.onclick = async() => onclick(btn) | ||||
| document.body.appendChild(btn) | |||||
| container.appendChild(btn) | |||||
| }) | }) | ||||
| } | } |
| <html lang="en"> | <html lang="en"> | ||||
| <head> | <head> | ||||
| <meta charset="UTF-8"> | <meta charset="UTF-8"> | ||||
| <title>Extra importer plugins</title> | |||||
| <title>Extra Importer Plugins</title> | |||||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||||
| <!-- Import maps polyfill --> | <!-- Import maps polyfill --> | ||||
| <!-- Remove this when import maps will be widely supported --> | <!-- Remove this when import maps will be widely supported --> |
| autoScaleRadius: 0.5, | autoScaleRadius: 0.5, | ||||
| clearSceneObjects: false, | clearSceneObjects: false, | ||||
| } | } | ||||
| let i = 0 | |||||
| const models = await Promise.allSettled(urls.map(async url => | const models = await Promise.allSettled(urls.map(async url => | ||||
| viewer.load<IObject3D>(url, options).then(res => { | viewer.load<IObject3D>(url, options).then(res => { | ||||
| if (!res) return | if (!res) return | ||||
| const i = urls.indexOf(url) | |||||
| res.position.set(i % 4 - 1.5, 0, Math.floor(i / 4) - 1.5).multiplyScalar(1) | res.position.set(i % 4 - 1.5, 0, Math.floor(i / 4) - 1.5).multiplyScalar(1) | ||||
| res.setDirty() | res.setDirty() | ||||
| i++ | |||||
| return res | return res | ||||
| }))) | }))) | ||||
| createSimpleButtons({ | createSimpleButtons({ | ||||
| ['Enter/Exit fullscreen']: () => { | ['Enter/Exit fullscreen']: () => { | ||||
| if (fullScreenPlugin.isFullScreen()) fullScreenPlugin.exit() | if (fullScreenPlugin.isFullScreen()) fullScreenPlugin.exit() | ||||
| else fullScreenPlugin.enter(document.body) // parameter is optional, if not specified, the viewer canvas will be used | |||||
| else fullScreenPlugin.enter(viewer.container) // parameter is optional, if not specified, the viewer canvas will be used | |||||
| // or just use | // or just use | ||||
| // fullScreenPlugin.toggle(document.body) | // fullScreenPlugin.toggle(document.body) | ||||
| }, | }, | ||||
| }) | |||||
| }, viewer.container) | |||||
| const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true)) | const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true)) |
| <html lang="en"> | <html lang="en"> | ||||
| <head> | <head> | ||||
| <meta charset="UTF-8"> | <meta charset="UTF-8"> | ||||
| <title>Render Target Preview</title> | |||||
| <title>Geometry UV Preview</title> | |||||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||||
| <!-- Import maps polyfill --> | <!-- Import maps polyfill --> | ||||
| <!-- Remove this when import maps will be widely supported --> | <!-- Remove this when import maps will be widely supported --> |
| <html lang="en"> | <html lang="en"> | ||||
| <head> | <head> | ||||
| <meta charset="UTF-8"> | <meta charset="UTF-8"> | ||||
| <title>Depth Buffer Plugin</title> | |||||
| <title>Normal Buffer Plugin</title> | |||||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||||
| <!-- Import maps polyfill --> | <!-- Import maps polyfill --> | ||||
| <!-- Remove this when import maps will be widely supported --> | <!-- Remove this when import maps will be widely supported --> |