first working verison

google · Oct 17, 2024 · c1a2dc6 · c1a2dc6
1 parent 2ae714d
commit c1a2dc6
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 28 deletions.
diff --git a/packages/model-viewer/src/constants.ts b/packages/model-viewer/src/constants.ts
@@ -73,26 +73,31 @@ export const IS_SCENEVIEWER_CANDIDATE = IS_ANDROID && !IS_FIREFOX && !IS_OCULUS;
 // Extend Window type with webkit property,
 // required to check if iOS is running within a WKWebView browser instance.
 declare global {
-    interface Window {
-      webkit?: any;
-    }
+  interface Window {
+    webkit?: any;
+  }
 }
 
-export const IS_WKWEBVIEW = Boolean(window.webkit && window.webkit.messageHandlers);
+export const IS_WKWEBVIEW =
+    Boolean(window.webkit && window.webkit.messageHandlers);
 
-// If running in iOS Safari proper, and not within a WKWebView component instance, check for ARQL feature support.
-// Otherwise, if running in a WKWebView instance, check for known ARQL compatible iOS browsers, including:
-// Chrome (CriOS), Edge (EdgiOS), Firefox (FxiOS), Google App (GSA), DuckDuckGo (DuckDuckGo).
-// All other iOS browsers / apps will fail by default.
+// If running in iOS Safari proper, and not within a WKWebView component
+// instance, check for ARQL feature support. Otherwise, if running in a
+// WKWebView instance, check for known ARQL compatible iOS browsers, including:
+// Chrome (CriOS), Edge (EdgiOS), Firefox (FxiOS), Google App (GSA), DuckDuckGo
+// (DuckDuckGo). All other iOS browsers / apps will fail by default.
 export const IS_AR_QUICKLOOK_CANDIDATE = (() => {
-    if(IS_IOS){
-        if(!IS_WKWEBVIEW){            
-            const tempAnchor = document.createElement('a');
-            return Boolean(tempAnchor.relList && tempAnchor.relList.supports && tempAnchor.relList.supports('ar'));
-        } else {
-            return  Boolean(/CriOS\/|EdgiOS\/|FxiOS\/|GSA\/|DuckDuckGo\//.test(navigator.userAgent));
-        }
+  if (IS_IOS) {
+    if (!IS_WKWEBVIEW) {
+      const tempAnchor = document.createElement('a');
+      return Boolean(
+          tempAnchor.relList && tempAnchor.relList.supports &&
+          tempAnchor.relList.supports('ar'));
     } else {
-        return false;
+      return Boolean(/CriOS\/|EdgiOS\/|FxiOS\/|GSA\/|DuckDuckGo\//.test(
+          navigator.userAgent));
     }
+  } else {
+    return false;
+  }
 })();
diff --git a/packages/model-viewer/src/extra-model.ts b/packages/model-viewer/src/extra-model.ts
@@ -14,22 +14,25 @@
  */
 
 import {html, ReactiveElement} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
+import {property} from 'lit/decorators.js';
+
+// customElement,
 
 import ModelViewerElementBase from './model-viewer-base.js';
 
+
 /**
  * Definition for a basic <extra-model> element.
  */
-@customElement('extra-model')
+// @customElement('extra-model')
 export class ExtraModelElement extends ReactiveElement {
   @property({type: String}) src: string|null = null;
 
   render() {
     return html`<slot> </slot>`;
   }
 
-  firstUpdated() {
+  connectedCallback() {
     // Get the parent <model-viewer> element
     const modelViewer = this.closest('model-viewer') as ModelViewerElementBase;
     if (modelViewer) {
@@ -40,9 +43,3 @@ export class ExtraModelElement extends ReactiveElement {
     }
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'extra-model': ExtraModelElement;
-  }
-}
diff --git a/packages/model-viewer/src/model-viewer.ts b/packages/model-viewer/src/model-viewer.ts
@@ -13,6 +13,7 @@
  * limitations under the License.
  */
 
+import {ExtraModelElement} from './extra-model.js';
 import {AnimationMixin} from './features/animation.js';
 import {AnnotationMixin} from './features/annotation.js';
 import {ARMixin} from './features/ar.js';
@@ -28,17 +29,19 @@ import ModelViewerElementBase from './model-viewer-base.js';
 export {CanvasTexture, FileLoader, Loader, NearestFilter} from 'three';
 
 export const ModelViewerElement =
-AnnotationMixin(SceneGraphMixin(StagingMixin(EnvironmentMixin(ControlsMixin(
+    AnnotationMixin(SceneGraphMixin(StagingMixin(EnvironmentMixin(ControlsMixin(
         ARMixin(LoadingMixin(AnimationMixin(ModelViewerElementBase))))))));
 
 export type ModelViewerElement = InstanceType<typeof ModelViewerElement>;
 
 export type{RGB, RGBA} from './three-components/gltf-instance/gltf-2.0';
 
 customElements.define('model-viewer', ModelViewerElement);
+customElements.define('extra-model', ExtraModelElement);
 
 declare global {
   interface HTMLElementTagNameMap {
     'model-viewer': ModelViewerElement;
+    'extra-model': ExtraModelElement;
   }
-}
+}
diff --git a/packages/modelviewer.dev/index.html b/packages/modelviewer.dev/index.html
@@ -70,7 +70,7 @@ <h3 class="grouping-title grouping-title-new quick-start">Quick Start</h3>
 
 <!-- Use it like any other HTML element -->
 <model-viewer alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" src="shared-assets/models/NeilArmstrong.glb" ar environment-image="shared-assets/environments/moon_1k.hdr" poster="shared-assets/models/NeilArmstrong.webp" shadow-intensity="1" camera-controls touch-action="pan-y">
-<extra-model src="samanehishere"></extra-model>
+<extra-model src="holla.gltf"></extra-model>
 </model-viewer>
                 </template>
               </example-snippet>