Merge branch 'addlogs' of github.com:google/model-viewer into addlogs

Merged changes

packages/model-viewer/src/extra-model.ts

@@ -0,0 +1,45 @@
+/* @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {html, ReactiveElement} from 'lit';
+import {property} from 'lit/decorators.js';
+
+// customElement,
+
+import ModelViewerElementBase from './model-viewer-base.js';
+
+
+/**
+ * Definition for a basic <extra-model> element.
+ */
+// @customElement('extra-model')
+export class ExtraModelElement extends ReactiveElement {
+  @property({type: String}) src: string|null = null;
+
+  render() {
+    return html`<slot> </slot>`;
+  }
+
+  connectedCallback() {
+    // Get the parent <model-viewer> element
+    const modelViewer = this.closest('model-viewer') as ModelViewerElementBase;
+    if (modelViewer) {
+      // Add this extra model to the scene
+      modelViewer.addExtraModel(this);
+    } else {
+      console.error('<extra-model> must be a child of <model-viewer>');
+    }
+  }
+}

packages/model-viewer/src/model-viewer-base.ts

@@ -18,6 +18,7 @@ import {property} from 'lit/decorators.js';
 import {Camera as ThreeCamera, Event as ThreeEvent, Vector2, Vector3, WebGLRenderer} from 'three';
 
 import {HAS_INTERSECTION_OBSERVER, HAS_RESIZE_OBSERVER} from './constants.js';
+import {ExtraModelElement} from './extra-model.js';
 import {$updateEnvironment} from './features/environment.js';
 import {makeTemplate} from './template.js';
 import {$evictionPolicy, CachingGLTFLoader} from './three-components/CachingGLTFLoader.js';
@@ -214,6 +215,8 @@ export default class ModelViewerElementBase extends ReactiveElement {
 
   protected[$progressTracker]: ProgressTracker = new ProgressTracker();
 
+  // private extraModels: ExtraModelElement[] = [];
+
   /** @export */
   get loaded() {
     return this[$getLoaded]();
@@ -645,4 +648,9 @@ export default class ModelViewerElementBase extends ReactiveElement {
       updateSourceProgress(1.0);
     }
   }
+
+  async addExtraModel(extraModel: ExtraModelElement) {
+    console.log('Adding a new extra model with src: ', extraModel.src);
+    // this.extraModels.add(extraModel);
+  }
 }

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;
   }
-}
+}

packages/modelviewer.dev/index.html

@@ -69,7 +69,9 @@ <h3 class="grouping-title grouping-title-new quick-start">Quick Start</h3>
 <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
 
 <!-- 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"></model-viewer>
+<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="holla.gltf"></extra-model>
+</model-viewer>
                 </template>
               </example-snippet>
             </div>