lunchboxjs 0.1.4004 → 0.1.4010

package/README.md

@@ -0,0 +1,3 @@
+Custom Vue 3 renderer for ThreeJS.
+
+[Docs](//docs.lunchboxjs.com)

package/dist/lunchboxjs.js

@@ -105,10 +105,13 @@
             // These should match the Lunchbox.WrapperProps interface
             background: String,
             cameraArgs: Array,
+            cameraLook: Array,
+            cameraLookAt: Array,
             cameraPosition: Array,
             dpr: Number,
             ortho: Boolean,
             orthographic: Boolean,
+            rendererArguments: Object,
             rendererProperties: Object,
             shadow: [Boolean, Object],
             transparent: Boolean,
@@ -138,12 +141,11 @@
                 if (!renderer) {
                     // build renderer args
                     const rendererArgs = {
+                        alpha: props.transparent,
                         antialias: true,
                         canvas: canvas.value.domElement,
+                        ...(props.rendererArguments ?? {}),
                     };
-                    if (props.transparent) {
-                        rendererArgs.alpha = true;
-                    }
                     // create new renderer
                     ensureRenderer.value = createNode({
                         type: 'WebGLRenderer',
@@ -181,7 +183,6 @@
                     // the user has initialized the renderer, so anything depending
                     // on the renderer can execute
                     rendererReady.value = true;
-                    return;
                 }
                 // CAMERA
                 // ====================
@@ -194,7 +195,6 @@
                 if (!camera) {
                     // create ortho camera
                     if (props.ortho || props.orthographic) {
-                        // const size: Vector2 = new Vector2()
                         ensuredCamera.value = createNode({
                             props: { args: props.cameraArgs ?? [] },
                             type: 'OrthographicCamera',
@@ -216,9 +216,17 @@
                 else {
                     cameraReady.value = true;
                 }
+                if (!camera.instance) {
+                    throw new Error('Error creating camera.');
+                }
                 // move camera if needed
                 if (camera && props.cameraPosition) {
-                    camera.instance?.position.set(...props.cameraPosition);
+                    camera.instance.position.set(...props.cameraPosition);
+                }
+                // angle camera if needed
+                if (camera && (props.cameraLookAt || props.cameraLook)) {
+                    const source = (props.cameraLookAt || props.cameraLook);
+                    camera.instance.lookAt(...source);
                 }
                 // SCENE
                 // ====================
@@ -241,11 +249,23 @@
                 else {
                     throw new Error('missing renderer');
                 }
+                // CALLBACK PREP
+                // ====================
+                const app = vue.getCurrentInstance().appContext.app;
+                // START
+                // ====================
+                for (let startCallback of startCallbacks) {
+                    startCallback({
+                        app,
+                        camera: camera.instance,
+                        renderer: renderer.instance,
+                        scene: scene.instance,
+                    });
+                }
                 // KICK UPDATE
                 // ====================
-                // console.log(scene)
                 update({
-                    app: vue.getCurrentInstance().appContext.app,
+                    app,
                     camera: camera.instance,
                     renderer: renderer.instance,
                     scene: scene.instance,
@@ -276,21 +296,6 @@
         },
     };
 
-    const catalogue = {};
-
-    const lunchboxDomComponentNames = [
-        'canvas',
-        'div',
-        'LunchboxWrapper',
-    ];
-    // component creation utility
-    const createComponent$1 = (tag) => vue.defineComponent({
-        inheritAttrs: false,
-        name: tag,
-        setup(props, context) {
-            return () => vue.h(tag, context.attrs, context.slots?.default?.() || []);
-        },
-    });
     // list of all components to register out of the box
     const autoGeneratedComponents = [
         // ThreeJS basics
@@ -403,21 +408,11 @@
         'arrayCamera',
         // renderers
         'webGLRenderer',
-    ].map(createComponent$1).reduce((acc, curr) => {
-        acc[curr.name] = curr;
-        return acc;
-    });
-    const components = {
-        ...autoGeneratedComponents,
-        'Lunchbox': LunchboxWrapper,
-        // Gltf,
-    };
-    // console.log(components, Gltf)
-    /*
-    // List copied from r3f
-    // https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/three-types.ts
+        /*
+        // List copied from r3f:
+        // https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/three-types.ts
 
-    // NOT IMPLEMENTED:
+        // NOT IMPLEMENTED (can be added via Extend - docs.lunchboxjs.com/components/extend/):
         audioListener: AudioListenerProps
         positionalAudio: PositionalAudioProps
 
@@ -465,6 +460,27 @@
         fogExp2: FogExp2Props
         shape: ShapeProps
     */
+    ];
+
+    const catalogue = {};
+
+    const lunchboxDomComponentNames = ['canvas', 'div', 'LunchboxWrapper'];
+    // component creation utility
+    const createComponent$1 = (tag) => vue.defineComponent({
+        inheritAttrs: false,
+        name: tag,
+        setup(props, context) {
+            return () => vue.h(tag, context.attrs, context.slots?.default?.() || []);
+        },
+    });
+    autoGeneratedComponents.map(createComponent$1).reduce((acc, curr) => {
+        acc[curr.name] = curr;
+        return acc;
+    });
+    const components = {
+        ...autoGeneratedComponents,
+        Lunchbox: LunchboxWrapper,
+    };
 
     function find(target) {
         target = vue.isRef(target) ? target.value : target;
@@ -1258,6 +1274,16 @@
     const rootNode = new MiniDom.RendererRootNode();
     rootNode.minidomType = 'RootNode';
 
+    const startCallbacks = [];
+    const onStart = (cb, index = Infinity) => {
+        if (index === Infinity) {
+            startCallbacks.push(cb);
+        }
+        else {
+            startCallbacks.splice(index, 0, cb);
+        }
+    };
+
     let frameID;
     const beforeRender = [];
     const afterRender = [];
@@ -1301,6 +1327,15 @@
             beforeRender.splice(index, 0, cb);
         }
     };
+    const offBeforeRender = (cb) => {
+        if (isFinite(cb)) {
+            beforeRender.splice(cb, 1);
+        }
+        else {
+            const idx = beforeRender.findIndex((v) => v == cb);
+            beforeRender.splice(idx, 1);
+        }
+    };
     const onAfterRender = (cb, index = Infinity) => {
         if (index === Infinity) {
             afterRender.push(cb);
@@ -1309,6 +1344,15 @@
             afterRender.splice(index, 0, cb);
         }
     };
+    const offAfterRender = (cb) => {
+        if (isFinite(cb)) {
+            afterRender.splice(cb, 1);
+        }
+        else {
+            const idx = afterRender.findIndex((v) => v == cb);
+            afterRender.splice(idx, 1);
+        }
+    };
     const cancelUpdate = () => {
         if (frameID)
             cancelAnimationFrame(frameID);
@@ -1662,9 +1706,51 @@
         inputActive,
         mousePos,
     };
+    /** The current camera. Often easier to use `useCamera` instead of this. */
     const camera = vue.computed(() => ensuredCamera.value?.instance ?? null);
+    /** Run a function using the current camera when it's present. */
+    function useCamera(callback, once = true) {
+        let destroy;
+        destroy = vue.watch(camera, (newVal) => {
+            if (!newVal)
+                return;
+            // TODO: better fix than `any`?
+            callback(newVal);
+            if (once) {
+                destroy?.();
+            }
+        }, { immediate: true });
+    }
+    /** The current renderer. Often easier to use `useRenderer` instead of this. */
     const renderer = vue.computed(() => ensureRenderer.value?.instance ?? null);
+    /** Run a function using the current renderer when it's present. */
+    function useRenderer(callback, once = true) {
+        let destroy;
+        destroy = vue.watch(renderer, (newVal) => {
+            if (!newVal)
+                return;
+            // TODO: better fix than `any`?
+            callback(newVal);
+            if (once) {
+                destroy?.();
+            }
+        }, { immediate: true });
+    }
+    /** The current scene. Often easier to use `useScene` instead of this. */
     const scene = vue.computed(() => ensuredScene.value.instance);
+    /** Run a function using the current scene when it's present. */
+    function useScene(callback, once = true) {
+        let destroy;
+        destroy = vue.watch(scene, (newVal) => {
+            if (!newVal)
+                return;
+            // TODO: better fix than `any`?
+            callback(newVal);
+            if (once) {
+                destroy?.();
+            }
+        }, { immediate: true });
+    }
     // CUSTOM RENDER SUPPORT
     // ====================
     let app = null;
@@ -1736,11 +1822,17 @@
     exports.createApp = createApp;
     exports.find = find;
     exports.globals = globals;
+    exports.offAfterRender = offAfterRender;
+    exports.offBeforeRender = offBeforeRender;
     exports.onAfterRender = onAfterRender;
     exports.onBeforeRender = onBeforeRender;
+    exports.onStart = onStart;
     exports.renderer = renderer;
     exports.scene = scene;
     exports.setCustomRender = setCustomRender;
+    exports.useCamera = useCamera;
+    exports.useRenderer = useRenderer;
+    exports.useScene = useScene;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 

package/dist/lunchboxjs.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("three"),require("lodash")):"function"==typeof define&&define.amd?define(["exports","vue","three","lodash"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).LunchboxRenderer={},e.vue,e.three,e.lodash)}(this,(function(e,t,n,r){"use strict";function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var a=o(n);const s=[],i=(e,n)=>{const r=I.value?.instance,o=K.value.instance,a=F.value;if(!r?.domElement||!o||!a)return;const s=(e=e??window.innerWidth)/(n=n??window.innerHeight);if("perspectivecamera"===a.type?.toLowerCase()){const e=a.instance;e.aspect=s,e.updateProjectionMatrix()}else if("orthographiccamera"===a.type?.toLowerCase()){const t=a.instance,r=n/e;t.top=10*r,t.bottom=10*-r,t.right=10,t.left=-10,t.updateProjectionMatrix()}else console.log("TODO: non-ortho or perspective camera");r.setSize(e,n),o&&a.instance&&r.render(t.toRaw(o),t.toRaw(a.instance))},c=e=>({position:e,top:0,right:0,bottom:0,left:0,width:"100%",height:"100%"}),d={name:"Lunchbox",props:{background:String,cameraArgs:Array,cameraPosition:Array,dpr:Number,ortho:Boolean,orthographic:Boolean,rendererProperties:Object,shadow:[Boolean,Object],transparent:Boolean},setup(e,o){const a=t.ref(),s=t.ref(!0),d=t.ref(e.dpr??-1),u=t.ref();let l,p,m;return t.onMounted((()=>{if(!a.value)throw new Error("missing canvas");if(l=N(["WebGLRenderer"]),l)return s.value=!1,void(W.value=!0);{const t={antialias:!0,canvas:a.value.domElement};e.transparent&&(t.alpha=!0),I.value=v({type:"WebGLRenderer",uuid:$,props:{args:[t]}}),W.value=!0;const n=I,o={shadow:e.shadow};n.value.instance&&o?.shadow&&(n.value.instance.shadowMap.enabled=!0,"object"==typeof o.shadow&&(n.value.instance.shadowMap.type=o.shadow.type)),e.rendererProperties&&Object.keys(e.rendererProperties).forEach((t=>{r.set(n.value,t,e.rendererProperties[t])})),l=n.value}if(p=N(["PerspectiveCamera","OrthographicCamera"]),p?D.value=!0:(e.ortho||e.orthographic?F.value=v({props:{args:e.cameraArgs??[]},type:"OrthographicCamera",uuid:k}):F.value=v({props:{args:e.cameraArgs??[45,.5625,1,1e3]},type:"PerspectiveCamera",uuid:k}),D.value=!0,p=F.value),p&&e.cameraPosition&&p.instance?.position.set(...e.cameraPosition),m=K.value,m&&m.instance&&e.background&&(m.instance.background=new n.Color(e.background)),-1===d.value&&(d.value=window.devicePixelRatio),!l?.instance)throw new Error("missing renderer");l.instance.setPixelRatio(d.value),me.dpr.value=d.value,((e,t,n)=>{const r=e.value?.domElement;if(!r)throw new Error("missing container");i();const o=new ResizeObserver((([e])=>{i()}));r&&o.observe(r),n((()=>{t&&o.unobserve(t)}))})(u,l.instance.domElement,t.onBeforeUnmount),oe({app:t.getCurrentInstance().appContext.app,camera:p.instance,renderer:l.instance,scene:m.instance})})),t.onBeforeUnmount((()=>{se()})),()=>[o.slots.default?.()??null,t.h("div",{style:c("absolute"),ref:u},[s.value?t.h("canvas",{style:c("fixed"),class:"lunchbox-canvas",ref:a}):null])]}},u={},l=["canvas","div","LunchboxWrapper"],p={...["mesh","instancedMesh","scene","sprite","object3D","instancedBufferGeometry","bufferGeometry","boxBufferGeometry","circleBufferGeometry","coneBufferGeometry","cylinderBufferGeometry","dodecahedronBufferGeometry","extrudeBufferGeometry","icosahedronBufferGeometry","latheBufferGeometry","octahedronBufferGeometry","parametricBufferGeometry","planeBufferGeometry","polyhedronBufferGeometry","ringBufferGeometry","shapeBufferGeometry","sphereBufferGeometry","tetrahedronBufferGeometry","textBufferGeometry","torusBufferGeometry","torusKnotBufferGeometry","tubeBufferGeometry","wireframeGeometry","parametricGeometry","tetrahedronGeometry","octahedronGeometry","icosahedronGeometry","dodecahedronGeometry","polyhedronGeometry","tubeGeometry","torusKnotGeometry","torusGeometry","sphereGeometry","ringGeometry","planeGeometry","latheGeometry","shapeGeometry","extrudeGeometry","edgesGeometry","coneGeometry","cylinderGeometry","circleGeometry","boxGeometry","material","shadowMaterial","spriteMaterial","rawShaderMaterial","shaderMaterial","pointsMaterial","meshPhysicalMaterial","meshStandardMaterial","meshPhongMaterial","meshToonMaterial","meshNormalMaterial","meshLambertMaterial","meshDepthMaterial","meshDistanceMaterial","meshBasicMaterial","meshMatcapMaterial","lineDashedMaterial","lineBasicMaterial","light","spotLightShadow","spotLight","pointLight","rectAreaLight","hemisphereLight","directionalLightShadow","directionalLight","ambientLight","lightShadow","ambientLightProbe","hemisphereLightProbe","lightProbe","texture","videoTexture","dataTexture","dataTexture3D","compressedTexture","cubeTexture","canvasTexture","depthTexture","textureLoader","group","catmullRomCurve3","points","cameraHelper","camera","perspectiveCamera","orthographicCamera","cubeCamera","arrayCamera","webGLRenderer"].map((e=>t.defineComponent({inheritAttrs:!1,name:e,setup:(n,r)=>()=>t.h(e,r.attrs,r.slots?.default?.()||[])}))).reduce(((e,t)=>(e[t.name]=t,e))),Lunchbox:d};const m=e=>e?.$el&&e?.$el?.hasOwnProperty?.("instance"),h=e=>{if("domMeta"===e?.metaType)return!0;const t="string"==typeof e?e:e?.type;return l.includes(t??"")},f=e=>"standardMeta"===e?.metaType,y=e=>e.isLunchboxRootNode;function v(e={},t={}){const n={attached:e.attached??[],attachedArray:e.attachedArray??{},instance:e.instance??null},r=new J.RendererStandardNode({...e,...n,metaType:"standardMeta"});return!r.type||y(r)||r.instance||(r.instance=function(e){if(!e.type)return null;const t=e.type[0].toUpperCase()+e.type.slice(1),n=u[e.type]||a[t];if(!n)throw`${t} is not part of the THREE namespace! Did you forget to extend? import {extend} from 'lunchbox'; extend({app, YourComponent, ...})`;const r=(e.props.args??[]).map((t=>function({node:e,prop:t}){const n="string"==typeof t&&t.startsWith("$attachedArray"),r=function({node:e,prop:t}){if("string"==typeof t&&t.startsWith("$attachedArray"))return e.attachedArray[t.replace("$attachedArray.","")];if("string"==typeof t&&t.startsWith("$attached"))return e.attached[t.replace("$attached.","")];return t}({node:e,prop:t});return Array.isArray(r)&&n?r:[r]}({node:e,prop:t})));let o=[];r.forEach((e=>{o=o.concat(e)}));return new n(...o)}({...r,props:{...r.props,...t}})),"scene"===r.type&&(K.value=r),r}const g=[],b=t.ref(!1);function x({node:e,key:n,value:r}){var o;if(e.eventListeners[n]||(e.eventListeners[n]=[]),e.eventListenerRemoveFunctions[n]||(e.eventListenerRemoveFunctions[n]=[]),e.eventListeners[n].push(r),R.includes(n)&&(_.value,e.instance&&!g.includes(e)&&(o=e,g.push(o),e.eventListenerRemoveFunctions[n].push((()=>(e=>{const t=g.indexOf(e);-1!==t&&g.splice(t,1)})(e))))),"onClick"===n||"onPointerDown"===n||"onPointerUp"===n){const r=t.watch((()=>b.value),(t=>{const r=P.map((e=>e.element)).findIndex((t=>t.instance&&t.instance.uuid===e.instance?.uuid));-1!==r&&((!t||"onClick"!==n&&"onPointerDown"!==n)&&(t||"onPointerUp"!==n)||e.eventListeners[n].forEach((e=>{e({intersection:P[r].intersection})})))}));e.eventListenerRemoveFunctions[n].push(r)}return e}const R=["onClick","onPointerUp","onPointerDown","onPointerOver","onPointerOut","onPointerEnter","onPointerLeave","onPointerMove"];let w,C,E;const A=t.ref({x:1/0,y:1/0});let L=!1;let P=[];const M=()=>{const e=_.value?.instance,t=F.value?.instance;if(!e||!t)return;e.setFromCamera(me.mousePos.value,t);const n=e.intersectObjects(g.map((e=>e.instance)));let r=[],o=[],a=[];r=P.map((e=>e.intersection)),n?.forEach((e=>{const t=P.findIndex((t=>t.intersection.object===e.object));if(-1===t){const t=g.find((t=>t.instance?.uuid===e.object.uuid));t&&o.push({element:t,intersection:e})}else{const t=g.find((t=>t.instance?.uuid===e.object.uuid));t&&a.push({element:t,intersection:e})}const n=r.findIndex((t=>t.object.uuid===e.object.uuid));-1!==n&&r.splice(n,1)}));const s=r.map((e=>({element:g.find((t=>t.instance?.uuid===e.object.uuid)),intersection:e})));o.forEach((({element:e,intersection:t})=>{B({element:e,eventKeys:["onPointerEnter"],intersection:t})})),a.forEach((({element:e,intersection:t})=>{B({element:e,eventKeys:["onPointerOver","onPointerMove"],intersection:t})})),s.forEach((({element:e,intersection:t})=>{B({element:e,eventKeys:["onPointerLeave","onPointerOut"],intersection:t})})),P=[].concat(o,a)},B=({element:e,eventKeys:t,intersection:n})=>{e&&t.forEach((t=>{e.eventListeners[t]&&e.eventListeners[t].forEach((e=>{e({intersection:n})}))}))};function G(t={}){return e.lunchboxTree||(e.lunchboxTree=new J.RendererRootNode(t)),e.lunchboxTree}function N(e){Array.isArray(e)||(e=[e]);for(let t of e)if(O[t])return O[t];for(let t of e){const e=T[t]||s.find((e=>e.type?.toLowerCase()===t.toLowerCase()));if(e){const n=e;return T[t]=n,n}}return null}e.lunchboxTree=void 0;const T=t.reactive({}),O=t.reactive({});function j(e,n,r={},o=null){Array.isArray(e)||(e=[e]);for(let t of e)T[t]||(T[t]=null),O[t]||(O[t]=null);return t.computed({get(){const t=N(e);if(t)return t;const a=G(),s=v({type:e[0],uuid:n,props:r});return a.addChild(s),T[e[0]]=s,o&&o(s),s},set(e){const t=e.type??"",n=t[0].toUpperCase()+t.slice(1);O[n]=e}})}const k="FALLBACK_CAMERA",S=j(["PerspectiveCamera","OrthographicCamera"],k,{args:[45,.5625,1,1e3]}),D=t.ref(!1),F=t.computed({get:()=>D.value?S.value:null,set(e){const t=e.type??"",n=t[0].toUpperCase()+t.slice(1);O[n]=e}}),$="FALLBACK_RENDERER",U=j(["WebGLRenderer"],$,{}),W=t.ref(!1),I=t.computed({get:()=>W.value?U.value:null,set(e){const t=e.type??"",n=t[0].toUpperCase()+t.slice(1);O[n]=e}}),K=j("Scene","FALLBACK_SCENE"),_=j("Raycaster","AUTO_RAYCASTER",{},(e=>(e=>{if(!e.instance)return;let n=null;n=t.watch((()=>I.value),(e=>{e?.instance&&(L||(w=t=>{const n=(e.instance.domElement.width??1)/me.dpr.value,r=(e.instance.domElement.height??1)/me.dpr.value;A.value.x=t.offsetX/n*2-1,A.value.y=-t.offsetY/r*2+1},C=()=>b.value=!0,E=()=>b.value=!1,e.instance.domElement.addEventListener("mousemove",w),e.instance.domElement.addEventListener("mousedown",C),e.instance.domElement.addEventListener("mouseup",E),ae(M),L=!0),n&&n())}),{immediate:!0})})(e))),V=e=>t.defineComponent({inheritAttrs:!1,name:e,render(){return t.h(e,this.$attrs,this.$slots?.default?.()||[])}});var q,z=new Uint8Array(16);function H(){if(!q&&!(q="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return q(z)}var Y=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;function X(e){return"string"==typeof e&&Y.test(e)}for(var J,Q=[],Z=0;Z<256;++Z)Q.push((Z+256).toString(16).substr(1));function ee(e,t,n){var r=(e=e||{}).random||(e.rng||H)();if(r[6]=15&r[6]|64,r[8]=63&r[8]|128,t){n=n||0;for(var o=0;o<16;++o)t[n+o]=r[o];return t}return function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=(Q[e[t+0]]+Q[e[t+1]]+Q[e[t+2]]+Q[e[t+3]]+"-"+Q[e[t+4]]+Q[e[t+5]]+"-"+Q[e[t+6]]+Q[e[t+7]]+"-"+Q[e[t+8]]+Q[e[t+9]]+"-"+Q[e[t+10]]+Q[e[t+11]]+Q[e[t+12]]+Q[e[t+13]]+Q[e[t+14]]+Q[e[t+15]]).toLowerCase();if(!X(n))throw TypeError("Stringified UUID is invalid");return n}(r)}!function(e){e.BaseNode=class{constructor(e={},t){this.parentNode=e?.parentNode??t??null,this.minidomType="MinidomBaseNode",this.uuid=e?.uuid??ee(),s.push(this)}uuid;parentNode;get nextSibling(){if(!this.parentNode)return null;const e=this.parentNode.children.findIndex((e=>e.uuid===this.uuid));return-1!==e&&e<this.parentNode.children.length-1?this.parentNode.children[e+1]:null}insertBefore(e,t){e.removeAsChildFromAnyParents(),e.parentNode=this;const n=this.children.findIndex((e=>e.uuid===t?.uuid));-1!==n?this.children.splice(n,0,e):this.children.push(e)}removeChild(e){const t=this.children.findIndex((t=>t?.uuid===e?.uuid));-1!==t&&this.children.splice(t,1)}children=[];addChild(e){return e&&(e.removeAsChildFromAnyParents(),e.parentNode=this,this.insertBefore(e,null)),this}getPath(){const e=[];let t=this;for(;t;)e.unshift(t),t=t.parentNode;return e}drop(){this.parentNode=null,this.removeAsChildFromAnyParents()}walk(e){const t=[this,...this.children],n=[];let r=!0;for(;t.length&&r;){const o=t.shift();if(o){if(n.includes(o))continue;n.push(o),t.push(...o.children.filter((e=>!n.includes(e)))),r=e(o)}else r=!1}}minidomType;removeAsChildFromAnyParents(){s.forEach((e=>e.removeChild(this)))}};class t extends e.BaseNode{constructor(e={},t){super(e,t),this.minidomType="RendererNode",this.eventListeners={},this.eventListenerRemoveFunctions={},this.name=e.name??"",this.metaType=e.metaType??"standardMeta",this.props=e.props??[],this.type=e.type??""}eventListeners;eventListenerRemoveFunctions;name;metaType;props;type;drop(){super.drop(),Object.keys(this.eventListenerRemoveFunctions).forEach((e=>{this.eventListenerRemoveFunctions[e].forEach((e=>e()))}))}}e.RendererBaseNode=t;class n extends e.RendererBaseNode{constructor(e={},t){super(e,t),this.domElement=e.domElement??document.createElement("div")}domElement;isLunchboxRootNode=!0}e.RendererRootNode=n;class r extends e.RendererBaseNode{constructor(e={},t){super(e,t),this.text=e.text??""}text}e.RendererCommentNode=r;class o extends e.RendererBaseNode{constructor(e={},t){super(e,t),this.domElement=e.domElement??document.createElement("div")}domElement}e.RendererDomNode=o;class a extends e.RendererBaseNode{constructor(e={},t){super(e,t),this.text=e.text??""}text}e.RendererTextNode=a;class i extends e.RendererBaseNode{constructor(e={},t){super(e,t),this.attached=e.attached??[],this.attachedArray=e.attachedArray??{},this.instance=e.instance??null}attached;attachedArray;instance}e.RendererStandardNode=i}(J||(J={}));let te;(new J.RendererRootNode).minidomType="RootNode";const ne=[],re=[],oe=e=>{te=requestAnimationFrame((()=>oe({app:e.app,renderer:I.value?.instance,scene:K.value.instance,camera:F.value?.instance})));const{app:n,renderer:r,scene:o,camera:a}=e;ne.forEach((t=>{t&&t(e)})),r&&o&&a&&(n.customRender?n.customRender(e):r.render(t.toRaw(o),t.toRaw(a))),re.forEach((t=>{t&&t(e)}))},ae=(e,t=1/0)=>{t===1/0?ne.push(e):ne.splice(t,0,e)},se=()=>{te&&cancelAnimationFrame(te)};const ie={x:"position.x",y:"position.y",z:"position.z"},ce=["","parameters"],de=["args","attach","attachArray","key","onAdded","ref","src"],ue=["geometry","material"];function le(e,t,n,r){const o=r??e.instance,a=t.instance;e.props.attach===n&&(t.attached={[n]:o,...t.attached||{}},a[n]=r??e.instance),e.props.attachArray===n&&(t.attachedArray[e.props.attachArray]||(t.attachedArray[e.props.attachArray]=[]),t.attachedArray[e.props.attachArray].push(o),a[n]=[a[n]])}const pe={createElement:(e,t,n,r)=>{const o={type:e};r&&(o.props=r);if(h(e)){const e=function(e={}){const t={domElement:document.createElement(e.type??"")};return new J.RendererDomNode({...t,...e,metaType:"domMeta"})}(o);return e}const a=v(o);return ue.forEach((t=>{e.toLowerCase().endsWith(t)&&(a.props.attach=t)})),a},createText:e=>function(e={}){const t={text:e.text??""};return new J.RendererTextNode({...e,...t,metaType:"textMeta"})}({text:e}),createComment:e=>function(e={}){const t={text:e.text??""};return new J.RendererCommentNode({...t,...e,metaType:"commentMeta"})}({text:e}),insert:(e,t,n)=>{let r=t??G();if(r.insertBefore(e,n),"commentMeta"!==e.metaType&&"textMeta"!==e.metaType&&(h(e)&&(h(t)||y(t))&&t.domElement.appendChild(e.domElement),f(e))){let n=r.metaType;if("textMeta"===n||"commentMeta"===n){const e=r.getPath();for(let t=e.length-1;t>=0;t--)if("textMeta"!==e[t].metaType&&"commentMeta"!==e[t].metaType){r=e[t];break}}if("standardMeta"===e.metaType&&"scene"!==e.type&&y(r)){const t=K.value;t.instance&&e&&t.addChild(e),e.instance&&e.instance.isObject3D&&t.instance&&t!==e&&t.instance.add(e.instance)}else f(e)&&e.instance?.isObject3D&&f(r)&&r.instance?.isObject3D&&r.instance?.add?.(e.instance);if(e?.props?.attach&&f(t)&&t?.instance){e.type?.toLowerCase().endsWith("loader")&&e.props.src&&(e.props.attach||e.props.attachArray)?function(e,t){const n=e.instance;if(t.attached=t.attached||{},t.attachedArray=t.attachedArray||{},!e.props.attach)return;if("textureloader"===e.type?.toLowerCase()){const r=n.load(e.props.src);le(e,t,e.props.attach,r)}else n.load(e.props.src,(n=>{le(e,t,e.props.attach,n)}),null,(e=>{throw new Error(e)}))}(e,t):le(e,t,e.props.attach)}e.props?.onAdded&&e.props.onAdded({instance:e.instance})}},nextSibling(e){const t=e.nextSibling;return t||null},parentNode(e){const t=e.parentNode;return t||null},patchProp(e,t,n,o){h(e)?"style"===t?Object.keys(o).forEach((t=>{e.domElement.style[t]=o[t]})):e.domElement.setAttribute(t,o):y(e)||t.startsWith("$")||function({node:e,key:t,value:n}){if((e=>["onClick","onContextMenu","onDoubleClick","onPointerUp","onPointerDown","onPointerOver","onPointerOut","onPointerEnter","onPointerLeave","onPointerMove","onWheel"].includes(e))(t))return x({node:e,key:t,value:n});if(de.includes(t))return e;if(!f(e))return e;if("string"==typeof n&&n.startsWith("$attached")){const t=n.replace("$attached.","");n=r.get(e.attached,t,null)}const o=e.instance;if(!o)return e;const a=t.replace(/-/g,".");let s,i=ie[a]||a;for(let e=0;e<ce.length&&!s;e++){const t=[ce[e],i].filter(Boolean).join(".");s=s=r.get(o,t)}if(s&&r.isNumber(n)&&s.setScalar)s.setScalar(n);else if(s&&s.set){const e=Array.isArray(n)?n:[n];o[i].set(...e)}else"function"==typeof s?s.bind(e.instance)(...n):void 0!==r.get(o,i,void 0)?r.set(o,i,""===n||n):console.log(`No property ${i} found on ${o}`);const c=o?.texture?.type||o?.type;if("string"==typeof c){const e=c.toLowerCase();switch(!0){case e.includes("material"):o.needsUpdate=!0;break;case e.includes("camera")&&o.updateProjectionMatrix:o.updateProjectionMatrix()}}}({node:e,key:t,value:o})},remove:e=>{if(!e)return;const t=Object.keys(O),n=[];e.walk((e=>(n.push(e),!0))),n.forEach((e=>{const n=t.find((t=>O[t]?.uuid===e.uuid));if(n&&(O[n]=null),f(e)){e.instance?.removeFromParent?.();const t="scene"!==e.type&&e.instance?.dispose;t&&t.bind(e.instance)(),e.instance=null}e.drop();const r=s.findIndex((t=>t.uuid===e.uuid));-1!==r&&s.splice(r,1)}))},setElementText(){},setText(){}},me={dpr:t.ref(1),inputActive:b,mousePos:A},he=t.computed((()=>F.value?.instance??null)),fe=t.computed((()=>I.value?.instance??null)),ye=t.computed((()=>K.value.instance));let ve=null,ge=null;e.camera=he,e.clearCustomRender=()=>{ve?ve.clearCustomRender():ge=null},e.createApp=e=>{ve=t.createRenderer(pe).createApp(e),Object.keys(p).forEach((e=>{ve.component(e,p[e])}));const{mount:n}=ve;return ve.mount=(e,...t)=>{const r=G({domElement:"string"==typeof e?document.querySelector(e):e,isLunchboxRootNode:!0,name:"root",metaType:"rootMeta",type:"root",uuid:"LUNCHBOX_ROOT"});ve.rootNode=r;return n(r,...t)},ve.extend=e=>((({app:e,...t})=>{Object.keys(t).forEach((n=>{e.component(n,V(n)),u[n]=t[n]}))})({app:ve,...e}),ve),ve.setCustomRender=e=>{ve.customRender=e},ge&&(ve.setCustomRender(ge),ge=null),ve.clearCustomRender=()=>{ve.customRender=null},ve},e.find=function(e){return e=t.isRef(e)?e.value:e,f(e)?e?.instance:m(e)?e?.$el?.instance:t.isVNode(e)?e.el?.instance:null},e.globals=me,e.onAfterRender=(e,t=1/0)=>{t===1/0?re.push(e):re.splice(t,0,e)},e.onBeforeRender=ae,e.renderer=fe,e.scene=ye,e.setCustomRender=e=>{ve?ve.setCustomRender(e):ge=e},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("three"),require("lodash")):"function"==typeof define&&define.amd?define(["exports","vue","three","lodash"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).LunchboxRenderer={},e.vue,e.three,e.lodash)}(this,(function(e,t,n,r){"use strict";function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var a=o(n);const s=[],i=(e,n)=>{const r=K.value?.instance,o=_.value.instance,a=$.value;if(!r?.domElement||!o||!a)return;const s=(e=e??window.innerWidth)/(n=n??window.innerHeight);if("perspectivecamera"===a.type?.toLowerCase()){const e=a.instance;e.aspect=s,e.updateProjectionMatrix()}else if("orthographiccamera"===a.type?.toLowerCase()){const t=a.instance,r=n/e;t.top=10*r,t.bottom=10*-r,t.right=10,t.left=-10,t.updateProjectionMatrix()}else console.log("TODO: non-ortho or perspective camera");r.setSize(e,n),o&&a.instance&&r.render(t.toRaw(o),t.toRaw(a.instance))},c=e=>({position:e,top:0,right:0,bottom:0,left:0,width:"100%",height:"100%"}),d={name:"Lunchbox",props:{background:String,cameraArgs:Array,cameraLook:Array,cameraLookAt:Array,cameraPosition:Array,dpr:Number,ortho:Boolean,orthographic:Boolean,rendererArguments:Object,rendererProperties:Object,shadow:[Boolean,Object],transparent:Boolean},setup(e,o){const a=t.ref(),s=t.ref(!0),d=t.ref(e.dpr??-1),u=t.ref();let l,p,m;return t.onMounted((()=>{if(!a.value)throw new Error("missing canvas");if(l=T(["WebGLRenderer"]),l)s.value=!1,I.value=!0;else{const t={alpha:e.transparent,antialias:!0,canvas:a.value.domElement,...e.rendererArguments??{}};K.value=g({type:"WebGLRenderer",uuid:U,props:{args:[t]}}),I.value=!0;const n=K,o={shadow:e.shadow};n.value.instance&&o?.shadow&&(n.value.instance.shadowMap.enabled=!0,"object"==typeof o.shadow&&(n.value.instance.shadowMap.type=o.shadow.type)),e.rendererProperties&&Object.keys(e.rendererProperties).forEach((t=>{r.set(n.value,t,e.rendererProperties[t])})),l=n.value}if(p=T(["PerspectiveCamera","OrthographicCamera"]),p?D.value=!0:(e.ortho||e.orthographic?$.value=g({props:{args:e.cameraArgs??[]},type:"OrthographicCamera",uuid:S}):$.value=g({props:{args:e.cameraArgs??[45,.5625,1,1e3]},type:"PerspectiveCamera",uuid:S}),D.value=!0,p=$.value),!p.instance)throw new Error("Error creating camera.");if(p&&e.cameraPosition&&p.instance.position.set(...e.cameraPosition),p&&(e.cameraLookAt||e.cameraLook)){const t=e.cameraLookAt||e.cameraLook;p.instance.lookAt(...t)}if(m=_.value,m&&m.instance&&e.background&&(m.instance.background=new n.Color(e.background)),-1===d.value&&(d.value=window.devicePixelRatio),!l?.instance)throw new Error("missing renderer");l.instance.setPixelRatio(d.value),fe.dpr.value=d.value,((e,t,n)=>{const r=e.value?.domElement;if(!r)throw new Error("missing container");i();const o=new ResizeObserver((([e])=>{i()}));r&&o.observe(r),n((()=>{t&&o.unobserve(t)}))})(u,l.instance.domElement,t.onBeforeUnmount);const o=t.getCurrentInstance().appContext.app;for(let e of ne)e({app:o,camera:p.instance,renderer:l.instance,scene:m.instance});se({app:o,camera:p.instance,renderer:l.instance,scene:m.instance})})),t.onBeforeUnmount((()=>{ce()})),()=>[o.slots.default?.()??null,t.h("div",{style:c("absolute"),ref:u},[s.value?t.h("canvas",{style:c("fixed"),class:"lunchbox-canvas",ref:a}):null])]}},u=["mesh","instancedMesh","scene","sprite","object3D","instancedBufferGeometry","bufferGeometry","boxBufferGeometry","circleBufferGeometry","coneBufferGeometry","cylinderBufferGeometry","dodecahedronBufferGeometry","extrudeBufferGeometry","icosahedronBufferGeometry","latheBufferGeometry","octahedronBufferGeometry","parametricBufferGeometry","planeBufferGeometry","polyhedronBufferGeometry","ringBufferGeometry","shapeBufferGeometry","sphereBufferGeometry","tetrahedronBufferGeometry","textBufferGeometry","torusBufferGeometry","torusKnotBufferGeometry","tubeBufferGeometry","wireframeGeometry","parametricGeometry","tetrahedronGeometry","octahedronGeometry","icosahedronGeometry","dodecahedronGeometry","polyhedronGeometry","tubeGeometry","torusKnotGeometry","torusGeometry","sphereGeometry","ringGeometry","planeGeometry","latheGeometry","shapeGeometry","extrudeGeometry","edgesGeometry","coneGeometry","cylinderGeometry","circleGeometry","boxGeometry","material","shadowMaterial","spriteMaterial","rawShaderMaterial","shaderMaterial","pointsMaterial","meshPhysicalMaterial","meshStandardMaterial","meshPhongMaterial","meshToonMaterial","meshNormalMaterial","meshLambertMaterial","meshDepthMaterial","meshDistanceMaterial","meshBasicMaterial","meshMatcapMaterial","lineDashedMaterial","lineBasicMaterial","light","spotLightShadow","spotLight","pointLight","rectAreaLight","hemisphereLight","directionalLightShadow","directionalLight","ambientLight","lightShadow","ambientLightProbe","hemisphereLightProbe","lightProbe","texture","videoTexture","dataTexture","dataTexture3D","compressedTexture","cubeTexture","canvasTexture","depthTexture","textureLoader","group","catmullRomCurve3","points","cameraHelper","camera","perspectiveCamera","orthographicCamera","cubeCamera","arrayCamera","webGLRenderer"],l={},p=["canvas","div","LunchboxWrapper"];u.map((e=>t.defineComponent({inheritAttrs:!1,name:e,setup:(n,r)=>()=>t.h(e,r.attrs,r.slots?.default?.()||[])}))).reduce(((e,t)=>(e[t.name]=t,e)));const m={...u,Lunchbox:d};const h=e=>e?.$el&&e?.$el?.hasOwnProperty?.("instance"),f=e=>{if("domMeta"===e?.metaType)return!0;const t="string"==typeof e?e:e?.type;return p.includes(t??"")},y=e=>"standardMeta"===e?.metaType,v=e=>e.isLunchboxRootNode;function g(e={},t={}){const n={attached:e.attached??[],attachedArray:e.attachedArray??{},instance:e.instance??null},r=new Q.RendererStandardNode({...e,...n,metaType:"standardMeta"});return!r.type||v(r)||r.instance||(r.instance=function(e){if(!e.type)return null;const t=e.type[0].toUpperCase()+e.type.slice(1),n=l[e.type]||a[t];if(!n)throw`${t} is not part of the THREE namespace! Did you forget to extend? import {extend} from 'lunchbox'; extend({app, YourComponent, ...})`;const r=(e.props.args??[]).map((t=>function({node:e,prop:t}){const n="string"==typeof t&&t.startsWith("$attachedArray"),r=function({node:e,prop:t}){if("string"==typeof t&&t.startsWith("$attachedArray"))return e.attachedArray[t.replace("$attachedArray.","")];if("string"==typeof t&&t.startsWith("$attached"))return e.attached[t.replace("$attached.","")];return t}({node:e,prop:t});return Array.isArray(r)&&n?r:[r]}({node:e,prop:t})));let o=[];r.forEach((e=>{o=o.concat(e)}));return new n(...o)}({...r,props:{...r.props,...t}})),"scene"===r.type&&(_.value=r),r}const b=[],x=t.ref(!1);function R({node:e,key:n,value:r}){var o;if(e.eventListeners[n]||(e.eventListeners[n]=[]),e.eventListenerRemoveFunctions[n]||(e.eventListenerRemoveFunctions[n]=[]),e.eventListeners[n].push(r),w.includes(n)&&(V.value,e.instance&&!b.includes(e)&&(o=e,b.push(o),e.eventListenerRemoveFunctions[n].push((()=>(e=>{const t=b.indexOf(e);-1!==t&&b.splice(t,1)})(e))))),"onClick"===n||"onPointerDown"===n||"onPointerUp"===n){const r=t.watch((()=>x.value),(t=>{const r=M.map((e=>e.element)).findIndex((t=>t.instance&&t.instance.uuid===e.instance?.uuid));-1!==r&&((!t||"onClick"!==n&&"onPointerDown"!==n)&&(t||"onPointerUp"!==n)||e.eventListeners[n].forEach((e=>{e({intersection:M[r].intersection})})))}));e.eventListenerRemoveFunctions[n].push(r)}return e}const w=["onClick","onPointerUp","onPointerDown","onPointerOver","onPointerOut","onPointerEnter","onPointerLeave","onPointerMove"];let A,C,E;const L=t.ref({x:1/0,y:1/0});let P=!1;let M=[];const B=()=>{const e=V.value?.instance,t=$.value?.instance;if(!e||!t)return;e.setFromCamera(fe.mousePos.value,t);const n=e.intersectObjects(b.map((e=>e.instance)));let r=[],o=[],a=[];r=M.map((e=>e.intersection)),n?.forEach((e=>{const t=M.findIndex((t=>t.intersection.object===e.object));if(-1===t){const t=b.find((t=>t.instance?.uuid===e.object.uuid));t&&o.push({element:t,intersection:e})}else{const t=b.find((t=>t.instance?.uuid===e.object.uuid));t&&a.push({element:t,intersection:e})}const n=r.findIndex((t=>t.object.uuid===e.object.uuid));-1!==n&&r.splice(n,1)}));const s=r.map((e=>({element:b.find((t=>t.instance?.uuid===e.object.uuid)),intersection:e})));o.forEach((({element:e,intersection:t})=>{G({element:e,eventKeys:["onPointerEnter"],intersection:t})})),a.forEach((({element:e,intersection:t})=>{G({element:e,eventKeys:["onPointerOver","onPointerMove"],intersection:t})})),s.forEach((({element:e,intersection:t})=>{G({element:e,eventKeys:["onPointerLeave","onPointerOut"],intersection:t})})),M=[].concat(o,a)},G=({element:e,eventKeys:t,intersection:n})=>{e&&t.forEach((t=>{e.eventListeners[t]&&e.eventListeners[t].forEach((e=>{e({intersection:n})}))}))};function N(t={}){return e.lunchboxTree||(e.lunchboxTree=new Q.RendererRootNode(t)),e.lunchboxTree}function T(e){Array.isArray(e)||(e=[e]);for(let t of e)if(j[t])return j[t];for(let t of e){const e=O[t]||s.find((e=>e.type?.toLowerCase()===t.toLowerCase()));if(e){const n=e;return O[t]=n,n}}return null}e.lunchboxTree=void 0;const O=t.reactive({}),j=t.reactive({});function k(e,n,r={},o=null){Array.isArray(e)||(e=[e]);for(let t of e)O[t]||(O[t]=null),j[t]||(j[t]=null);return t.computed({get(){const t=T(e);if(t)return t;const a=N(),s=g({type:e[0],uuid:n,props:r});return a.addChild(s),O[e[0]]=s,o&&o(s),s},set(e){const t=e.type??"",n=t[0].toUpperCase()+t.slice(1);j[n]=e}})}const S="FALLBACK_CAMERA",F=k(["PerspectiveCamera","OrthographicCamera"],S,{args:[45,.5625,1,1e3]}),D=t.ref(!1),$=t.computed({get:()=>D.value?F.value:null,set(e){const t=e.type??"",n=t[0].toUpperCase()+t.slice(1);j[n]=e}}),U="FALLBACK_RENDERER",W=k(["WebGLRenderer"],U,{}),I=t.ref(!1),K=t.computed({get:()=>I.value?W.value:null,set(e){const t=e.type??"",n=t[0].toUpperCase()+t.slice(1);j[n]=e}}),_=k("Scene","FALLBACK_SCENE"),V=k("Raycaster","AUTO_RAYCASTER",{},(e=>(e=>{if(!e.instance)return;let n=null;n=t.watch((()=>K.value),(e=>{e?.instance&&(P||(A=t=>{const n=(e.instance.domElement.width??1)/fe.dpr.value,r=(e.instance.domElement.height??1)/fe.dpr.value;L.value.x=t.offsetX/n*2-1,L.value.y=-t.offsetY/r*2+1},C=()=>x.value=!0,E=()=>x.value=!1,e.instance.domElement.addEventListener("mousemove",A),e.instance.domElement.addEventListener("mousedown",C),e.instance.domElement.addEventListener("mouseup",E),ie(B),P=!0),n&&n())}),{immediate:!0})})(e))),q=e=>t.defineComponent({inheritAttrs:!1,name:e,render(){return t.h(e,this.$attrs,this.$slots?.default?.()||[])}});var z,H=new Uint8Array(16);function Y(){if(!z&&!(z="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return z(H)}var X=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;function J(e){return"string"==typeof e&&X.test(e)}for(var Q,Z=[],ee=0;ee<256;++ee)Z.push((ee+256).toString(16).substr(1));function te(e,t,n){var r=(e=e||{}).random||(e.rng||Y)();if(r[6]=15&r[6]|64,r[8]=63&r[8]|128,t){n=n||0;for(var o=0;o<16;++o)t[n+o]=r[o];return t}return function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=(Z[e[t+0]]+Z[e[t+1]]+Z[e[t+2]]+Z[e[t+3]]+"-"+Z[e[t+4]]+Z[e[t+5]]+"-"+Z[e[t+6]]+Z[e[t+7]]+"-"+Z[e[t+8]]+Z[e[t+9]]+"-"+Z[e[t+10]]+Z[e[t+11]]+Z[e[t+12]]+Z[e[t+13]]+Z[e[t+14]]+Z[e[t+15]]).toLowerCase();if(!J(n))throw TypeError("Stringified UUID is invalid");return n}(r)}!function(e){e.BaseNode=class{constructor(e={},t){this.parentNode=e?.parentNode??t??null,this.minidomType="MinidomBaseNode",this.uuid=e?.uuid??te(),s.push(this)}uuid;parentNode;get nextSibling(){if(!this.parentNode)return null;const e=this.parentNode.children.findIndex((e=>e.uuid===this.uuid));return-1!==e&&e<this.parentNode.children.length-1?this.parentNode.children[e+1]:null}insertBefore(e,t){e.removeAsChildFromAnyParents(),e.parentNode=this;const n=this.children.findIndex((e=>e.uuid===t?.uuid));-1!==n?this.children.splice(n,0,e):this.children.push(e)}removeChild(e){const t=this.children.findIndex((t=>t?.uuid===e?.uuid));-1!==t&&this.children.splice(t,1)}children=[];addChild(e){return e&&(e.removeAsChildFromAnyParents(),e.parentNode=this,this.insertBefore(e,null)),this}getPath(){const e=[];let t=this;for(;t;)e.unshift(t),t=t.parentNode;return e}drop(){this.parentNode=null,this.removeAsChildFromAnyParents()}walk(e){const t=[this,...this.children],n=[];let r=!0;for(;t.length&&r;){const o=t.shift();if(o){if(n.includes(o))continue;n.push(o),t.push(...o.children.filter((e=>!n.includes(e)))),r=e(o)}else r=!1}}minidomType;removeAsChildFromAnyParents(){s.forEach((e=>e.removeChild(this)))}};class t extends e.BaseNode{constructor(e={},t){super(e,t),this.minidomType="RendererNode",this.eventListeners={},this.eventListenerRemoveFunctions={},this.name=e.name??"",this.metaType=e.metaType??"standardMeta",this.props=e.props??[],this.type=e.type??""}eventListeners;eventListenerRemoveFunctions;name;metaType;props;type;drop(){super.drop(),Object.keys(this.eventListenerRemoveFunctions).forEach((e=>{this.eventListenerRemoveFunctions[e].forEach((e=>e()))}))}}e.RendererBaseNode=t;class n extends e.RendererBaseNode{constructor(e={},t){super(e,t),this.domElement=e.domElement??document.createElement("div")}domElement;isLunchboxRootNode=!0}e.RendererRootNode=n;class r extends e.RendererBaseNode{constructor(e={},t){super(e,t),this.text=e.text??""}text}e.RendererCommentNode=r;class o extends e.RendererBaseNode{constructor(e={},t){super(e,t),this.domElement=e.domElement??document.createElement("div")}domElement}e.RendererDomNode=o;class a extends e.RendererBaseNode{constructor(e={},t){super(e,t),this.text=e.text??""}text}e.RendererTextNode=a;class i extends e.RendererBaseNode{constructor(e={},t){super(e,t),this.attached=e.attached??[],this.attachedArray=e.attachedArray??{},this.instance=e.instance??null}attached;attachedArray;instance}e.RendererStandardNode=i}(Q||(Q={}));(new Q.RendererRootNode).minidomType="RootNode";const ne=[];let re;const oe=[],ae=[],se=e=>{re=requestAnimationFrame((()=>se({app:e.app,renderer:K.value?.instance,scene:_.value.instance,camera:$.value?.instance})));const{app:n,renderer:r,scene:o,camera:a}=e;oe.forEach((t=>{t&&t(e)})),r&&o&&a&&(n.customRender?n.customRender(e):r.render(t.toRaw(o),t.toRaw(a))),ae.forEach((t=>{t&&t(e)}))},ie=(e,t=1/0)=>{t===1/0?oe.push(e):oe.splice(t,0,e)},ce=()=>{re&&cancelAnimationFrame(re)};const de={x:"position.x",y:"position.y",z:"position.z"},ue=["","parameters"],le=["args","attach","attachArray","key","onAdded","ref","src"],pe=["geometry","material"];function me(e,t,n,r){const o=r??e.instance,a=t.instance;e.props.attach===n&&(t.attached={[n]:o,...t.attached||{}},a[n]=r??e.instance),e.props.attachArray===n&&(t.attachedArray[e.props.attachArray]||(t.attachedArray[e.props.attachArray]=[]),t.attachedArray[e.props.attachArray].push(o),a[n]=[a[n]])}const he={createElement:(e,t,n,r)=>{const o={type:e};r&&(o.props=r);if(f(e)){const e=function(e={}){const t={domElement:document.createElement(e.type??"")};return new Q.RendererDomNode({...t,...e,metaType:"domMeta"})}(o);return e}const a=g(o);return pe.forEach((t=>{e.toLowerCase().endsWith(t)&&(a.props.attach=t)})),a},createText:e=>function(e={}){const t={text:e.text??""};return new Q.RendererTextNode({...e,...t,metaType:"textMeta"})}({text:e}),createComment:e=>function(e={}){const t={text:e.text??""};return new Q.RendererCommentNode({...t,...e,metaType:"commentMeta"})}({text:e}),insert:(e,t,n)=>{let r=t??N();if(r.insertBefore(e,n),"commentMeta"!==e.metaType&&"textMeta"!==e.metaType&&(f(e)&&(f(t)||v(t))&&t.domElement.appendChild(e.domElement),y(e))){let n=r.metaType;if("textMeta"===n||"commentMeta"===n){const e=r.getPath();for(let t=e.length-1;t>=0;t--)if("textMeta"!==e[t].metaType&&"commentMeta"!==e[t].metaType){r=e[t];break}}if("standardMeta"===e.metaType&&"scene"!==e.type&&v(r)){const t=_.value;t.instance&&e&&t.addChild(e),e.instance&&e.instance.isObject3D&&t.instance&&t!==e&&t.instance.add(e.instance)}else y(e)&&e.instance?.isObject3D&&y(r)&&r.instance?.isObject3D&&r.instance?.add?.(e.instance);if(e?.props?.attach&&y(t)&&t?.instance){e.type?.toLowerCase().endsWith("loader")&&e.props.src&&(e.props.attach||e.props.attachArray)?function(e,t){const n=e.instance;if(t.attached=t.attached||{},t.attachedArray=t.attachedArray||{},!e.props.attach)return;if("textureloader"===e.type?.toLowerCase()){const r=n.load(e.props.src);me(e,t,e.props.attach,r)}else n.load(e.props.src,(n=>{me(e,t,e.props.attach,n)}),null,(e=>{throw new Error(e)}))}(e,t):me(e,t,e.props.attach)}e.props?.onAdded&&e.props.onAdded({instance:e.instance})}},nextSibling(e){const t=e.nextSibling;return t||null},parentNode(e){const t=e.parentNode;return t||null},patchProp(e,t,n,o){f(e)?"style"===t?Object.keys(o).forEach((t=>{e.domElement.style[t]=o[t]})):e.domElement.setAttribute(t,o):v(e)||t.startsWith("$")||function({node:e,key:t,value:n}){if((e=>["onClick","onContextMenu","onDoubleClick","onPointerUp","onPointerDown","onPointerOver","onPointerOut","onPointerEnter","onPointerLeave","onPointerMove","onWheel"].includes(e))(t))return R({node:e,key:t,value:n});if(le.includes(t))return e;if(!y(e))return e;if("string"==typeof n&&n.startsWith("$attached")){const t=n.replace("$attached.","");n=r.get(e.attached,t,null)}const o=e.instance;if(!o)return e;const a=t.replace(/-/g,".");let s,i=de[a]||a;for(let e=0;e<ue.length&&!s;e++){const t=[ue[e],i].filter(Boolean).join(".");s=s=r.get(o,t)}if(s&&r.isNumber(n)&&s.setScalar)s.setScalar(n);else if(s&&s.set){const e=Array.isArray(n)?n:[n];o[i].set(...e)}else"function"==typeof s?s.bind(e.instance)(...n):void 0!==r.get(o,i,void 0)?r.set(o,i,""===n||n):console.log(`No property ${i} found on ${o}`);const c=o?.texture?.type||o?.type;if("string"==typeof c){const e=c.toLowerCase();switch(!0){case e.includes("material"):o.needsUpdate=!0;break;case e.includes("camera")&&o.updateProjectionMatrix:o.updateProjectionMatrix()}}}({node:e,key:t,value:o})},remove:e=>{if(!e)return;const t=Object.keys(j),n=[];e.walk((e=>(n.push(e),!0))),n.forEach((e=>{const n=t.find((t=>j[t]?.uuid===e.uuid));if(n&&(j[n]=null),y(e)){e.instance?.removeFromParent?.();const t="scene"!==e.type&&e.instance?.dispose;t&&t.bind(e.instance)(),e.instance=null}e.drop();const r=s.findIndex((t=>t.uuid===e.uuid));-1!==r&&s.splice(r,1)}))},setElementText(){},setText(){}},fe={dpr:t.ref(1),inputActive:x,mousePos:L},ye=t.computed((()=>$.value?.instance??null));const ve=t.computed((()=>K.value?.instance??null));const ge=t.computed((()=>_.value.instance));let be=null,xe=null;e.camera=ye,e.clearCustomRender=()=>{be?be.clearCustomRender():xe=null},e.createApp=e=>{be=t.createRenderer(he).createApp(e),Object.keys(m).forEach((e=>{be.component(e,m[e])}));const{mount:n}=be;return be.mount=(e,...t)=>{const r=N({domElement:"string"==typeof e?document.querySelector(e):e,isLunchboxRootNode:!0,name:"root",metaType:"rootMeta",type:"root",uuid:"LUNCHBOX_ROOT"});be.rootNode=r;return n(r,...t)},be.extend=e=>((({app:e,...t})=>{Object.keys(t).forEach((n=>{e.component(n,q(n)),l[n]=t[n]}))})({app:be,...e}),be),be.setCustomRender=e=>{be.customRender=e},xe&&(be.setCustomRender(xe),xe=null),be.clearCustomRender=()=>{be.customRender=null},be},e.find=function(e){return e=t.isRef(e)?e.value:e,y(e)?e?.instance:h(e)?e?.$el?.instance:t.isVNode(e)?e.el?.instance:null},e.globals=fe,e.offAfterRender=e=>{if(isFinite(e))ae.splice(e,1);else{const t=ae.findIndex((t=>t==e));ae.splice(t,1)}},e.offBeforeRender=e=>{if(isFinite(e))oe.splice(e,1);else{const t=oe.findIndex((t=>t==e));oe.splice(t,1)}},e.onAfterRender=(e,t=1/0)=>{t===1/0?ae.push(e):ae.splice(t,0,e)},e.onBeforeRender=ie,e.onStart=(e,t=1/0)=>{t===1/0?ne.push(e):ne.splice(t,0,e)},e.renderer=ve,e.scene=ge,e.setCustomRender=e=>{be?be.setCustomRender(e):xe=e},e.useCamera=function(e,n=!0){let r;r=t.watch(ye,(t=>{t&&(e(t),n&&r?.())}),{immediate:!0})},e.useRenderer=function(e,n=!0){let r;r=t.watch(ve,(t=>{t&&(e(t),n&&r?.())}),{immediate:!0})},e.useScene=function(e,n=!0){let r;r=t.watch(ge,(t=>{t&&(e(t),n&&r?.())}),{immediate:!0})},Object.defineProperty(e,"__esModule",{value:!0})}));

package/dist/lunchboxjs.module.js

@@ -84,10 +84,13 @@ const LunchboxWrapper = {
         // These should match the Lunchbox.WrapperProps interface
         background: String,
         cameraArgs: Array,
+        cameraLook: Array,
+        cameraLookAt: Array,
         cameraPosition: Array,
         dpr: Number,
         ortho: Boolean,
         orthographic: Boolean,
+        rendererArguments: Object,
         rendererProperties: Object,
         shadow: [Boolean, Object],
         transparent: Boolean,
@@ -117,12 +120,11 @@ const LunchboxWrapper = {
             if (!renderer) {
                 // build renderer args
                 const rendererArgs = {
+                    alpha: props.transparent,
                     antialias: true,
                     canvas: canvas.value.domElement,
+                    ...(props.rendererArguments ?? {}),
                 };
-                if (props.transparent) {
-                    rendererArgs.alpha = true;
-                }
                 // create new renderer
                 ensureRenderer.value = createNode({
                     type: 'WebGLRenderer',
@@ -160,7 +162,6 @@ const LunchboxWrapper = {
                 // the user has initialized the renderer, so anything depending
                 // on the renderer can execute
                 rendererReady.value = true;
-                return;
             }
             // CAMERA
             // ====================
@@ -173,7 +174,6 @@ const LunchboxWrapper = {
             if (!camera) {
                 // create ortho camera
                 if (props.ortho || props.orthographic) {
-                    // const size: Vector2 = new Vector2()
                     ensuredCamera.value = createNode({
                         props: { args: props.cameraArgs ?? [] },
                         type: 'OrthographicCamera',
@@ -195,9 +195,17 @@ const LunchboxWrapper = {
             else {
                 cameraReady.value = true;
             }
+            if (!camera.instance) {
+                throw new Error('Error creating camera.');
+            }
             // move camera if needed
             if (camera && props.cameraPosition) {
-                camera.instance?.position.set(...props.cameraPosition);
+                camera.instance.position.set(...props.cameraPosition);
+            }
+            // angle camera if needed
+            if (camera && (props.cameraLookAt || props.cameraLook)) {
+                const source = (props.cameraLookAt || props.cameraLook);
+                camera.instance.lookAt(...source);
             }
             // SCENE
             // ====================
@@ -220,11 +228,23 @@ const LunchboxWrapper = {
             else {
                 throw new Error('missing renderer');
             }
+            // CALLBACK PREP
+            // ====================
+            const app = getCurrentInstance().appContext.app;
+            // START
+            // ====================
+            for (let startCallback of startCallbacks) {
+                startCallback({
+                    app,
+                    camera: camera.instance,
+                    renderer: renderer.instance,
+                    scene: scene.instance,
+                });
+            }
             // KICK UPDATE
             // ====================
-            // console.log(scene)
             update({
-                app: getCurrentInstance().appContext.app,
+                app,
                 camera: camera.instance,
                 renderer: renderer.instance,
                 scene: scene.instance,
@@ -255,21 +275,6 @@ const LunchboxWrapper = {
     },
 };
 
-const catalogue = {};
-
-const lunchboxDomComponentNames = [
-    'canvas',
-    'div',
-    'LunchboxWrapper',
-];
-// component creation utility
-const createComponent$1 = (tag) => defineComponent({
-    inheritAttrs: false,
-    name: tag,
-    setup(props, context) {
-        return () => h(tag, context.attrs, context.slots?.default?.() || []);
-    },
-});
 // list of all components to register out of the box
 const autoGeneratedComponents = [
     // ThreeJS basics
@@ -382,21 +387,11 @@ const autoGeneratedComponents = [
     'arrayCamera',
     // renderers
     'webGLRenderer',
-].map(createComponent$1).reduce((acc, curr) => {
-    acc[curr.name] = curr;
-    return acc;
-});
-const components = {
-    ...autoGeneratedComponents,
-    'Lunchbox': LunchboxWrapper,
-    // Gltf,
-};
-// console.log(components, Gltf)
-/*
-// List copied from r3f
-// https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/three-types.ts
+    /*
+    // List copied from r3f:
+    // https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/three-types.ts
 
-// NOT IMPLEMENTED:
+    // NOT IMPLEMENTED (can be added via Extend - docs.lunchboxjs.com/components/extend/):
     audioListener: AudioListenerProps
     positionalAudio: PositionalAudioProps
 
@@ -444,6 +439,27 @@ const components = {
     fogExp2: FogExp2Props
     shape: ShapeProps
 */
+];
+
+const catalogue = {};
+
+const lunchboxDomComponentNames = ['canvas', 'div', 'LunchboxWrapper'];
+// component creation utility
+const createComponent$1 = (tag) => defineComponent({
+    inheritAttrs: false,
+    name: tag,
+    setup(props, context) {
+        return () => h(tag, context.attrs, context.slots?.default?.() || []);
+    },
+});
+autoGeneratedComponents.map(createComponent$1).reduce((acc, curr) => {
+    acc[curr.name] = curr;
+    return acc;
+});
+const components = {
+    ...autoGeneratedComponents,
+    Lunchbox: LunchboxWrapper,
+};
 
 function find(target) {
     target = isRef(target) ? target.value : target;
@@ -1237,6 +1253,16 @@ var MiniDom;
 const rootNode = new MiniDom.RendererRootNode();
 rootNode.minidomType = 'RootNode';
 
+const startCallbacks = [];
+const onStart = (cb, index = Infinity) => {
+    if (index === Infinity) {
+        startCallbacks.push(cb);
+    }
+    else {
+        startCallbacks.splice(index, 0, cb);
+    }
+};
+
 let frameID;
 const beforeRender = [];
 const afterRender = [];
@@ -1280,6 +1306,15 @@ const onBeforeRender = (cb, index = Infinity) => {
         beforeRender.splice(index, 0, cb);
     }
 };
+const offBeforeRender = (cb) => {
+    if (isFinite(cb)) {
+        beforeRender.splice(cb, 1);
+    }
+    else {
+        const idx = beforeRender.findIndex((v) => v == cb);
+        beforeRender.splice(idx, 1);
+    }
+};
 const onAfterRender = (cb, index = Infinity) => {
     if (index === Infinity) {
         afterRender.push(cb);
@@ -1288,6 +1323,15 @@ const onAfterRender = (cb, index = Infinity) => {
         afterRender.splice(index, 0, cb);
     }
 };
+const offAfterRender = (cb) => {
+    if (isFinite(cb)) {
+        afterRender.splice(cb, 1);
+    }
+    else {
+        const idx = afterRender.findIndex((v) => v == cb);
+        afterRender.splice(idx, 1);
+    }
+};
 const cancelUpdate = () => {
     if (frameID)
         cancelAnimationFrame(frameID);
@@ -1641,9 +1685,51 @@ const globals = {
     inputActive,
     mousePos,
 };
+/** The current camera. Often easier to use `useCamera` instead of this. */
 const camera = computed(() => ensuredCamera.value?.instance ?? null);
+/** Run a function using the current camera when it's present. */
+function useCamera(callback, once = true) {
+    let destroy;
+    destroy = watch(camera, (newVal) => {
+        if (!newVal)
+            return;
+        // TODO: better fix than `any`?
+        callback(newVal);
+        if (once) {
+            destroy?.();
+        }
+    }, { immediate: true });
+}
+/** The current renderer. Often easier to use `useRenderer` instead of this. */
 const renderer = computed(() => ensureRenderer.value?.instance ?? null);
+/** Run a function using the current renderer when it's present. */
+function useRenderer(callback, once = true) {
+    let destroy;
+    destroy = watch(renderer, (newVal) => {
+        if (!newVal)
+            return;
+        // TODO: better fix than `any`?
+        callback(newVal);
+        if (once) {
+            destroy?.();
+        }
+    }, { immediate: true });
+}
+/** The current scene. Often easier to use `useScene` instead of this. */
 const scene = computed(() => ensuredScene.value.instance);
+/** Run a function using the current scene when it's present. */
+function useScene(callback, once = true) {
+    let destroy;
+    destroy = watch(scene, (newVal) => {
+        if (!newVal)
+            return;
+        // TODO: better fix than `any`?
+        callback(newVal);
+        if (once) {
+            destroy?.();
+        }
+    }, { immediate: true });
+}
 // CUSTOM RENDER SUPPORT
 // ====================
 let app = null;
@@ -1710,4 +1796,4 @@ const createApp = (root) => {
     return app;
 };
 
-export { camera, clearCustomRender, createApp, find, globals, lunchboxRootNode as lunchboxTree, onAfterRender, onBeforeRender, renderer, scene, setCustomRender };
+export { camera, clearCustomRender, createApp, find, globals, lunchboxRootNode as lunchboxTree, offAfterRender, offBeforeRender, onAfterRender, onBeforeRender, onStart, renderer, scene, setCustomRender, useCamera, useRenderer, useScene };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lunchboxjs",
-    "version": "0.1.4004",
+    "version": "0.1.4010",
     "scripts": {
         "dev": "vite -c utils/vite.config.ts",
         "build": "vue-tsc --noEmit && vite build -c utils/vite.config.ts",
@@ -25,6 +25,8 @@
         "@types/three": "0.133.0",
         "@types/uuid": "8.3.1",
         "@vitejs/plugin-vue": "^1.9.3",
+        "chroma-js": "2.1.2",
+        "nice-color-palettes": "3.0.0",
         "rollup-plugin-delete": "2.0.0",
         "rollup-plugin-terser": "7.0.2",
         "typescript": "^4.4.3",

package/src/components/LunchboxWrapper/LunchboxWrapper.ts

@@ -18,6 +18,7 @@ import {
     fallbackRendererUuid,
     MiniDom,
     rendererReady,
+    startCallbacks,
     tryGetNodeWithInstanceType,
     update,
 } from '../../core'
@@ -45,10 +46,13 @@ export const LunchboxWrapper: ComponentOptions = {
         // These should match the Lunchbox.WrapperProps interface
         background: String,
         cameraArgs: Array,
+        cameraLook: Array,
+        cameraLookAt: Array,
         cameraPosition: Array,
         dpr: Number,
         ortho: Boolean,
         orthographic: Boolean,
+        rendererArguments: Object,
         rendererProperties: Object,
         shadow: [Boolean, Object],
         transparent: Boolean,
@@ -80,11 +84,10 @@ export const LunchboxWrapper: ComponentOptions = {
             if (!renderer) {
                 // build renderer args
                 const rendererArgs: THREE.WebGLRendererParameters = {
+                    alpha: props.transparent,
                     antialias: true,
                     canvas: canvas.value.domElement,
-                }
-                if (props.transparent) {
-                    rendererArgs.alpha = true
+                    ...(props.rendererArguments ?? {}),
                 }
 
                 // create new renderer
@@ -135,7 +138,6 @@ export const LunchboxWrapper: ComponentOptions = {
                 // the user has initialized the renderer, so anything depending
                 // on the renderer can execute
                 rendererReady.value = true
-                return
             }
 
             // CAMERA
@@ -149,8 +151,6 @@ export const LunchboxWrapper: ComponentOptions = {
             if (!camera) {
                 // create ortho camera
                 if (props.ortho || props.orthographic) {
-                    // const size: Vector2 = new Vector2()
-
                     ensuredCamera.value = createNode<THREE.OrthographicCamera>({
                         props: { args: props.cameraArgs ?? [] },
                         type: 'OrthographicCamera',
@@ -172,9 +172,17 @@ export const LunchboxWrapper: ComponentOptions = {
             } else {
                 cameraReady.value = true
             }
+            if (!camera.instance) {
+                throw new Error('Error creating camera.')
+            }
             // move camera if needed
             if (camera && props.cameraPosition) {
-                camera.instance?.position.set(...props.cameraPosition)
+                camera.instance.position.set(...props.cameraPosition)
+            }
+            // angle camera if needed
+            if (camera && (props.cameraLookAt || props.cameraLook)) {
+                const source = (props.cameraLookAt || props.cameraLook)!
+                camera.instance.lookAt(...source)
             }
 
             // SCENE
@@ -204,11 +212,25 @@ export const LunchboxWrapper: ComponentOptions = {
                 throw new Error('missing renderer')
             }
 
+            // CALLBACK PREP
+            // ====================
+            const app = getCurrentInstance()!.appContext.app as Lunch.App
+
+            // START
+            // ====================
+            for (let startCallback of startCallbacks) {
+                startCallback({
+                    app,
+                    camera: camera.instance,
+                    renderer: renderer.instance,
+                    scene: scene.instance,
+                })
+            }
+
             // KICK UPDATE
             // ====================
-            // console.log(scene)
             update({
-                app: getCurrentInstance()!.appContext.app as Lunch.App,
+                app,
                 camera: camera.instance,
                 renderer: renderer.instance,
                 scene: scene.instance,

package/src/components/autoGeneratedComponents.ts

@@ -0,0 +1,175 @@
+// list of all components to register out of the box
+export const autoGeneratedComponents = [
+    // ThreeJS basics
+    'mesh',
+    'instancedMesh',
+    'scene',
+    'sprite',
+    'object3D',
+
+    // geometry
+    'instancedBufferGeometry',
+    'bufferGeometry',
+    'boxBufferGeometry',
+    'circleBufferGeometry',
+    'coneBufferGeometry',
+    'cylinderBufferGeometry',
+    'dodecahedronBufferGeometry',
+    'extrudeBufferGeometry',
+    'icosahedronBufferGeometry',
+    'latheBufferGeometry',
+    'octahedronBufferGeometry',
+    'parametricBufferGeometry',
+    'planeBufferGeometry',
+    'polyhedronBufferGeometry',
+    'ringBufferGeometry',
+    'shapeBufferGeometry',
+    'sphereBufferGeometry',
+    'tetrahedronBufferGeometry',
+    'textBufferGeometry',
+    'torusBufferGeometry',
+    'torusKnotBufferGeometry',
+    'tubeBufferGeometry',
+    'wireframeGeometry',
+    'parametricGeometry',
+    'tetrahedronGeometry',
+    'octahedronGeometry',
+    'icosahedronGeometry',
+    'dodecahedronGeometry',
+    'polyhedronGeometry',
+    'tubeGeometry',
+    'torusKnotGeometry',
+    'torusGeometry',
+    // textgeometry has been moved to /examples/jsm/geometries/TextGeometry
+    // 'textGeometry',
+    'sphereGeometry',
+    'ringGeometry',
+    'planeGeometry',
+    'latheGeometry',
+    'shapeGeometry',
+    'extrudeGeometry',
+    'edgesGeometry',
+    'coneGeometry',
+    'cylinderGeometry',
+    'circleGeometry',
+    'boxGeometry',
+
+    // materials
+    'material',
+    'shadowMaterial',
+    'spriteMaterial',
+    'rawShaderMaterial',
+    'shaderMaterial',
+    'pointsMaterial',
+    'meshPhysicalMaterial',
+    'meshStandardMaterial',
+    'meshPhongMaterial',
+    'meshToonMaterial',
+    'meshNormalMaterial',
+    'meshLambertMaterial',
+    'meshDepthMaterial',
+    'meshDistanceMaterial',
+    'meshBasicMaterial',
+    'meshMatcapMaterial',
+    'lineDashedMaterial',
+    'lineBasicMaterial',
+
+    // lights
+    'light',
+    'spotLightShadow',
+    'spotLight',
+    'pointLight',
+    'rectAreaLight',
+    'hemisphereLight',
+    'directionalLightShadow',
+    'directionalLight',
+    'ambientLight',
+    'lightShadow',
+    'ambientLightProbe',
+    'hemisphereLightProbe',
+    'lightProbe',
+
+    // textures
+    'texture',
+    'videoTexture',
+    'dataTexture',
+    'dataTexture3D',
+    'compressedTexture',
+    'cubeTexture',
+    'canvasTexture',
+    'depthTexture',
+
+    // Texture loaders
+    'textureLoader',
+
+    // misc
+    'group',
+    'catmullRomCurve3',
+    'points',
+
+    // helpers
+    'cameraHelper',
+
+    // cameras
+    'camera',
+    'perspectiveCamera',
+    'orthographicCamera',
+    'cubeCamera',
+    'arrayCamera',
+
+    // renderers
+    'webGLRenderer',
+
+    /*
+    // List copied from r3f:
+    // https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/three-types.ts
+
+    // NOT IMPLEMENTED (can be added via Extend - docs.lunchboxjs.com/components/extend/):
+    audioListener: AudioListenerProps
+    positionalAudio: PositionalAudioProps
+
+    lOD: LODProps
+    skinnedMesh: SkinnedMeshProps
+    skeleton: SkeletonProps
+    bone: BoneProps
+    lineSegments: LineSegmentsProps
+    lineLoop: LineLoopProps
+    // see `audio`
+    // line: LineProps
+    immediateRenderObject: ImmediateRenderObjectProps
+
+    // primitive
+    primitive: PrimitiveProps
+
+    // helpers
+    spotLightHelper: SpotLightHelperProps
+    skeletonHelper: SkeletonHelperProps
+    pointLightHelper: PointLightHelperProps
+    hemisphereLightHelper: HemisphereLightHelperProps
+    gridHelper: GridHelperProps
+    polarGridHelper: PolarGridHelperProps
+    directionalLightHelper: DirectionalLightHelperProps
+    boxHelper: BoxHelperProps
+    box3Helper: Box3HelperProps
+    planeHelper: PlaneHelperProps
+    arrowHelper: ArrowHelperProps
+    axesHelper: AxesHelperProps
+
+
+    // misc
+    raycaster: RaycasterProps
+    vector2: Vector2Props
+    vector3: Vector3Props
+    vector4: Vector4Props
+    euler: EulerProps
+    matrix3: Matrix3Props
+    matrix4: Matrix4Props
+    quaternion: QuaternionProps
+    bufferAttribute: BufferAttributeProps
+    instancedBufferAttribute: InstancedBufferAttributeProps
+    color: ColorProps
+    fog: FogProps
+    fogExp2: FogExp2Props
+    shape: ShapeProps
+*/
+]

package/src/components/index.ts

@@ -1,16 +1,11 @@
 import { h, defineComponent } from 'vue'
-// import Gltf from './Gltf'
-// import { Lunchbox } from '../types'
 import { LunchboxWrapper } from './LunchboxWrapper/LunchboxWrapper'
+import { autoGeneratedComponents } from './autoGeneratedComponents'
 
 import { catalogue } from './catalogue'
 export { catalogue }
 
-export const lunchboxDomComponentNames = [
-    'canvas',
-    'div',
-    'LunchboxWrapper',
-]
+export const lunchboxDomComponentNames = ['canvas', 'div', 'LunchboxWrapper']
 
 // component creation utility
 const createComponent = (tag: string) =>
@@ -22,190 +17,12 @@ const createComponent = (tag: string) =>
         },
     })
 
-// list of all components to register out of the box
-const autoGeneratedComponents = [
-
-    // ThreeJS basics
-    'mesh',
-    'instancedMesh',
-    'scene',
-    'sprite',
-    'object3D',
-
-    // geometry
-    'instancedBufferGeometry',
-    'bufferGeometry',
-    'boxBufferGeometry',
-    'circleBufferGeometry',
-    'coneBufferGeometry',
-    'cylinderBufferGeometry',
-    'dodecahedronBufferGeometry',
-    'extrudeBufferGeometry',
-    'icosahedronBufferGeometry',
-    'latheBufferGeometry',
-    'octahedronBufferGeometry',
-    'parametricBufferGeometry',
-    'planeBufferGeometry',
-    'polyhedronBufferGeometry',
-    'ringBufferGeometry',
-    'shapeBufferGeometry',
-    'sphereBufferGeometry',
-    'tetrahedronBufferGeometry',
-    'textBufferGeometry',
-    'torusBufferGeometry',
-    'torusKnotBufferGeometry',
-    'tubeBufferGeometry',
-    'wireframeGeometry',
-    'parametricGeometry',
-    'tetrahedronGeometry',
-    'octahedronGeometry',
-    'icosahedronGeometry',
-    'dodecahedronGeometry',
-    'polyhedronGeometry',
-    'tubeGeometry',
-    'torusKnotGeometry',
-    'torusGeometry',
-    // textgeometry has been moved to /examples/jsm/geometries/TextGeometry
-    // 'textGeometry',
-    'sphereGeometry',
-    'ringGeometry',
-    'planeGeometry',
-    'latheGeometry',
-    'shapeGeometry',
-    'extrudeGeometry',
-    'edgesGeometry',
-    'coneGeometry',
-    'cylinderGeometry',
-    'circleGeometry',
-    'boxGeometry',
-
-    // materials
-    'material',
-    'shadowMaterial',
-    'spriteMaterial',
-    'rawShaderMaterial',
-    'shaderMaterial',
-    'pointsMaterial',
-    'meshPhysicalMaterial',
-    'meshStandardMaterial',
-    'meshPhongMaterial',
-    'meshToonMaterial',
-    'meshNormalMaterial',
-    'meshLambertMaterial',
-    'meshDepthMaterial',
-    'meshDistanceMaterial',
-    'meshBasicMaterial',
-    'meshMatcapMaterial',
-    'lineDashedMaterial',
-    'lineBasicMaterial',
-
-    // lights
-    'light',
-    'spotLightShadow',
-    'spotLight',
-    'pointLight',
-    'rectAreaLight',
-    'hemisphereLight',
-    'directionalLightShadow',
-    'directionalLight',
-    'ambientLight',
-    'lightShadow',
-    'ambientLightProbe',
-    'hemisphereLightProbe',
-    'lightProbe',
-
-    // textures
-    'texture',
-    'videoTexture',
-    'dataTexture',
-    'dataTexture3D',
-    'compressedTexture',
-    'cubeTexture',
-    'canvasTexture',
-    'depthTexture',
-
-    // Texture loaders
-    'textureLoader',
-
-    // misc
-    'group',
-    'catmullRomCurve3',
-    'points',
-
-    // helpers
-    'cameraHelper',
-
-    // cameras
-    'camera',
-    'perspectiveCamera',
-    'orthographicCamera',
-    'cubeCamera',
-    'arrayCamera',
-
-    // renderers
-    'webGLRenderer',
-].map(createComponent).reduce((acc, curr) => {
-    ; (acc as any)[curr.name] = curr
+autoGeneratedComponents.map(createComponent).reduce((acc, curr) => {
+    ;(acc as any)[curr.name] = curr
     return acc
 })
 
 export const components = {
     ...autoGeneratedComponents,
-    'Lunchbox': LunchboxWrapper,
-    // Gltf,
+    Lunchbox: LunchboxWrapper,
 }
-
-// console.log(components, Gltf)
-
-/*
-// List copied from r3f
-// https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/three-types.ts
-
-// NOT IMPLEMENTED:
-    audioListener: AudioListenerProps
-    positionalAudio: PositionalAudioProps
-
-    lOD: LODProps
-    skinnedMesh: SkinnedMeshProps
-    skeleton: SkeletonProps
-    bone: BoneProps
-    lineSegments: LineSegmentsProps
-    lineLoop: LineLoopProps
-    // see `audio`
-    // line: LineProps
-    immediateRenderObject: ImmediateRenderObjectProps
-
-    // primitive
-    primitive: PrimitiveProps
-
-    // helpers
-    spotLightHelper: SpotLightHelperProps
-    skeletonHelper: SkeletonHelperProps
-    pointLightHelper: PointLightHelperProps
-    hemisphereLightHelper: HemisphereLightHelperProps
-    gridHelper: GridHelperProps
-    polarGridHelper: PolarGridHelperProps
-    directionalLightHelper: DirectionalLightHelperProps
-    boxHelper: BoxHelperProps
-    box3Helper: Box3HelperProps
-    planeHelper: PlaneHelperProps
-    arrowHelper: ArrowHelperProps
-    axesHelper: AxesHelperProps
-
-
-    // misc
-    raycaster: RaycasterProps
-    vector2: Vector2Props
-    vector3: Vector3Props
-    vector4: Vector4Props
-    euler: EulerProps
-    matrix3: Matrix3Props
-    matrix4: Matrix4Props
-    quaternion: QuaternionProps
-    bufferAttribute: BufferAttributeProps
-    instancedBufferAttribute: InstancedBufferAttributeProps
-    color: ColorProps
-    fog: FogProps
-    fogExp2: FogExp2Props
-    shape: ShapeProps
-*/

package/src/core/index.ts

@@ -5,5 +5,6 @@ export * from './interaction'
 export * from './extend'
 export * from './instantiateThreeObject'
 export * from './minidom'
+export * from './start'
 export * from './update'
-export * from './updateObjectProp'
+export * from './updateObjectProp'

package/src/core/start.ts

@@ -0,0 +1,11 @@
+import { Lunch } from '..'
+
+export const startCallbacks = [] as Lunch.UpdateCallback[]
+
+export const onStart = (cb: Lunch.UpdateCallback, index = Infinity) => {
+    if (index === Infinity) {
+        startCallbacks.push(cb)
+    } else {
+        startCallbacks.splice(index, 0, cb)
+    }
+}

package/src/core/update.ts

@@ -53,6 +53,15 @@ export const onBeforeRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
     }
 }
 
+export const offBeforeRender = (cb: Lunch.UpdateCallback | number) => {
+    if (isFinite(cb as number)) {
+        beforeRender.splice(cb as number, 1)
+    } else {
+        const idx = beforeRender.findIndex((v) => v == cb)
+        beforeRender.splice(idx, 1)
+    }
+}
+
 export const onAfterRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
     if (index === Infinity) {
         afterRender.push(cb)
@@ -61,6 +70,15 @@ export const onAfterRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
     }
 }
 
+export const offAfterRender = (cb: Lunch.UpdateCallback | number) => {
+    if (isFinite(cb as number)) {
+        afterRender.splice(cb as number, 1)
+    } else {
+        const idx = afterRender.findIndex((v) => v == cb)
+        afterRender.splice(idx, 1)
+    }
+}
+
 export const cancelUpdate = () => {
     if (frameID) cancelAnimationFrame(frameID)
 }

package/src/index.ts

@@ -1,4 +1,11 @@
-import { computed, createRenderer, Component, ref, watch } from 'vue'
+import {
+    computed,
+    createRenderer,
+    Component,
+    ref,
+    watch,
+    WatchStopHandle,
+} from 'vue'
 import { nodeOps } from './nodeOps'
 import {
     // createdCamera,
@@ -17,7 +24,13 @@ import { components } from './components'
 import { Lunch } from './types'
 
 export { lunchboxRootNode as lunchboxTree } from './core'
-export { onBeforeRender, onAfterRender } from './core'
+export {
+    offAfterRender,
+    offBeforeRender,
+    onAfterRender,
+    onBeforeRender,
+    onStart,
+} from './core'
 export * from './types'
 
 // Utilities
@@ -30,9 +43,74 @@ export const globals = {
     mousePos,
 }
 
+/** The current camera. Often easier to use `useCamera` instead of this. */
 export const camera = computed(() => ensuredCamera.value?.instance ?? null)
+/** Run a function using the current camera when it's present. */
+export function useCamera<T extends THREE.Camera = THREE.PerspectiveCamera>(
+    callback: (cam: T) => void,
+    once = true
+) {
+    let destroy: WatchStopHandle
+    destroy = watch(
+        camera,
+        (newVal) => {
+            if (!newVal) return
+
+            // TODO: better fix than `any`?
+            callback(newVal as any)
+            if (once) {
+                destroy?.()
+            }
+        },
+        { immediate: true }
+    )
+}
+
+/** The current renderer. Often easier to use `useRenderer` instead of this. */
 export const renderer = computed(() => ensureRenderer.value?.instance ?? null)
+/** Run a function using the current renderer when it's present. */
+export function useRenderer<T extends THREE.Renderer = THREE.WebGLRenderer>(
+    callback: (rend: T) => void,
+    once = true
+) {
+    let destroy: WatchStopHandle
+    destroy = watch(
+        renderer,
+        (newVal) => {
+            if (!newVal) return
+
+            // TODO: better fix than `any`?
+            callback(newVal as any)
+            if (once) {
+                destroy?.()
+            }
+        },
+        { immediate: true }
+    )
+}
+
+/** The current scene. Often easier to use `useScene` instead of this. */
 export const scene = computed(() => ensuredScene.value.instance)
+/** Run a function using the current scene when it's present. */
+export function useScene(
+    callback: (newScene: THREE.Scene) => void,
+    once = true
+) {
+    let destroy: WatchStopHandle
+    destroy = watch(
+        scene,
+        (newVal) => {
+            if (!newVal) return
+
+            // TODO: better fix than `any`?
+            callback(newVal as any)
+            if (once) {
+                destroy?.()
+            }
+        },
+        { immediate: true }
+    )
+}
 
 // CUSTOM RENDER SUPPORT
 // ====================

package/src/types.ts

@@ -139,10 +139,14 @@ export declare namespace Lunch {
     interface WrapperProps {
         background?: string
         cameraArgs?: any[]
+        cameraLook?: [number, number, number]
+        cameraLookAt?: [number, number, number]
         cameraPosition?: [number, number, number]
         dpr?: number
         ortho?: boolean
         orthographic?: boolean
+        // TODO: Why doesn't ConstructorParameters<THREE.WebGLRenderer> work here?
+        rendererArguments?: object
         rendererProperties?: Partial<THREE.WebGLRenderer>
         shadow?: ShadowSugar
         transparent?: boolean