MOZ_components -> _gltfComponents. Move inflate to scene loader.

src/client/containers/PropertiesPanelContainer.js

@@ -21,14 +21,14 @@ class PropertiesPanelContainer extends Component {
     this.props.editor.signals.objectSelected.add(node =>
       this.setState({
         node,
-        components: (node && node.userData.MOZ_components) || []
+        components: (node && node.userData._gltfComponents) || []
       })
     );
 
     this.props.editor.signals.objectChanged.add(object => {
       if (this.state.node === object) {
         this.setState({
-          components: object.userData.MOZ_components || []
+          components: object.userData._gltfComponents || []
         });
       }
     });

src/client/containers/ViewportPanelContainer.js

@@ -34,7 +34,9 @@ class ViewportPanelContainer extends Component {
 
   onDropFile = file => {
     if (file.ext === ".gltf" || file.ext === ".scene") {
-      console.log("TODO: add component with scene ref");
+      const object = new THREE.Object3D();
+      // TODO: add scene-ref component
+      this.props.editor.addObject(object);
     }
   };
 

src/client/editor/Editor.js

@@ -177,15 +177,6 @@ export default class Editor {
       if (child.geometry !== undefined) scope.addGeometry(child.geometry);
       if (child.material !== undefined) scope.addMaterial(child.material);
 
-      if (child.userData.MOZ_components) {
-        for (const component of child.userData.MOZ_components) {
-          this.gltfComponents.get(component.name).inflate(child, component.props);
-        }
-      }
-      if (child instanceof THREE.Mesh && child.material instanceof THREE.MeshStandardMaterial) {
-        this.gltfComponents.get("standard-material").inflate(child);
-      }
-
       scope.addHelper(child, object);
     });
 
@@ -433,8 +424,8 @@ export default class Editor {
 
   _cloneAndInflate(object, root) {
     const clone = object.clone(false);
-    if (clone.userData.MOZ_components) {
-      for (const component of clone.userData.MOZ_components) {
+    if (clone.userData._gltfComponents) {
+      for (const component of clone.userData._gltfComponents) {
         this.gltfComponents.get(component.name).inflate(clone, component.props);
       }
     }

src/client/editor/SceneLoader.js

@@ -20,6 +20,21 @@ function loadGLTF(url) {
   });
 }
 
+function inflateGLTFComponents(scene, components) {
+  scene.traverse(object => {
+    const extensions = object.userData.gltfExtensions;
+    if (extensions !== undefined) {
+      for (const extensionName in extensions) {
+        if (components[extensionName]) {
+          components[extensionName].inflate(object, extensions[extensionName]);
+        } else if (object instanceof THREE.Mesh && object.material instanceof THREE.MeshStandardMaterial) {
+          components.get("standard-material").inflate(object);
+        }
+      }
+    }
+  });
+}
+
 function addChildAtIndex(parent, child, index) {
   parent.children.splice(index, 0, child);
   child.parent = parent;
@@ -172,6 +187,8 @@ export async function loadScene(url, components, isRoot = true) {
 
     scene.userData._gltfDependency = url;
 
+    inflateGLTFComponents(scene, components);
+
     return scene;
   }
 

src/client/editor/gltf-components.js

@@ -55,7 +55,7 @@ class BaseComponent {
   }
 
   static getComponent(node) {
-    return node.userData.MOZ_components.find(component => component.name === this.componentName);
+    return node.userData._gltfComponents.find(component => component.name === this.componentName);
   }
 
   static _propsFromObject() {
@@ -66,14 +66,14 @@ class BaseComponent {
     if (!props) {
       props = { ...getDefaultsFromSchema(this.schema), ...this._propsFromObject(node) };
     }
-    if (!node.userData.MOZ_components) {
-      node.userData.MOZ_components = [];
+    if (!node.userData._gltfComponents) {
+      node.userData._gltfComponents = [];
     }
 
     let component = this.getComponent(node);
     if (!component) {
       component = new this();
-      node.userData.MOZ_components.push(component);
+      node.userData._gltfComponents.push(component);
     }
 
     for (const key in props) {
@@ -90,7 +90,7 @@ class BaseComponent {
   }
 
   static deflate(node) {
-    const components = node.userData.MOZ_components;
+    const components = node.userData._gltfComponents;
     const componentIndex = components.findIndex(component => component.name === this.componentName);
     const component = components[componentIndex];
     if (component._object) {