@needle-tools/engine 3.8.0-alpha → 3.9.0-alpha

package/src/engine/engine_element_overlay.ts

@@ -1,5 +1,5 @@
 import { Context } from "./engine_setup";
-import { getParam, isMozillaXR } from "./engine_utils";
+import { getParam, isMobileDevice, isMozillaXR } from "./engine_utils";
 
 const debug = getParam("debugaroverlay");
 export const arContainerClassName = "ar";
@@ -21,6 +21,7 @@ export class AROverlayHandler {
 
     private _createdAROnlyElements: Array<any> = [];
     private _reparentedObjects: Array<{ el: Element, previousParent: HTMLElement | null }> = [];
+    private contentElement: HTMLElement | null = null;
 
     requestEndAR() {
         this.onRequestedEndAR();
@@ -30,13 +31,16 @@ export class AROverlayHandler {
         this.currentSession = session;
         this.arContainer = overlayContainer;
 
-        const arElements = context.domElement.shadowRoot!.querySelectorAll(`.${arContainerClassName}`);
-        arElements.forEach(el => {
-            if (!el) return;
-            if (el === this.arContainer) return;
-            this._reparentedObjects.push({ el: el, previousParent: el.parentElement });
-            this.arContainer?.appendChild(el);
-        });
+        if (isMozillaXR()) {
+            const arElements = context.domElement!.children;
+            for (let i = 0; i < arElements?.length; i++) {
+                const el = arElements[i];
+                if (!el) return;
+                if (el === this.arContainer) return;
+                this._reparentedObjects.push({ el: el, previousParent: el.parentElement });
+                this.arContainer?.appendChild(el);
+            }
+        }
 
         const quit_Elements = overlayContainer.getElementsByClassName(quitARClassName);
         if (!quit_Elements || quit_Elements.length <= 0) {
@@ -91,46 +95,20 @@ export class AROverlayHandler {
         }
     }
 
-    findOrCreateARContainer(element: HTMLElement): HTMLElement {
-        if(debug) console.log("findOrCreateARContainer");
-        // search in the needle-engine element
-        if (element.classList.contains(arContainerClassName)) {
-            if(debug) console.log("Found overlay container in needle-engine element");
-            return element;
-        }
-        if (element.shadowRoot) {
-            const el = element.shadowRoot!.querySelector(`.${arContainerClassName}`);
-            if (el) {
-                if(debug) console.log("Found overlay container in needle-engine element");
-                return el as HTMLElement;
-            };
-        }
 
-        // search in document as well; "ar" element could live outside needle-engine element
-        const arElements = document.getElementsByClassName(arContainerClassName);
-        if (arElements && arElements.length > 0){
-            if(debug) console.log("Found overlay container in document");
-            return arElements[0] as HTMLElement;
-        }
+    createOverlayContainer(needleEngineElement: HTMLElement): HTMLElement {
+        if (this.contentElement) return this.contentElement;
 
         if (debug)
-            console.log("No overlay container found in document - generating new ony");
-        const el = document.createElement("div");
-        el.classList.add(arContainerClassName);
-        el.style.cssText = `
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            visibility: visible;
-            z-index: 9999;
-            pointer-events: none;
-            // background: rgba(0,0,0,1);
-        `;
-        if(debug) this.createFallbackCloseARButton(element);
-        return this.appendElement(el, element) as HTMLElement;
+            console.log("Setup overlay container");
+
+        const contentElement = needleEngineElement.shadowRoot!.querySelector(".content") as HTMLElement;
+        this.contentElement = contentElement;
+
+        const overlaySlot = needleEngineElement.shadowRoot!.querySelector(".overlay-content");
+        if (overlaySlot) contentElement.appendChild(overlaySlot);
+        if (debug && !isMobileDevice()) this.createFallbackCloseARButton(contentElement);
+        return contentElement;
     }
 
     private onRequestedEndAR() {
@@ -147,30 +125,41 @@ export class AROverlayHandler {
     private createFallbackCloseARButton(element: HTMLElement) {
         const quitARSlot = document.createElement("slot");
         quitARSlot.setAttribute("name", "quit-ar");
-        this.appendElement(quitARSlot, element);      
-        if(debug) quitARSlot.addEventListener('click', () => console.log("Clicked fallback close button"));
-        quitARSlot.addEventListener('click', this.closeARCallback);  
+        this.appendElement(quitARSlot, element);
+        if (debug) quitARSlot.addEventListener('click', () => console.log("Clicked fallback close button"));
+        quitARSlot.addEventListener('click', this.closeARCallback);
         this._createdAROnlyElements.push(quitARSlot);
         // for mozilla XR reparenting we have to make sure the close button is clickable so we set it on the element directly
         // it's in general perhaps more safe to set it on the element to ensure it's clickable
         quitARSlot.style.pointerEvents = "auto";
 
+        // we need another container to make sure the button is always on top
+        const fixedButtonContainer = document.createElement("div");
+        fixedButtonContainer.style.cssText = `
+            position: fixed;
+            top: 0;
+            right: 0;
+            z-index: 600;
+            pointer-events: all;
+        `;
+        this.appendElement(fixedButtonContainer, quitARSlot);
+
         var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
         svg.classList.add("quit-ar-button");
         svg.setAttribute('width', "38px");
         svg.setAttribute('height', "38px");
-        quitARSlot.appendChild(svg);
+        fixedButtonContainer.appendChild(svg);
 
         var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
         path.setAttribute('d', 'M 12,12 L 28,28 M 28,12 12,28');
-        path.setAttribute('stroke', '#ddd');
+        path.setAttribute('stroke', '#aaa');
         path.setAttribute('stroke-width', "3px");
         svg.appendChild(path);
-        if(debug) console.log("Created fallback close button", svg, element);
+        if (debug) console.log("Created fallback close button", svg, element);
     }
 
     private appendElement(element: Element, parent: HTMLElement) {
-        if(parent.shadowRoot) return parent.shadowRoot.appendChild(element);
+        if (parent.shadowRoot) return parent.shadowRoot.appendChild(element);
         return parent.appendChild(element);
     }
 

package/src/engine/extensions/extensions.ts

@@ -15,7 +15,7 @@ import { NEEDLE_render_objects } from "./NEEDLE_render_objects";
 import { NEEDLE_progressive } from "./NEEDLE_progressive";
 import { InternalUsageTrackerPlugin } from "./usage_tracker";
 import { isUsageTrackingEnabled } from "../engine_assetdatabase";
-import { GLTFLoaderPlugin } from "three/examples/jsm/loaders/GLTFLoader";
+import { GLTFLoaderPlugin } from "three/examples/jsm/loaders/GLTFLoader.js";
 // import { GLTFAnimationPointerExtension } from "three/examples/jsm/loaders/GLTFLoaderAnimationPointer";
 
 // lazily import the GLTFAnimationPointerExtension in case it doesnt exist (e.g. using vanilla three)

package/src/engine-components/Renderer.ts

@@ -352,7 +352,7 @@ export class Renderer extends Behaviour implements IRenderer {
 
         if (this.isMultiMaterialObject(this.gameObject)) {
             for (const child of this.gameObject.children) {
-                this.context.addBeforeRenderListener(child, this.onBeforeRenderThree.bind(this));
+                this.context.addBeforeRenderListener(child, this.onBeforeRenderThree);
                 child.layers.mask = this.gameObject.layers.mask;
             }
 
@@ -376,14 +376,13 @@ export class Renderer extends Behaviour implements IRenderer {
         }
         // TODO: custom shader with sub materials
         else if (this.isMeshOrSkinnedMesh(this.gameObject)) {
-
-            this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThree.bind(this));
+            this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
 
             if (this.renderOrder !== undefined && this.renderOrder.length > 0)
                 this.gameObject.renderOrder = this.renderOrder[0];
         }
         else {
-            this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThree.bind(this));
+            this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
         }
 
         this.applyLightmapping();
@@ -415,7 +414,7 @@ export class Renderer extends Behaviour implements IRenderer {
                     const mat = this.gameObject["material"];
                     if (!mat?.isMeshBasicMaterial) {
                         if (this._lightmaps.length <= 0) {
-                            const rm = new RendererLightmap(this.gameObject, this.context);
+                            const rm = new RendererLightmap(this.gameObject as any as Mesh, this.context);
                             this._lightmaps.push(rm);
                         }
                         const rm = this._lightmaps[0];
@@ -434,16 +433,12 @@ export class Renderer extends Behaviour implements IRenderer {
                         if (!child["material"]?.isMeshBasicMaterial) {
                             let rm: RendererLightmap | undefined = undefined;
                             if (i >= this._lightmaps.length) {
-                                rm = new RendererLightmap(child as GameObject, this.context);
+                                rm = new RendererLightmap(child as Mesh, this.context);
                                 this._lightmaps.push(rm);
                             }
                             else
                                 rm = this._lightmaps[i];
                             rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
-                            // onBeforeRender is not called when the renderer is on a group
-                            // this is an issue we probably also need to handle for custom shaders
-                            // and need a better solution, but for now this fixes lightmaps for multimaterial objects
-                            rm.bindOnBeforeRender();
                         }
                     }
                 }
@@ -529,7 +524,6 @@ export class Renderer extends Behaviour implements IRenderer {
         }
 
         this.updateReflectionProbe();
-
     }
 
     onDisable() {
@@ -542,13 +536,22 @@ export class Renderer extends Behaviour implements IRenderer {
 
     onDestroy(): void {
         this.handles = null;
+
+        if (this.isMultiMaterialObject(this.gameObject)) {
+            for (const child of this.gameObject.children) {
+                this.context.removeBeforeRenderListener(child, this.onBeforeRenderThree);
+            }
+        }
+        else {
+            this.context.removeBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
+        }
+
     }
 
     applyStencil() {
         NEEDLE_render_objects.applyStencil(this);
     }
 
-
     onBeforeRender() {
         if (!this.gameObject) {
             return;
@@ -611,7 +614,9 @@ export class Renderer extends Behaviour implements IRenderer {
         }
 
     }
-    onBeforeRenderThree(_renderer, _scene, _camera, _geometry, material, _group) {
+
+
+    private onBeforeRenderThree = (_renderer, _scene, _camera, _geometry, material, _group) => {
 
         this.loadProgressiveTextures(material);
 
@@ -656,7 +661,7 @@ export class Renderer extends Behaviour implements IRenderer {
 
         if (this._lightmaps) {
             for (const lm of this._lightmaps) {
-                lm.onBeforeRenderThree(material);
+                lm.updateLightmapUniforms(material);
             }
         }
     }

package/src/engine-components/RendererLightmap.ts

@@ -1,5 +1,5 @@
 import { Behaviour, GameObject } from "./Component";
-import { Material, Mesh, ShaderMaterial, Texture, Vector4 } from "three";
+import { Material, Mesh, Shader, ShaderMaterial, Texture, Vector4 } from "three";
 import { Context, OnRenderCallback } from "../engine/engine_setup";
 import { getParam } from "../engine/engine_utils";
 
@@ -24,12 +24,12 @@ export class RendererLightmap {
     lightmapScaleOffset: THREE.Vector4 = new Vector4(1, 1, 0, 0);
 
     private context: Context;
-    private gameObject: GameObject;
+    private gameObject: Mesh;
     private lightmapTexture: Texture | null = null;
     private lightmapScaleOffsetUniform = { value: new Vector4(1, 1, 0, 0) };
     private lightmapUniform: { value: Texture | null } = { value: null };
 
-    constructor(gameObject: GameObject, context: Context) {
+    constructor(gameObject: Mesh, context: Context) {
         this.gameObject = gameObject;
         this.context = context;
     }
@@ -46,19 +46,21 @@ export class RendererLightmap {
         this.applyLightmap();
     }
 
-    bindOnBeforeRender() {
-        this.context.removeBeforeRenderListener(this.gameObject, this.onBeforeRenderThreeComplete);
-        this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThreeComplete);
+    updateLightmapUniforms(material: Material) {
+        const uniforms = material["uniforms"];
+        if (uniforms && uniforms.lightmap) {
+            this.lightmapScaleOffsetUniform.value = this.lightmapScaleOffset;
+            this.lightmapUniform.value = this.lightmapTexture;
+            uniforms.lightmap = this.lightmapUniform;
+            uniforms.lightmapScaleOffset = this.lightmapScaleOffsetUniform;
+        }
     }
 
-    private onBeforeRenderThreeComplete = (_renderer, _scene, _camera, _geometry, material, _group) => {
-        this.onBeforeRenderThree(material);
-    }
 
     private applyLightmap() {
-
         if (this.gameObject.type === "Object3D") {
-            // console.warn("Can not add lightmap. Is this object missing a renderer?");
+            if (debug)
+                console.warn("Can not add lightmap. Is this object missing a renderer?", this.gameObject.name);
             return;
         }
 
@@ -70,23 +72,27 @@ export class RendererLightmap {
         console.assert(this.gameObject.type === "Mesh", "Lightmap only works on meshes", this);
 
         const mesh = this.gameObject as unknown as Mesh;
-        // TODO: ensure uv2 exists
         if (!mesh.geometry.getAttribute("uv1"))
             mesh.geometry.setAttribute("uv1", mesh.geometry.getAttribute("uv"));
 
-        const mat: Material = this.gameObject["material"].clone();
-        this.gameObject["material"] = mat;
-
-        this.gameObject["material"].onBeforeCompile = (shader, _) => {
-            shader.lightMapUv = "uv1";
-            shader.uniforms.lightmap = this.lightmapUniform;
-            shader.uniforms.lightmapScaleOffset = this.lightmapScaleOffsetUniform;
-        };
-
+        if (Array.isArray(this.gameObject.material)) {
+            const mats: Material[] = this.gameObject.material;
+            for (let i = 0; i < mats.length; i++) {
+                const mat = mats[i];
+                const cloned = mat.clone();
+                mats[i] = cloned;
+                cloned.onBeforeCompile = this.onBeforeCompile;
+            }
+        }
+        else {
+            const mat: Material = this.gameObject.material.clone();
+            this.gameObject.material = mat;
+            this.gameObject.material.onBeforeCompile = this.onBeforeCompile;
+        }
 
         if (this.lightmapIndex >= 0) {
             const lightmap = this.lightmapTexture;
-            const mat = this.gameObject["material"];
+            const mat = this.gameObject.material as any;
             if (mat && lightmap) {
                 if (!mat.uniforms) mat.uniforms = {};
                 mat.lightMap = lightmap;
@@ -95,15 +101,14 @@ export class RendererLightmap {
         }
     }
 
-    onBeforeRenderThree(material: THREE.Material) {
-
-        const uniforms = material["uniforms"];
-        if (uniforms && uniforms.lightmap) {
-            this.lightmapScaleOffsetUniform.value = this.lightmapScaleOffset;
-            this.lightmapUniform.value = this.lightmapTexture;
-            uniforms.lightmap = this.lightmapUniform;
-            uniforms.lightmapScaleOffset = this.lightmapScaleOffsetUniform;
-        }
+    private onBeforeCompile = (shader: Shader, _) => {
+        if(debug) console.log("Lightmaps, before compile")
+        //@ts-ignore
+        shader.lightMapUv = "uv1";
+        this.lightmapScaleOffsetUniform.value = this.lightmapScaleOffset;
+        this.lightmapUniform.value = this.lightmapTexture;
+        shader.uniforms.lightmap = this.lightmapUniform;
+        shader.uniforms.lightmapScaleOffset = this.lightmapScaleOffsetUniform;
     }
 
     private setLightmapDebugMaterial() {

package/src/engine-components/codegen/components.ts

@@ -184,6 +184,7 @@ export { UIRootComponent } from "../ui/BaseUIComponent";
 export { UsageMarker } from "../Interactable";
 export { USDZExporter } from "../export/usdz/USDZExporter";
 export { USDZText } from "../export/usdz/extensions/USDZText";
+export { USDZUIExtension } from "../export/usdz/extensions/USDZUI";
 export { VariantAction } from "../export/usdz/extensions/behavior/Actions";
 export { VelocityOverLifetimeModule } from "../ParticleSystemModules";
 export { VerticalLayoutGroup } from "../ui/Layout";

package/src/engine-components/export/usdz/ThreeUSDZExporter.ts

@@ -657,7 +657,7 @@ function addResources( object, context: USDZExporterContext ) {
 
 	if ( geometry ) {
 
-		if ( material.isMeshStandardMaterial ) { // || material.isMeshBasicMaterial // TODO convert unlit to lit+emissive
+		if ( material.isMeshStandardMaterial || material.isMeshBasicMaterial )  { // TODO convert unlit to lit+emissive
 
 			const geometryFileName = 'geometries/Geometry_' + geometry.id + '.usd';
 
@@ -1124,7 +1124,7 @@ ${array.join( '' )}
 
 }
 
-function buildMaterial( material: MeshStandardMaterial, textures, quickLookCompatible = false ) {
+function buildMaterial( material: MeshBasicMaterial, textures, quickLookCompatible = false ) {
 
 	// https://graphics.pixar.com/usd/docs/UsdPreviewSurface-Proposal.html
 
@@ -1182,7 +1182,9 @@ function buildMaterial( material: MeshStandardMaterial, textures, quickLookCompa
 
 		const needsTextureScale = mapType !== 'normal' && (color && (color.r !== 1 || color.g !== 1 || color.b !== 1 || opacity !== 1)) || false;
 		const needsNormalScaleAndBias = mapType === 'normal';
-		const normalScaleValueString = (material.normalScale ? material.normalScale.x * 2 : 2).toFixed( PRECISION );
+		const normalScaleValueString = material instanceof MeshStandardMaterial
+			? (material.normalScale ? material.normalScale.x * 2 : 2).toFixed( PRECISION )
+			: "1";
 
 		return `
         ${needsTextureTransform ? `def Shader "Transform2d_${mapType}" (
@@ -1254,72 +1256,76 @@ function buildMaterial( material: MeshStandardMaterial, textures, quickLookCompa
 
 	}
 
-	if ( material.emissiveMap ) {
+	if ( material.aoMap ) {
 
-		inputs.push( `${pad}color3f inputs:emissiveColor.connect = </Materials/Material_${material.id}/Texture_${material.emissiveMap.id}_emissive.outputs:rgb>` );
+		inputs.push( `${pad}float inputs:occlusion.connect = </Materials/Material_${material.id}/Texture_${material.aoMap.id}_occlusion.outputs:r>` );
 
-		samplers.push( buildTexture( material.emissiveMap, 'emissive' ) );
+		samplers.push( buildTexture( material.aoMap, 'occlusion' ) );
+
+	}
 
-	} else if ( material.emissive?.getHex() > 0 ) {
+	if ( material.alphaMap ) {
+
+		inputs.push( `${pad}float inputs:opacity.connect = </Materials/Material_${material.id}/Texture_${material.alphaMap.id}_opacity.outputs:r>` );
+		inputs.push( `${pad}float inputs:opacityThreshold = 0.0001` );
 
-		inputs.push( `${pad}color3f inputs:emissiveColor = ${buildColor( material.emissive )}` );
+		samplers.push( buildTexture( material.alphaMap, 'opacity' ) );
 
 	} else {
-		
-		inputs.push( `${pad}color3f inputs:emissiveColor = (0, 0, 0)` );
+
+		inputs.push( `${pad}float inputs:opacity = ${effectiveOpacity}` );
 
 	}
 
-	if ( material.normalMap ) {
+	if ( material instanceof MeshStandardMaterial ) { 
 
-		inputs.push( `${pad}normal3f inputs:normal.connect = </Materials/Material_${material.id}/Texture_${material.normalMap.id}_normal.outputs:rgb>` );
+		if ( material.emissiveMap ) {
 
-		samplers.push( buildTexture( material.normalMap, 'normal' ) );
+			inputs.push( `${pad}color3f inputs:emissiveColor.connect = </Materials/Material_${material.id}/Texture_${material.emissiveMap.id}_emissive.outputs:rgb>` );
 
-	}
+			samplers.push( buildTexture( material.emissiveMap, 'emissive' ) );
 
-	if ( material.aoMap ) {
-
-		inputs.push( `${pad}float inputs:occlusion.connect = </Materials/Material_${material.id}/Texture_${material.aoMap.id}_occlusion.outputs:r>` );
+		} else if ( material.emissive?.getHex() > 0 ) {
 
-		samplers.push( buildTexture( material.aoMap, 'occlusion' ) );
+			inputs.push( `${pad}color3f inputs:emissiveColor = ${buildColor( material.emissive )}` );
 
-	}
+		} else {
+			
+			inputs.push( `${pad}color3f inputs:emissiveColor = (0, 0, 0)` );
 
-	if ( material.roughnessMap && material.roughness === 1 ) {
+		}
 
-		inputs.push( `${pad}float inputs:roughness.connect = </Materials/Material_${material.id}/Texture_${material.roughnessMap.id}_roughness.outputs:g>` );
+		if ( material.normalMap ) {
 
-		samplers.push( buildTexture( material.roughnessMap, 'roughness' ) );
+			inputs.push( `${pad}normal3f inputs:normal.connect = </Materials/Material_${material.id}/Texture_${material.normalMap.id}_normal.outputs:rgb>` );
 
-	} else {
+			samplers.push( buildTexture( material.normalMap, 'normal' ) );
 
-		inputs.push( `${pad}float inputs:roughness = ${material.roughness !== undefined ? material.roughness : 1 }` );
+		}
 
-	}
+		if ( material.roughnessMap && material.roughness === 1 ) {
 
-	if ( material.metalnessMap && material.metalness === 1 ) {
+			inputs.push( `${pad}float inputs:roughness.connect = </Materials/Material_${material.id}/Texture_${material.roughnessMap.id}_roughness.outputs:g>` );
 
-		inputs.push( `${pad}float inputs:metallic.connect = </Materials/Material_${material.id}/Texture_${material.metalnessMap.id}_metallic.outputs:b>` );
+			samplers.push( buildTexture( material.roughnessMap, 'roughness' ) );
 
-		samplers.push( buildTexture( material.metalnessMap, 'metallic' ) );
+		} else {
 
-	} else {
+			inputs.push( `${pad}float inputs:roughness = ${material.roughness !== undefined ? material.roughness : 1 }` );
 
-		inputs.push( `${pad}float inputs:metallic = ${material.metalness !== undefined ? material.metalness : 0 }` );
+		}
 
-	}
+		if ( material.metalnessMap && material.metalness === 1 ) {
 
-	if ( material.alphaMap ) {
+			inputs.push( `${pad}float inputs:metallic.connect = </Materials/Material_${material.id}/Texture_${material.metalnessMap.id}_metallic.outputs:b>` );
 
-		inputs.push( `${pad}float inputs:opacity.connect = </Materials/Material_${material.id}/Texture_${material.alphaMap.id}_opacity.outputs:r>` );
-		inputs.push( `${pad}float inputs:opacityThreshold = 0.0001` );
+			samplers.push( buildTexture( material.metalnessMap, 'metallic' ) );
 
-		samplers.push( buildTexture( material.alphaMap, 'opacity' ) );
+		} else {
 
-	} else {
+			inputs.push( `${pad}float inputs:metallic = ${material.metalness !== undefined ? material.metalness : 0 }` );
 
-		inputs.push( `${pad}float inputs:opacity = ${effectiveOpacity}` );
+		}
 
 	}
 

package/src/engine-components/export/usdz/USDZExporter.ts

@@ -16,6 +16,7 @@ import { hasProLicense } from "../../../engine/engine_license";
 import { BehaviorExtension } from "./extensions/behavior/Behaviour";
 import { AudioExtension } from "./extensions/behavior/AudioExtension";
 import { TextExtension } from "./extensions/USDZText";
+import { USDZUIExtension } from "./extensions/USDZUI";
 import { Renderer } from "../../Renderer"
 
 const debug = getParam("debugusdz");
@@ -97,6 +98,7 @@ export class USDZExporter extends Behaviour {
             this.extensions.push(new BehaviorExtension());
             this.extensions.push(new AudioExtension());
             this.extensions.push(new TextExtension());
+            this.extensions.push(new USDZUIExtension());
         }
     }
 

package/src/engine-components/export/usdz/extensions/USDZText.ts

@@ -146,8 +146,13 @@ export class TextExtension implements IUSDExporterExtension {
         return "text";
     }
 
-    onExportObject(object: Object3D, model: USDObject, _context: USDZExporterContext) {
+    // HACK we should clean this up, text export has moved to USDZUI.ts and is
+    // integrated into the hierarchy now
+    onExportObject(_object: Object3D, _model: USDObject, _context: USDZExporterContext) {
 
+        return;
+
+        /*
         const text = GameObject.getComponent(object, Text);
         if (text) {
             const rt = GameObject.getComponent(object, RectTransform);
@@ -186,6 +191,41 @@ export class TextExtension implements IUSDExporterExtension {
                 textObj.writeTo(undefined, writer);
             });
         }
+        */
+    }
+
+    exportText(object: Object3D, newModel: USDObject, _context: USDZExporterContext) {
+
+        const text = GameObject.getComponent(object, Text);
+        if (!text) return;
+
+        const rt = GameObject.getComponent(object, RectTransform);
+        let width = 100;
+        let height = 100;
+        if (rt) {
+            width = rt.width;
+            height = rt.height;
+        }
+
+        newModel.matrix = rotateYAxisMatrix.clone();
+        if (rt) // Not ideal but works for now:
+            newModel.matrix.premultiply(invertX);
+
+        const color = new Color().copySRGBToLinear(text.color);
+        newModel.material = new MeshStandardMaterial({ color: color, emissive: color });
+
+        newModel.addEventListener("serialize", (writer: USDWriter, _context: USDZExporterContext) => {
+            let txt = text.text;
+            txt = txt.replace(/\n/g, "\\n");
+            const textObj = TextBuilder.multiLine(txt, width, height, HorizontalAlignment.center, VerticalAlignment.bottom, TextWrapMode.flowing);
+            this.setTextAlignment(textObj, text.alignment);
+            this.setOverflow(textObj, text);
+            if (newModel.material)
+                textObj.material = newModel.material;
+            textObj.pointSize = this.convertToTextSize(text.fontSize);
+            textObj.depth = .001;
+            textObj.writeTo(undefined, writer);
+        });
     }
 
     private convertToTextSize(pixel: number) {