Difference between revisions of "Widget:RuneDisp"
From Official Runecraft Wiki
Tag: Rollback |
|||
| (29 intermediate revisions by 2 users not shown) | |||
| Line 2: | Line 2: | ||
__NOTOC__ | __NOTOC__ | ||
</noinclude> | </noinclude> | ||
| − | |||
| − | |||
| − | |||
| − | |||
<includeonly> | <includeonly> | ||
| + | <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> | ||
| − | + | <div id="bg_box" style="height:fit-content;width:fit-content;padding:5px;background-color:aliceblue;border-color:black;border-style:solid;margin:0 auto"></div> | |
| − | |||
| − | < | ||
| − | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| + | var bg_box = document.getElementById("bg_box"); | ||
// Read in given arguments | // Read in given arguments | ||
| Line 29: | Line 24: | ||
// Single rune case - very simple. | // Single rune case - very simple. | ||
if (multilayer == "false") { | if (multilayer == "false") { | ||
| − | + | bg_box.innerHTML += '<model-viewer id="MLrune" bounds="tight" src="' + runefile + '" ar ar-modes="scene-viewer webxr quick-look" camera-controls poster="poster.webp" shadow-intensity="1" environment-image="neutral" exposure="1" camera-orbit="0deg 65deg auto"></model-viewer>'; | |
} else { | } else { | ||
// Not so simple case - render normally to start | // Not so simple case - render normally to start | ||
| − | + | bg_box.innerHTML += '<model-viewer id="MLrune" bounds="tight" src="' + runefile + '" ar ar-modes="scene-viewer webxr quick-look" camera-controls poster="poster.webp" shadow-intensity="1" environment-image="neutral" exposure="1" camera-orbit="0deg 65deg auto"><div class="controls"><div>Layer: <select id="layer"></select></div></div></model-viewer>'; | |
// Define DOM elements for later use | // Define DOM elements for later use | ||
| Line 80: | Line 75: | ||
}); | }); | ||
| + | // Set model viewer size | ||
| + | document.getElementById("MLrune").style.height = "250px"; | ||
| + | document.getElementById("MLrune").style.width = "250px"; | ||
} | } | ||
</script> | </script> | ||
</includeonly> | </includeonly> | ||
Latest revision as of 21:30, 26 January 2022
