diff --git a/index.html b/index.html
index d613e07..307b367 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,10 @@
Figni Viewer Sample
+
-
+
{
+ this.initCameraButton = document.createElement('button');
+ this.initCameraButton.id = `init-camera-button-${this.seed}`;
+ this.initCameraButton.innerHTML = ' ';
+ this.initCameraButton.addEventListener('click', () => {
this.setCameraOrbit('auto auto auto');
this.setCameraTarget('auto auto auto');
- initCameraButton.style.display = 'none';
+ this.initCameraButton.style.display = 'none';
});
- initCameraButton.style.display = 'none';
- this.appendChild(initCameraButton);
+ this.initCameraButton.style.display = 'none';
+ this.appendChild(this.initCameraButton);
this.animationCrossfadeDuration = 0;
const hotspots = this.querySelectorAll('button[slot^="hotspot"]');
@@ -115,7 +115,6 @@ class FigniViewerElement extends ModelViewerElement {
this.setCameraTarget(target);
const orbit = hotspot.getAttribute('orbit') || 'auto auto auto';
this.setCameraOrbit(orbit);
- initCameraButton.style.display = 'block';
}
});
}
@@ -132,66 +131,95 @@ class FigniViewerElement extends ModelViewerElement {
目の前に置く
`;
+ arButton.classList.add('ar-button');
this.appendChild(arButton);
const style = document.createElement('style');
style.textContent = `
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
+ figni-viewer * {
+ font-family: 'Noto Sans JP', sans-serif;
+ color: #222428;
+ }
[slot^="hotspot"] {
display: block;
- border-radius: 1.5rem;
+ width: 1.5rem;
+ height: 1.5rem;
+ border-radius: 50%;
border: none;
- background-color: #FF733B;
+ background-color: rgba(255, 115, 59, 1.0);
+ outline: 0.5rem solid rgba(255, 115, 59, 0.5);
box-sizing: border-box;
--min-hotspot-opacity: 0;
- padding: 1.5rem;
+ backdrop-filter: blur(3px);
}
- [slot="ar-button"] {
+ #init-camera-button-${this.seed} {
position: absolute;
- padding: 0.5rem 1rem;
- right: 0.5rem;
+ display: flex;
+ -webkit-box-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ padding: 0rem;
+ top: 0.5rem;
+ left: 0.5rem;
white-space: nowrap;
- bottom: 0.5rem;
- border: 1px solid #FF733B;
- border-radius: 0.75rem;
- background-color: white;
- }
- [slot="ar-button"]:active {
- background-color: white;
- }
- [slot="ar-button"]:focus {
- background-color: white;
- outline: none;
- }
- [slot="ar-button"]:focus-visible {
- background-color: white;
- outline: 1px solid #30333E;
+ border-radius: 50%;
+ border: none;
+ background-color: #3B5EFF;
}
- [slot="ar-button"] svg {
+ #init-camera-button-${this.seed} svg {
height: 1rem;
- margin-right: 4px;
- margin-bottom: 2px;
+ transform: translateX(-1.5px) translateY(1.25px);
}
- #init-camera-button-${this.seed} {
+ .ar-button {
position: absolute;
- padding: 0.5rem;
+ display: flex;
+ -webkit-box-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ justify-content: center;
+ height: 2.5rem;
right: 0.5rem;
- white-space: nowrap;
bottom: 0.5rem;
+ background-color: white;
border: 1px solid #FF733B;
border-radius: 0.75rem;
+ padding: 0 1rem;
+ font-weight: bold;
+ }
+ .ar-button svg {
+ width: 1rem;
+ margin-top: 0.1rem;
+ margin-right: 0.25rem;
+ }
+ .ar-button span {
+ display: block;
+ color: #FF733B;
}
#download-screenshot-button-${this.seed} {
position: absolute;
- padding: 0.5rem;
+ display: flex;
+ -webkit-box-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ padding: 0;
left: 0.5rem;
- white-space: nowrap;
bottom: 0.5rem;
- border: 1px solid #FF733B;
- border-radius: 0.75rem;
+ white-space: nowrap;
+ border-radius: 50%;
+ border: none;
+ background-color: white;
}
#download-screenshot-button-${this.seed} svg {
- width: 1rem;
- height: 1rem;
+ width: 1.25rem;
+ height: 1.25rem;
+ transform: translateX(-0.5px) translateY(-0.5px);
}
`;
this.appendChild(style);
@@ -237,7 +265,7 @@ class FigniViewerElement extends ModelViewerElement {
if (!downloadScreenshotButton) {
downloadScreenshotButton = document.createElement('button');
downloadScreenshotButton.id = `download-screenshot-button-${this.seed}`;
- downloadScreenshotButton.innerHTML = ''
+ downloadScreenshotButton.innerHTML = ''
downloadScreenshotButton.addEventListener('click', () => {
this.downloadScreenshot();
});
@@ -276,10 +304,16 @@ class FigniViewerElement extends ModelViewerElement {
setCameraOrbit(orbit) {
this.cameraOrbit = orbit;
+ if (this.initCameraButton) {
+ this.initCameraButton.style.display = 'block';
+ }
}
setCameraTarget(target) {
this.cameraTarget = target;
+ if (this.initCameraButton) {
+ this.initCameraButton.style.display = 'block';
+ }
}
async downloadScreenshot() {