diff --git a/model-viewer/index.html b/model-viewer/index.html index 2b70b2f58f595d3c8e766018bebae92dcb935c42..e53853199c3c99e27a22daa23ba34694eeb4c72b 100644 --- a/model-viewer/index.html +++ b/model-viewer/index.html @@ -5,15 +5,51 @@ type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js" ></script> + <style> + div { + height: 100svh; + width: 100svw; + } + model-viewer { + height: inherit; + width: inherit; + } + .button { + display: flex; + justify-content: center; + align-items: center; + padding: 9px 12px; + gap: 8px; + height: 40px; + width: 172px; + border: none; + background: #ff2849; + border-radius: 20px; + cursor: pointer; + } + + .lable { + line-height: 22px; + font-size: 17px; + color: #fff; + font-family: sans-serif; + letter-spacing: 1px; + } + </style> </head> <body> - <model-viewer - src="deer/scene.gltf" - ar - shadow-intensity="1" - camera-controls - touch-action="none" - > - </model-viewer> + <div> + <model-viewer + src="deer/scene.gltf" + ar + shadow-intensity="1" + camera-controls + touch-action="none" + > + <div class="button" slot="ar-button"> + <span class="lable">Go to AR</span> + </div> + </model-viewer> + </div> </body> </html>