import https://code.jquery.com/jquery-3.7.1.js X3D from https://create3000.github.io/code/x_ite/latest/x_ite.mjs {convert} from ./deps/vrml1to97/index.js knownExtensions := /[.](?:wrl|x3d|gltf|glb|obj|stl|ply)$/ certainlyHandled := knownExtensions.source.slice(0, -2).split('wrl|')[1].split '|' function makeBrowser(url: string) canvas := X3D.createBrowser() // Fix up css: smaller browser, but we can see the world info $(canvas).css width: '150px' height: '150px' overflow: 'visible' 'vertical-align': 'top' x_ite_shadow := canvas.shadowRoot if x_ite_shadow x_ite_style := x_ite_shadow.querySelector 'link' if x_ite_style $(x_ite_style).after '' x_ite_browser := x_ite_shadow.querySelector '.x_ite-private-browser' if x_ite_browser $(x_ite_browser).css overflow: 'visible' // Now get the browser and load the requested VRML, converting if need be browser := X3D.getBrowser canvas browser.setBrowserOption 'StraightenHorizon', false if certainlyHandled.some((ext) => url.includes ext) canvas.setAttribute 'src', url else if url.includes '.wrl' // Need to obtain the text and check what level it is response := await fetch url text .= await response.text() if /#\s*VRML\s*V?1[.]/i.test text text = convert text browser.baseURL = url scene := await browser.createX3DFromString text browser.replaceWorld scene canvas // Put eye icons after all of the eligible links links := $('a').filter -> knownExtensions.test @.getAttribute('href') ?? '' links.after -> newSpan := $('👁') newSpan.hover (-> $(@).css 'background-color', 'lightblue'), (-> $(@).css 'background-color', 'inherit') newSpan.on 'click', @, (e) => eye := e.target state .= eye.getAttribute 'data' unless state state = 'off' url := e.data.getAttribute('href') ?? '' $(eye).after await makeBrowser url if state is 'off' eye.setAttribute 'data', 'on' $(eye).css 'text-decoration', 'line-through 3px' $(eye.nextSibling as Element).show() else eye.setAttribute 'data', 'off' $(eye).css 'text-decoration', 'none' $(eye.nextSibling as Element).hide()