diff --git a/examples/animation.html b/examples/animation.html index 8d94716..66ca01d 100644 --- a/examples/animation.html +++ b/examples/animation.html @@ -57,6 +57,6 @@ - + diff --git a/examples/annotations.html b/examples/annotations.html index dc4dbd6..c0bd323 100644 --- a/examples/annotations.html +++ b/examples/annotations.html @@ -115,6 +115,6 @@ - + diff --git a/examples/basic-shapes.html b/examples/basic-shapes.html index cfd3461..9ddf3f5 100644 --- a/examples/basic-shapes.html +++ b/examples/basic-shapes.html @@ -85,6 +85,6 @@ - + diff --git a/examples/car-configurator.html b/examples/car-configurator.html index 15b6a53..daa6a74 100644 --- a/examples/car-configurator.html +++ b/examples/car-configurator.html @@ -66,6 +66,6 @@ - + diff --git a/examples/css/example.css b/examples/css/example.css index 190516c..725de23 100644 --- a/examples/css/example.css +++ b/examples/css/example.css @@ -14,3 +14,34 @@ body { canvas { touch-action: none; } + +.example-button-container { + position: absolute; + bottom: max(16px, env(safe-area-inset-bottom)); + right: max(16px, env(safe-area-inset-right)); + display: flex; + gap: 8px; +} + +.example-button { + display: flex; + position: relative; + width: 40px; + height: 40px; + background: rgba(255, 255, 255, 0.9); + border: 1px solid #ddd; + border-radius: 8px; + cursor: pointer; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + transition: background-color 0.2s; + color: #2c3e50; +} + +.example-button:hover { + background: rgba(255, 255, 255, 1); +} diff --git a/examples/fps-controller.html b/examples/fps-controller.html index 5f72c81..13a6d52 100644 --- a/examples/fps-controller.html +++ b/examples/fps-controller.html @@ -48,6 +48,6 @@ - + diff --git a/examples/glb.html b/examples/glb.html index 60e384b..22e7236 100644 --- a/examples/glb.html +++ b/examples/glb.html @@ -57,6 +57,6 @@ - + diff --git a/examples/js/example-ui.mjs b/examples/js/example.mjs similarity index 85% rename from examples/js/example-ui.mjs rename to examples/js/example.mjs index 6f0c101..5296115 100644 --- a/examples/js/example-ui.mjs +++ b/examples/js/example.mjs @@ -12,58 +12,22 @@ document.addEventListener('DOMContentLoaded', async () => { // Create container for buttons const container = document.createElement('div'); - Object.assign(container.style, { - position: 'absolute', - bottom: 'max(16px, env(safe-area-inset-bottom))', - right: 'max(16px, env(safe-area-inset-right))', - display: 'flex', - gap: '8px' - }); + container.classList.add('example-button-container'); function createButton({ icon, title, onClick }) { const button = document.createElement('button'); button.innerHTML = icon; button.title = title; + button.classList.add('example-button'); - Object.assign(button.style, { - display: 'flex', - position: 'relative', - width: '40px', - height: '40px', - background: 'rgba(255, 255, 255, 0.9)', - border: '1px solid #ddd', - borderRadius: '8px', - cursor: 'pointer', - alignItems: 'center', - justifyContent: 'center', - padding: '0', - margin: '0', - backdropFilter: 'blur(8px)', - WebkitBackdropFilter: 'blur(8px)', - transition: 'background-color 0.2s', - color: '#2c3e50' - }); - - const svg = button.querySelector('svg'); - if (svg) { - svg.style.display = 'block'; - svg.style.margin = 'auto'; + if (onClick) { + button.onclick = onClick; } - button.onmouseenter = () => { - button.style.background = 'rgba(255, 255, 255, 1)'; - }; - - button.onmouseleave = () => { - button.style.background = 'rgba(255, 255, 255, 0.9)'; - }; - - if (onClick) button.onclick = onClick; - return button; } - /** @type {import('../../dist/pwc.mjs').CameraComponentElement*/ + /** @type {import('../../dist/pwc.mjs').CameraComponentElement} */ const cameraElement = await document.querySelector('pc-camera').ready(); const clearColor = new Color(); let originalSkyType = null; diff --git a/examples/physics.html b/examples/physics.html index e387f91..baa1aa8 100644 --- a/examples/physics.html +++ b/examples/physics.html @@ -70,6 +70,6 @@ - + diff --git a/examples/positional-sound.html b/examples/positional-sound.html index a7ef7d8..afdecc4 100644 --- a/examples/positional-sound.html +++ b/examples/positional-sound.html @@ -54,6 +54,6 @@ - + diff --git a/examples/screen.html b/examples/screen.html index 64a371b..f8af361 100644 --- a/examples/screen.html +++ b/examples/screen.html @@ -37,6 +37,6 @@ - + diff --git a/examples/shoe-configurator.html b/examples/shoe-configurator.html index f444326..e0e5ea8 100644 --- a/examples/shoe-configurator.html +++ b/examples/shoe-configurator.html @@ -59,7 +59,7 @@ - + diff --git a/examples/sound.html b/examples/sound.html index 2f0fd35..ae2edcf 100644 --- a/examples/sound.html +++ b/examples/sound.html @@ -49,6 +49,6 @@ - + diff --git a/examples/spinning-cube.html b/examples/spinning-cube.html index d53f75c..c98137d 100644 --- a/examples/spinning-cube.html +++ b/examples/spinning-cube.html @@ -36,6 +36,6 @@ - + diff --git a/examples/splat.html b/examples/splat.html index 9fc0ce9..fbc29c3 100644 --- a/examples/splat.html +++ b/examples/splat.html @@ -53,6 +53,6 @@ - + diff --git a/examples/text.html b/examples/text.html index 6178d53..e1b3c2d 100644 --- a/examples/text.html +++ b/examples/text.html @@ -52,6 +52,6 @@ - + diff --git a/examples/text3d.html b/examples/text3d.html index d69ad2f..c767a72 100644 --- a/examples/text3d.html +++ b/examples/text3d.html @@ -67,6 +67,6 @@ - + diff --git a/examples/tween.html b/examples/tween.html index 40ababa..2bbc7b5 100644 --- a/examples/tween.html +++ b/examples/tween.html @@ -67,6 +67,6 @@ - + diff --git a/examples/video-recorder.html b/examples/video-recorder.html index 1c708c7..6593443 100644 --- a/examples/video-recorder.html +++ b/examples/video-recorder.html @@ -79,6 +79,6 @@ - + diff --git a/examples/video-texture.html b/examples/video-texture.html index d54943a..483c3b2 100644 --- a/examples/video-texture.html +++ b/examples/video-texture.html @@ -73,6 +73,6 @@ - +