Introduce ModelData class

packages/model-viewer/src/features/animation.ts

@@ -75,14 +75,14 @@ export const AnimationMixin = <T extends Constructor<ModelViewerElementBase>>(
      */
     get availableAnimations(): Array<string> {
       if (this.loaded) {
-        return this[$scene].animationNames;
+        return this[$scene].modelData.animationNames;
       }
 
       return [];
     }
 
     get duration(): number {
-      return this[$scene].duration;
+      return this[$scene].modelData.duration;
     }
 
     get paused(): boolean {

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

@@ -393,7 +393,7 @@ export default class ModelViewerElementBase extends ReactiveElement {
         this[$loaded] = false;
         this[$loadedTime] = 0;
         this[$scene].reset();
-      } else if (this.src !== this[$scene].url) {
+      } else if (this.src !== this[$scene].modelData.url) {
         this[$loaded] = false;
         this[$loadedTime] = 0;
         this[$updateSource]();
@@ -594,7 +594,7 @@ export default class ModelViewerElementBase extends ReactiveElement {
   async[$updateSource]() {
     const scene = this[$scene];
     if (this.loaded || !this[$shouldAttemptPreload]() ||
-        this.src === scene.url) {
+        this.src === scene.modelData.url) {
       return;
     }
 

packages/model-viewer/src/test/features/animation-spec.ts

@@ -42,8 +42,8 @@ const animationIsPlaying = (element: any, animationName?: string): boolean => {
 
 const animationWithIndexIsPlaying = (element: any, animationIndex = 0):
     boolean => {
-      const {currentAnimationAction} = element[$scene];
-      const {_currentGLTF} = element[$scene];
+      const {currentAnimationAction, modelData} = element[$scene];
+      const {_currentGLTF} = modelData.currentGLTF
 
       if (currentAnimationAction != null && animationIndex >= 0 &&
           animationIndex < _currentGLTF.animations.length &&

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

@@ -92,7 +92,7 @@ suite('ModelViewerElementBase', () => {
           element.src = assetPath('models/Horse.glb');
           await waitForEvent(element, 'load');
 
-          expect(element[$scene].url)
+          expect(element[$scene].modelData.url)
               .to.be.equal(assetPath('models/Horse.glb'));
         });
 
@@ -102,7 +102,7 @@ suite('ModelViewerElementBase', () => {
           element.src = assetPath('models/Horse.glb');
           await waitForEvent(element, 'load');
 
-          expect(element[$scene].url)
+          expect(element[$scene].modelData.url)
               .to.be.equal(assetPath('models/Horse.glb'));
         });
       });

packages/model-viewer/src/three-components/ModelData.ts

@@ -0,0 +1,108 @@
+import {AnimationAction, AnimationClip, LoopPingPong, Object3D} from 'three';
+
+import {$renderer} from '../model-viewer-base.js';
+import {ModelViewerElement} from '../model-viewer.js';
+
+import {ModelViewerGLTFInstance} from './gltf-instance/ModelViewerGLTFInstance.js';
+
+/**
+ * A THREE.Scene object that takes a Model and CanvasHTMLElement and
+ * constructs a framed scene based off of the canvas dimensions.
+ * Provides lights and cameras to be used in a renderer.
+ */
+export class ModelData extends Object3D {
+  // ModelScene is going to have child of this types
+  public url: string|null = null;
+
+  public currentGLTF: ModelViewerGLTFInstance|null = null;
+
+  private cancelPendingSourceChange: (() => void)|null = null;
+
+
+  // Animations
+  public animationNames: Array<string> = [];
+  public animationsByName: Map<string, AnimationClip> = new Map();
+  public currentAnimationAction: AnimationAction|null = null;
+
+
+  constructor() {
+    super();
+  }
+
+  async loadModel(
+      url: string, element: ModelViewerElement,
+      progressCallback: (progress: number) => void):
+      Promise<ModelViewerGLTFInstance> {
+    // If we have pending work due to a previous source change in progress,
+    // cancel it so that we do not incur a race condition:
+    if (this.cancelPendingSourceChange != null) {
+      this.cancelPendingSourceChange!();
+      this.cancelPendingSourceChange = null;
+    }
+
+    let gltf: ModelViewerGLTFInstance;
+
+    try {
+      gltf = await new Promise<ModelViewerGLTFInstance>(
+          async (resolve, reject) => {
+            this.cancelPendingSourceChange = () => reject();
+            try {
+              const result = await element[$renderer].loader.load(
+                  url, element, progressCallback);
+              resolve(result);
+            } catch (error) {
+              reject(error);
+            }
+          });
+    } finally {
+      this.cancelPendingSourceChange = null;
+    }
+
+    return gltf;
+  }
+
+  setUpAnimations() {
+    const {animations} = this.currentGLTF!;
+    console.log('Samaneh:animation', animations);
+    const animationsByName = new Map();
+    const animationNames = [];
+
+    for (const animation of animations) {
+      animationsByName.set(animation.name, animation);
+      animationNames.push(animation.name);
+    }
+
+    this.animations = animations;
+    this.animationsByName = animationsByName;
+    this.animationNames = animationNames;
+  }
+
+
+  get animationTime(): number {
+    if (this.currentAnimationAction != null) {
+      const loopCount =
+          Math.max((this.currentAnimationAction as any)._loopCount, 0);
+      if (this.currentAnimationAction.loop === LoopPingPong &&
+          (loopCount & 1) === 1) {
+        return this.duration - this.currentAnimationAction.time
+      } else {
+        return this.currentAnimationAction.time;
+      }
+    }
+
+    return 0;
+  }
+
+  get duration(): number {
+    if (this.currentAnimationAction != null &&
+        this.currentAnimationAction.getClip()) {
+      return this.currentAnimationAction.getClip().duration;
+    }
+
+    return 0;
+  }
+
+  get hasActiveAnimation(): boolean {
+    return this.currentAnimationAction != null;
+  }
+}