lunchboxjs 0.1.4012 → 0.1.4015

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2022 Breakfast Studio, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,3 +1,17 @@
 Custom Vue 3 renderer for ThreeJS.
 
+## Full Docs
+
 [Docs](//docs.lunchboxjs.com)
+
+## Local Dev
+
+`npm run dev` to run dev server. From there, edit source code in `/src/...` and examples in `/demo/...` to build and test features.
+
+### Creating Examples
+
+Run `npm run demo:create` to create a new demo.
+
+## Docs Dev
+
+`npm run docs:dev` to run docs dev. Docs exist as a Vitepress site in the `/docs` folder.

package/dist/lunchboxjs.js

@@ -87,6 +87,8 @@
         });
     };
 
+    // TODO:
+    // Continue r3f prop - what else (besides camera fov) makes r3f look good?
     /** fixed & fill styling for container */
     const fillStyle = (position) => {
         return {
@@ -111,6 +113,7 @@
             dpr: Number,
             ortho: Boolean,
             orthographic: Boolean,
+            r3f: Boolean,
             rendererArguments: Object,
             rendererProperties: Object,
             shadow: [Boolean, Object],
@@ -125,6 +128,10 @@
             let renderer;
             let camera;
             let scene;
+            // https://threejs.org/docs/index.html#manual/en/introduction/Color-management
+            if (props.r3f && THREE__namespace?.ColorManagement) {
+                THREE__namespace.ColorManagement.legacyMode = false;
+            }
             // MOUNT
             // ====================
             vue.onMounted(() => {
@@ -145,6 +152,9 @@
                         alpha: props.transparent,
                         antialias: true,
                         canvas: canvas.value.domElement,
+                        powerPreference: !!props.r3f
+                            ? 'high-performance'
+                            : 'default',
                         ...(props.rendererArguments ?? {}),
                     };
                     // create new renderer
@@ -158,6 +168,15 @@
                     // we've initialized the renderer, so anything depending on it can execute now
                     rendererReady.value = true;
                     const rendererAsWebGlRenderer = ensureRenderer;
+                    // apply r3f settings if desired
+                    if (props.r3f) {
+                        if (rendererAsWebGlRenderer.value.instance) {
+                            rendererAsWebGlRenderer.value.instance.outputEncoding =
+                                THREE__namespace.sRGBEncoding;
+                            rendererAsWebGlRenderer.value.instance.toneMapping =
+                                THREE__namespace.ACESFilmicToneMapping;
+                        }
+                    }
                     // update render sugar
                     const sugar = {
                         shadow: props.shadow,
@@ -205,7 +224,12 @@
                     else {
                         ensuredCamera.value = createNode({
                             props: {
-                                args: props.cameraArgs ?? [45, 0.5625, 1, 1000],
+                                args: props.cameraArgs ?? [
+                                    props.r3f ? 75 : 45,
+                                    0.5625,
+                                    1,
+                                    1000,
+                                ],
                             },
                             type: 'PerspectiveCamera',
                             uuid: fallbackCameraUuid,
@@ -238,7 +262,7 @@
                 scene = ensuredScene.value;
                 // set background color
                 if (scene && scene.instance && props.background) {
-                    scene.instance.background = new THREE.Color(props.background);
+                    scene.instance.background = new THREE__namespace.Color(props.background);
                 }
                 // MISC PROPERTIES
                 // ====================
@@ -544,76 +568,6 @@
         return node.isLunchboxRootNode;
     };
 
-    /** Create a new Lunchbox comment node. */
-    function createCommentNode(options = {}) {
-        const defaults = {
-            text: options.text ?? '',
-        };
-        return new MiniDom.RendererCommentNode({
-            ...defaults,
-            ...options,
-            metaType: 'commentMeta',
-        });
-    }
-    /** Create a new DOM node. */
-    function createDomNode(options = {}) {
-        const domElement = document.createElement(options.type ?? '');
-        const defaults = {
-            domElement,
-        };
-        const node = new MiniDom.RendererDomNode({
-            ...defaults,
-            ...options,
-            metaType: 'domMeta',
-        });
-        return node;
-    }
-    /** Create a new Lunchbox text node. */
-    function createTextNode(options = {}) {
-        const defaults = {
-            text: options.text ?? '',
-        };
-        return new MiniDom.RendererTextNode({
-            ...options,
-            ...defaults,
-            metaType: 'textMeta',
-        });
-    }
-    /** Create a new Lunchbox standard node. */
-    function createNode(options = {}, props = {}) {
-        const defaults = {
-            attached: options.attached ?? [],
-            attachedArray: options.attachedArray ?? {},
-            instance: options.instance ?? null,
-        };
-        const node = new MiniDom.RendererStandardNode({
-            ...options,
-            ...defaults,
-            metaType: 'standardMeta',
-        });
-        if (node.type && !isLunchboxRootNode(node) && !node.instance) {
-            // if (node.type.includes('Camera')) {
-            //     console.log(node.type, {
-            //         ...node.props,
-            //         ...props,
-            //     })
-            //     console.trace()
-            // }
-            node.instance = instantiateThreeObject({
-                ...node,
-                props: {
-                    ...node.props,
-                    ...props,
-                },
-            });
-        }
-        if (node.type === 'scene') {
-            // manually set scene override
-            ensuredScene.value = node;
-        }
-        return node;
-    }
-
     const interactables = [];
     const addInteractable = (target) => {
         interactables.push(target);
@@ -939,17 +893,10 @@
             overrides[pascalType] = val;
         },
     });
-    // export const ensuredCamera = buildEnsured<THREE.Camera>(
-    //     ['PerspectiveCamera', 'OrthographicCamera'],
-    //     fallbackCameraUuid,
-    //     {
-    //         args: [45, 0.5625, 1, 1000],
-    //     }
-    // )
     // ENSURE RENDERER
     // ====================
     const fallbackRendererUuid = 'FALLBACK_RENDERER';
-    const v = buildEnsured(
+    const ensuredRenderer = buildEnsured(
     // TODO: ensure support for css/svg renderers
     ['WebGLRenderer'], //, 'CSS2DRenderer', 'CSS3DRenderer', 'SVGRenderer'],
     fallbackRendererUuid, {});
@@ -958,7 +905,7 @@
     const rendererReady = vue.ref(false);
     const ensureRenderer = vue.computed({
         get() {
-            return (rendererReady.value ? v.value : null);
+            return (rendererReady.value ? ensuredRenderer.value : null);
         },
         set(val) {
             const t = val.type ?? '';
@@ -975,6 +922,80 @@
     // `unknown` is intentional here - we need to typecast the node since Raycaster isn't an Object3D
     const ensuredRaycaster = buildEnsured('Raycaster', autoRaycasterUuid, {}, (node) => setupAutoRaycaster(node));
 
+    /** Create a new Lunchbox comment node. */
+    function createCommentNode(options = {}) {
+        const defaults = {
+            text: options.text ?? '',
+        };
+        return new MiniDom.RendererCommentNode({
+            ...defaults,
+            ...options,
+            metaType: 'commentMeta',
+        });
+    }
+    /** Create a new DOM node. */
+    function createDomNode(options = {}) {
+        const domElement = document.createElement(options.type ?? '');
+        const defaults = {
+            domElement,
+        };
+        const node = new MiniDom.RendererDomNode({
+            ...defaults,
+            ...options,
+            metaType: 'domMeta',
+        });
+        return node;
+    }
+    /** Create a new Lunchbox text node. */
+    function createTextNode(options = {}) {
+        const defaults = {
+            text: options.text ?? '',
+        };
+        return new MiniDom.RendererTextNode({
+            ...options,
+            ...defaults,
+            metaType: 'textMeta',
+        });
+    }
+    /** Create a new Lunchbox standard node. */
+    function createNode(options = {}, props = {}) {
+        const defaults = {
+            attached: options.attached ?? [],
+            attachedArray: options.attachedArray ?? {},
+            instance: options.instance ?? null,
+        };
+        const node = new MiniDom.RendererStandardNode({
+            ...options,
+            ...defaults,
+            metaType: 'standardMeta',
+        });
+        if (node.type && !isLunchboxRootNode(node) && !node.instance) {
+            // if (node.type.includes('Camera')) {
+            //     console.log(node.type, {
+            //         ...node.props,
+            //         ...props,
+            //     })
+            //     console.trace()
+            // }
+            node.instance = instantiateThreeObject({
+                ...node,
+                props: {
+                    ...node.props,
+                    ...props,
+                },
+            });
+        }
+        // TODO: these manual overrides are a bit brittle - replace?
+        if (node.type?.toLowerCase() === 'scene') {
+            // manually set scene override
+            ensuredScene.value = node;
+        }
+        else if (node.type?.toLowerCase().endsWith('camera')) {
+            ensuredCamera.value = node;
+        }
+        return node;
+    }
+
     const createComponent = (tag) => vue.defineComponent({
         inheritAttrs: false,
         name: tag,
@@ -1731,46 +1752,31 @@
     /** 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) => {
+    function useCamera(callback) {
+        return 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) => {
+    function useRenderer(callback) {
+        return 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) => {
+    function useScene(callback) {
+        return vue.watch(scene, (newVal) => {
             if (!newVal)
                 return;
-            // TODO: better fix than `any`?
             callback(newVal);
-            if (once) {
-                destroy?.();
-            }
         }, { immediate: true });
     }
     // CUSTOM RENDER SUPPORT
@@ -1799,12 +1805,14 @@
         app = vue.createRenderer(nodeOps).createApp(root);
         // register all components
         Object.keys(components).forEach((key) => {
-            app.component(key, components[key]);
+            app?.component(key, components[key]);
         });
         // update mount function to match Lunchbox.Node
         const { mount } = app;
         app.mount = (root, ...args) => {
+            // find DOM element to use as app root
             const domElement = (typeof root === 'string' ? document.querySelector(root) : root);
+            // create or find root node
             const rootNode = ensureRootNode({
                 domElement,
                 isLunchboxRootNode: 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=z.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,cameraLook:Array,cameraLookAt:Array,cameraPosition:Array,dpr:Number,ortho:Boolean,orthographic:Boolean,rendererArguments:Object,rendererProperties:Object,shadow:[Boolean,Object],transparent:Boolean,zoom:Number},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=G(["WebGLRenderer"]),l)s.value=!1,W.value=!0;else{const t={alpha:e.transparent,antialias:!0,canvas:a.value.domElement,...e.rendererArguments??{}};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=G(["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.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(p&&void 0!==e.zoom&&(p.instance.zoom=e.zoom),m=z.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),he.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 te)e({app:o,camera:p.instance,renderer:l.instance,scene:m.instance});ae({app:o,camera:p.instance,renderer:l.instance,scene:m.instance})})),t.onBeforeUnmount((()=>{ie()})),()=>[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&&(z.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)&&(K.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,A,C;const E=t.ref({x:1/0,y:1/0});let L=!1;let P=[];const M=()=>{const e=K.value?.instance,t=F.value?.instance;if(!e||!t)return;e.setFromCamera(he.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})=>{N({element:e,eventKeys:["onPointerEnter"],intersection:t})})),a.forEach((({element:e,intersection:t})=>{N({element:e,eventKeys:["onPointerOver","onPointerMove"],intersection:t})})),s.forEach((({element:e,intersection:t})=>{N({element:e,eventKeys:["onPointerLeave","onPointerOut"],intersection:t})})),P=[].concat(o,a)},N=({element:e,eventKeys:t,intersection:n})=>{e&&t.forEach((t=>{e.eventListeners[t]&&e.eventListeners[t].forEach((e=>{e({intersection:n})}))}))};function B(t={}){return e.lunchboxTree||(e.lunchboxTree=new J.RendererRootNode(t)),e.lunchboxTree}function G(e){Array.isArray(e)||(e=[e]);for(let t of e)if(O[t])return O[t];for(let n of e){const e=T[n]||s.find((e=>e.type?.toLowerCase()===n.toLowerCase()));if(!(t=e,"RendererNode"!==t?.minidomType||!1!==e.props["is-default"]&&!1!=!e.props.isDefault))return null;if(e){const t=e;return T[n]=t,t}}var t;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=G(e);if(t)return t;const a=B(),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}}),z=j("Scene","FALLBACK_SCENE"),K=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)/he.dpr.value,r=(e.instance.domElement.height??1)/he.dpr.value;E.value.x=t.offsetX/n*2-1,E.value.y=-t.offsetY/r*2+1},A=()=>b.value=!0,C=()=>b.value=!1,e.instance.domElement.addEventListener("mousemove",w),e.instance.domElement.addEventListener("mousedown",A),e.instance.domElement.addEventListener("mouseup",C),se(M),L=!0),n&&n())}),{immediate:!0})})(e))),_=e=>t.defineComponent({inheritAttrs:!1,name:e,render(){return t.h(e,this.$attrs,this.$slots?.default?.()||[])}});var V,q=new Uint8Array(16);function H(){if(!V&&!(V="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 V(q)}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={}));(new J.RendererRootNode).minidomType="RootNode";const te=[];let ne;const re=[],oe=[],ae=e=>{ne=requestAnimationFrame((()=>ae({app:e.app,renderer:I.value?.instance,scene:z.value.instance,camera:F.value?.instance})));const{app:n,renderer:r,scene:o,camera:a}=e;re.forEach((t=>{t&&t(e)})),r&&o&&a&&(n.customRender?n.customRender(e):r.render(t.toRaw(o),t.toRaw(a))),oe.forEach((t=>{t&&t(e)}))},se=(e,t=1/0)=>{t===1/0?re.push(e):re.splice(t,0,e)},ie=()=>{ne&&cancelAnimationFrame(ne)};const ce={x:"position.x",y:"position.y",z:"position.z"},de=["","parameters"],ue=["args","attach","attachArray","is.default","isDefault","key","onAdded","ref","src"],le=["geometry","material"];function pe(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 me={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 le.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??B();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=z.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);pe(e,t,e.props.attach,r)}else n.load(e.props.src,(n=>{pe(e,t,e.props.attach,n)}),null,(e=>{throw new Error(e)}))}(e,t):pe(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});const o=t.replace(/-/g,"."),a=ce[o]||o;if(ue.includes(t)||ue.includes(a))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 s=e.instance;if(!s)return e;let i;for(let e=0;e<de.length&&!i;e++){const t=[de[e],a].filter(Boolean).join(".");i=i=r.get(s,t)}if(i&&r.isNumber(n)&&i.setScalar)i.setScalar(n);else if(i&&i.set){const e=Array.isArray(n)?n:[n];s[a].set(...e)}else"function"==typeof i?i.bind(e.instance)(...n):void 0!==r.get(s,a,void 0)?r.set(s,a,""===n||n):console.log(`No property ${a} found on ${s}`);const c=s?.texture?.type||s?.type;if("string"==typeof c){const e=c.toLowerCase();switch(!0){case e.includes("material"):s.needsUpdate=!0;break;case e.includes("camera")&&s.updateProjectionMatrix:s.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(){}},he={dpr:t.ref(1),inputActive:b,mousePos:E},fe=t.computed((()=>F.value?.instance??null));const ye=t.computed((()=>I.value?.instance??null));const ve=t.computed((()=>z.value.instance));let ge=null,be=null;e.camera=fe,e.clearCustomRender=()=>{ge?ge.clearCustomRender():be=null},e.createApp=e=>{ge=t.createRenderer(me).createApp(e),Object.keys(p).forEach((e=>{ge.component(e,p[e])}));const{mount:n}=ge;return ge.mount=(e,...t)=>{const r=B({domElement:"string"==typeof e?document.querySelector(e):e,isLunchboxRootNode:!0,name:"root",metaType:"rootMeta",type:"root",uuid:"LUNCHBOX_ROOT"});ge.rootNode=r;return n(r,...t)},ge.extend=e=>((({app:e,...t})=>{Object.keys(t).forEach((n=>{e.component(n,_(n)),u[n]=t[n]}))})({app:ge,...e}),ge),ge.setCustomRender=e=>{ge.customRender=e},be&&(ge.setCustomRender(be),be=null),ge.clearCustomRender=()=>{ge.customRender=null},ge},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=he,e.offAfterRender=e=>{if(isFinite(e))oe.splice(e,1);else{const t=oe.findIndex((t=>t==e));oe.splice(t,1)}},e.offBeforeRender=e=>{if(isFinite(e))re.splice(e,1);else{const t=re.findIndex((t=>t==e));re.splice(t,1)}},e.onAfterRender=(e,t=1/0)=>{t===1/0?oe.push(e):oe.splice(t,0,e)},e.onBeforeRender=se,e.onStart=(e,t=1/0)=>{t===1/0?te.push(e):te.splice(t,0,e)},e.renderer=ye,e.scene=ve,e.setCustomRender=e=>{ge?ge.setCustomRender(e):be=e},e.useCamera=function(e,n=!0){let r;r=t.watch(fe,(t=>{t&&(e(t),n&&r?.())}),{immediate:!0})},e.useRenderer=function(e,n=!0){let r;r=t.watch(ye,(t=>{t&&(e(t),n&&r?.())}),{immediate:!0})},e.useScene=function(e,n=!0){let r;r=t.watch(ve,(t=>{t&&(e(t),n&&r?.())}),{immediate:!0})},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=W.value?.instance,o=I.value.instance,a=D.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,r3f:Boolean,rendererArguments:Object,rendererProperties:Object,shadow:[Boolean,Object],transparent:Boolean,zoom:Number},setup(e,n){const o=t.ref(),s=t.ref(!0),d=t.ref(e.dpr??-1),u=t.ref();let l,p,m;return e.r3f&&a?.ColorManagement&&(a.ColorManagement.legacyMode=!1),t.onMounted((()=>{if(!o.value)throw new Error("missing canvas");if(l=N(["WebGLRenderer"]),l)s.value=!1,U.value=!0;else{const t={alpha:e.transparent,antialias:!0,canvas:o.value.domElement,powerPreference:e.r3f?"high-performance":"default",...e.rendererArguments??{}};W.value=K({type:"WebGLRenderer",uuid:F,props:{args:[t]}}),U.value=!0;const n=W;e.r3f&&n.value.instance&&(n.value.instance.outputEncoding=a.sRGBEncoding,n.value.instance.toneMapping=a.ACESFilmicToneMapping);const s={shadow:e.shadow};n.value.instance&&s?.shadow&&(n.value.instance.shadowMap.enabled=!0,"object"==typeof s.shadow&&(n.value.instance.shadowMap.type=s.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?S.value=!0:(e.ortho||e.orthographic?D.value=K({props:{args:e.cameraArgs??[]},type:"OrthographicCamera",uuid:j}):D.value=K({props:{args:e.cameraArgs??[e.r3f?75:45,.5625,1,1e3]},type:"PerspectiveCamera",uuid:j}),S.value=!0,p=D.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(p&&void 0!==e.zoom&&(p.instance.zoom=e.zoom),m=I.value,m&&m.instance&&e.background&&(m.instance.background=new a.Color(e.background)),-1===d.value&&(d.value=window.devicePixelRatio),!l?.instance)throw new Error("missing renderer");l.instance.setPixelRatio(d.value),he.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 n=t.getCurrentInstance().appContext.app;for(let e of te)e({app:n,camera:p.instance,renderer:l.instance,scene:m.instance});ae({app:n,camera:p.instance,renderer:l.instance,scene:m.instance})})),t.onBeforeUnmount((()=>{ie()})),()=>[n.slots.default?.()??null,t.h("div",{style:c("absolute"),ref:u},[s.value?t.h("canvas",{style:c("fixed"),class:"lunchbox-canvas",ref:o}):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,v=[],g=t.ref(!1);function b({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),x.includes(n)&&(z.value,e.instance&&!v.includes(e)&&(o=e,v.push(o),e.eventListenerRemoveFunctions[n].push((()=>(e=>{const t=v.indexOf(e);-1!==t&&v.splice(t,1)})(e))))),"onClick"===n||"onPointerDown"===n||"onPointerUp"===n){const r=t.watch((()=>g.value),(t=>{const r=L.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:L[r].intersection})})))}));e.eventListenerRemoveFunctions[n].push(r)}return e}const x=["onClick","onPointerUp","onPointerDown","onPointerOver","onPointerOut","onPointerEnter","onPointerLeave","onPointerMove"];let R,w,A;const C=t.ref({x:1/0,y:1/0});let E=!1;let L=[];const P=()=>{const e=z.value?.instance,t=D.value?.instance;if(!e||!t)return;e.setFromCamera(he.mousePos.value,t);const n=e.intersectObjects(v.map((e=>e.instance)));let r=[],o=[],a=[];r=L.map((e=>e.intersection)),n?.forEach((e=>{if(-1===L.findIndex((t=>t.intersection.object===e.object))){const t=v.find((t=>t.instance?.uuid===e.object.uuid));t&&o.push({element:t,intersection:e})}else{const t=v.find((t=>t.instance?.uuid===e.object.uuid));t&&a.push({element:t,intersection:e})}const t=r.findIndex((t=>t.object.uuid===e.object.uuid));-1!==t&&r.splice(t,1)}));const s=r.map((e=>({element:v.find((t=>t.instance?.uuid===e.object.uuid)),intersection:e})));o.forEach((({element:e,intersection:t})=>{M({element:e,eventKeys:["onPointerEnter"],intersection:t})})),a.forEach((({element:e,intersection:t})=>{M({element:e,eventKeys:["onPointerOver","onPointerMove"],intersection:t})})),s.forEach((({element:e,intersection:t})=>{M({element:e,eventKeys:["onPointerLeave","onPointerOut"],intersection:t})})),L=[].concat(o,a)},M=({element:e,eventKeys:t,intersection:n})=>{e&&t.forEach((t=>{e.eventListeners[t]&&e.eventListeners[t].forEach((e=>{e({intersection:n})}))}))};function B(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(T[t])return T[t];for(let n of e){const e=G[n]||s.find((e=>e.type?.toLowerCase()===n.toLowerCase()));if(!(t=e,"RendererNode"!==t?.minidomType||!1!==e.props["is-default"]&&!1!=!e.props.isDefault))return null;if(e){const t=e;return G[n]=t,t}}var t;return null}e.lunchboxTree=void 0;const G=t.reactive({}),T=t.reactive({});function O(e,n,r={},o=null){Array.isArray(e)||(e=[e]);for(let t of e)G[t]||(G[t]=null),T[t]||(T[t]=null);return t.computed({get(){const t=N(e);if(t)return t;const a=B(),s=K({type:e[0],uuid:n,props:r});return a.addChild(s),G[e[0]]=s,o&&o(s),s},set(e){const t=e.type??"",n=t[0].toUpperCase()+t.slice(1);T[n]=e}})}const j="FALLBACK_CAMERA",k=O(["PerspectiveCamera","OrthographicCamera"],j,{args:[45,.5625,1,1e3]}),S=t.ref(!1),D=t.computed({get:()=>S.value?k.value:null,set(e){const t=e.type??"",n=t[0].toUpperCase()+t.slice(1);T[n]=e}}),F="FALLBACK_RENDERER",$=O(["WebGLRenderer"],F,{}),U=t.ref(!1),W=t.computed({get:()=>U.value?$.value:null,set(e){const t=e.type??"",n=t[0].toUpperCase()+t.slice(1);T[n]=e}}),I=O("Scene","FALLBACK_SCENE"),z=O("Raycaster","AUTO_RAYCASTER",{},(e=>(e=>{if(!e.instance)return;let n=null;n=t.watch((()=>W.value),(e=>{e?.instance&&(E||(R=t=>{const n=(e.instance.domElement.width??1)/he.dpr.value,r=(e.instance.domElement.height??1)/he.dpr.value;C.value.x=t.offsetX/n*2-1,C.value.y=-t.offsetY/r*2+1},w=()=>g.value=!0,A=()=>g.value=!1,e.instance.domElement.addEventListener("mousemove",R),e.instance.domElement.addEventListener("mousedown",w),e.instance.domElement.addEventListener("mouseup",A),se(P),E=!0),n&&n())}),{immediate:!0})})(e)));function K(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?.toLowerCase()?I.value=r:r.type?.toLowerCase().endsWith("camera")&&(D.value=r),r}const _=e=>t.defineComponent({inheritAttrs:!1,name:e,render(){return t.h(e,this.$attrs,this.$slots?.default?.()||[])}});var V,q=new Uint8Array(16);function H(){if(!V&&!(V="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 V(q)}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={}));(new J.RendererRootNode).minidomType="RootNode";const te=[];let ne;const re=[],oe=[],ae=e=>{ne=requestAnimationFrame((()=>ae({app:e.app,renderer:W.value?.instance,scene:I.value.instance,camera:D.value?.instance})));const{app:n,renderer:r,scene:o,camera:a}=e;re.forEach((t=>{t&&t(e)})),r&&o&&a&&(n.customRender?n.customRender(e):r.render(t.toRaw(o),t.toRaw(a))),oe.forEach((t=>{t&&t(e)}))},se=(e,t=1/0)=>{t===1/0?re.push(e):re.splice(t,0,e)},ie=()=>{ne&&cancelAnimationFrame(ne)};const ce={x:"position.x",y:"position.y",z:"position.z"},de=["","parameters"],ue=["args","attach","attachArray","is.default","isDefault","key","onAdded","ref","src"],le=["geometry","material"];function pe(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 me={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=K(o);return le.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??B();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=I.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);pe(e,t,e.props.attach,r)}else n.load(e.props.src,(n=>{pe(e,t,e.props.attach,n)}),null,(e=>{throw new Error(e)}))}(e,t):pe(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 b({node:e,key:t,value:n});const o=t.replace(/-/g,"."),a=ce[o]||o;if(ue.includes(t)||ue.includes(a))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 s=e.instance;if(!s)return e;let i;for(let e=0;e<de.length&&!i;e++){const t=[de[e],a].filter(Boolean).join(".");i=i=r.get(s,t)}if(i&&r.isNumber(n)&&i.setScalar)i.setScalar(n);else if(i&&i.set){const e=Array.isArray(n)?n:[n];s[a].set(...e)}else"function"==typeof i?i.bind(e.instance)(...n):void 0!==r.get(s,a,void 0)?r.set(s,a,""===n||n):console.log(`No property ${a} found on ${s}`);const c=s?.texture?.type||s?.type;if("string"==typeof c){const e=c.toLowerCase();switch(!0){case e.includes("material"):s.needsUpdate=!0;break;case e.includes("camera")&&s.updateProjectionMatrix:s.updateProjectionMatrix()}}}({node:e,key:t,value:o})},remove:e=>{if(!e)return;const t=Object.keys(T),n=[];e.walk((e=>(n.push(e),!0))),n.forEach((e=>{const n=t.find((t=>T[t]?.uuid===e.uuid));if(n&&(T[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(){}},he={dpr:t.ref(1),inputActive:g,mousePos:C},fe=t.computed((()=>D.value?.instance??null));const ye=t.computed((()=>W.value?.instance??null));const ve=t.computed((()=>I.value.instance));let ge=null,be=null;e.camera=fe,e.clearCustomRender=()=>{ge?ge.clearCustomRender():be=null},e.createApp=e=>{ge=t.createRenderer(me).createApp(e),Object.keys(p).forEach((e=>{ge?.component(e,p[e])}));const{mount:n}=ge;return ge.mount=(e,...t)=>{const r=B({domElement:"string"==typeof e?document.querySelector(e):e,isLunchboxRootNode:!0,name:"root",metaType:"rootMeta",type:"root",uuid:"LUNCHBOX_ROOT"});ge.rootNode=r;return n(r,...t)},ge.extend=e=>((({app:e,...t})=>{Object.keys(t).forEach((n=>{e.component(n,_(n)),u[n]=t[n]}))})({app:ge,...e}),ge),ge.setCustomRender=e=>{ge.customRender=e},be&&(ge.setCustomRender(be),be=null),ge.clearCustomRender=()=>{ge.customRender=null},ge},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=he,e.offAfterRender=e=>{if(isFinite(e))oe.splice(e,1);else{const t=oe.findIndex((t=>t==e));oe.splice(t,1)}},e.offBeforeRender=e=>{if(isFinite(e))re.splice(e,1);else{const t=re.findIndex((t=>t==e));re.splice(t,1)}},e.onAfterRender=(e,t=1/0)=>{t===1/0?oe.push(e):oe.splice(t,0,e)},e.onBeforeRender=se,e.onStart=(e,t=1/0)=>{t===1/0?te.push(e):te.splice(t,0,e)},e.renderer=ye,e.scene=ve,e.setCustomRender=e=>{ge?ge.setCustomRender(e):be=e},e.useCamera=function(e){return t.watch(fe,(t=>{t&&e(t)}),{immediate:!0})},e.useRenderer=function(e){return t.watch(ye,(t=>{t&&e(t)}),{immediate:!0})},e.useScene=function(e){return t.watch(ve,(t=>{t&&e(t)}),{immediate:!0})},Object.defineProperty(e,"__esModule",{value:!0})}));

package/dist/lunchboxjs.module.js

@@ -1,6 +1,5 @@
 import { toRaw, ref, onMounted, getCurrentInstance, onBeforeUnmount, h, defineComponent, isRef, isVNode, watch, reactive, computed, createRenderer } from 'vue';
 import * as THREE from 'three';
-import { Color } from 'three';
 import { set, get, isNumber } from 'lodash';
 
 // this needs to be in a separate file to ensure it's created immediately
@@ -66,6 +65,8 @@ const prepCanvas = (container, canvasElement, onBeforeUnmount) => {
     });
 };
 
+// TODO:
+// Continue r3f prop - what else (besides camera fov) makes r3f look good?
 /** fixed & fill styling for container */
 const fillStyle = (position) => {
     return {
@@ -90,6 +91,7 @@ const LunchboxWrapper = {
         dpr: Number,
         ortho: Boolean,
         orthographic: Boolean,
+        r3f: Boolean,
         rendererArguments: Object,
         rendererProperties: Object,
         shadow: [Boolean, Object],
@@ -104,6 +106,10 @@ const LunchboxWrapper = {
         let renderer;
         let camera;
         let scene;
+        // https://threejs.org/docs/index.html#manual/en/introduction/Color-management
+        if (props.r3f && THREE?.ColorManagement) {
+            THREE.ColorManagement.legacyMode = false;
+        }
         // MOUNT
         // ====================
         onMounted(() => {
@@ -124,6 +130,9 @@ const LunchboxWrapper = {
                     alpha: props.transparent,
                     antialias: true,
                     canvas: canvas.value.domElement,
+                    powerPreference: !!props.r3f
+                        ? 'high-performance'
+                        : 'default',
                     ...(props.rendererArguments ?? {}),
                 };
                 // create new renderer
@@ -137,6 +146,15 @@ const LunchboxWrapper = {
                 // we've initialized the renderer, so anything depending on it can execute now
                 rendererReady.value = true;
                 const rendererAsWebGlRenderer = ensureRenderer;
+                // apply r3f settings if desired
+                if (props.r3f) {
+                    if (rendererAsWebGlRenderer.value.instance) {
+                        rendererAsWebGlRenderer.value.instance.outputEncoding =
+                            THREE.sRGBEncoding;
+                        rendererAsWebGlRenderer.value.instance.toneMapping =
+                            THREE.ACESFilmicToneMapping;
+                    }
+                }
                 // update render sugar
                 const sugar = {
                     shadow: props.shadow,
@@ -184,7 +202,12 @@ const LunchboxWrapper = {
                 else {
                     ensuredCamera.value = createNode({
                         props: {
-                            args: props.cameraArgs ?? [45, 0.5625, 1, 1000],
+                            args: props.cameraArgs ?? [
+                                props.r3f ? 75 : 45,
+                                0.5625,
+                                1,
+                                1000,
+                            ],
                         },
                         type: 'PerspectiveCamera',
                         uuid: fallbackCameraUuid,
@@ -217,7 +240,7 @@ const LunchboxWrapper = {
             scene = ensuredScene.value;
             // set background color
             if (scene && scene.instance && props.background) {
-                scene.instance.background = new Color(props.background);
+                scene.instance.background = new THREE.Color(props.background);
             }
             // MISC PROPERTIES
             // ====================
@@ -523,76 +546,6 @@ const isLunchboxRootNode = (node) => {
     return node.isLunchboxRootNode;
 };
 
-/** Create a new Lunchbox comment node. */
-function createCommentNode(options = {}) {
-    const defaults = {
-        text: options.text ?? '',
-    };
-    return new MiniDom.RendererCommentNode({
-        ...defaults,
-        ...options,
-        metaType: 'commentMeta',
-    });
-}
-/** Create a new DOM node. */
-function createDomNode(options = {}) {
-    const domElement = document.createElement(options.type ?? '');
-    const defaults = {
-        domElement,
-    };
-    const node = new MiniDom.RendererDomNode({
-        ...defaults,
-        ...options,
-        metaType: 'domMeta',
-    });
-    return node;
-}
-/** Create a new Lunchbox text node. */
-function createTextNode(options = {}) {
-    const defaults = {
-        text: options.text ?? '',
-    };
-    return new MiniDom.RendererTextNode({
-        ...options,
-        ...defaults,
-        metaType: 'textMeta',
-    });
-}
-/** Create a new Lunchbox standard node. */
-function createNode(options = {}, props = {}) {
-    const defaults = {
-        attached: options.attached ?? [],
-        attachedArray: options.attachedArray ?? {},
-        instance: options.instance ?? null,
-    };
-    const node = new MiniDom.RendererStandardNode({
-        ...options,
-        ...defaults,
-        metaType: 'standardMeta',
-    });
-    if (node.type && !isLunchboxRootNode(node) && !node.instance) {
-        // if (node.type.includes('Camera')) {
-        //     console.log(node.type, {
-        //         ...node.props,
-        //         ...props,
-        //     })
-        //     console.trace()
-        // }
-        node.instance = instantiateThreeObject({
-            ...node,
-            props: {
-                ...node.props,
-                ...props,
-            },
-        });
-    }
-    if (node.type === 'scene') {
-        // manually set scene override
-        ensuredScene.value = node;
-    }
-    return node;
-}
-
 const interactables = [];
 const addInteractable = (target) => {
     interactables.push(target);
@@ -918,17 +871,10 @@ const ensuredCamera = computed({
         overrides[pascalType] = val;
     },
 });
-// export const ensuredCamera = buildEnsured<THREE.Camera>(
-//     ['PerspectiveCamera', 'OrthographicCamera'],
-//     fallbackCameraUuid,
-//     {
-//         args: [45, 0.5625, 1, 1000],
-//     }
-// )
 // ENSURE RENDERER
 // ====================
 const fallbackRendererUuid = 'FALLBACK_RENDERER';
-const v = buildEnsured(
+const ensuredRenderer = buildEnsured(
 // TODO: ensure support for css/svg renderers
 ['WebGLRenderer'], //, 'CSS2DRenderer', 'CSS3DRenderer', 'SVGRenderer'],
 fallbackRendererUuid, {});
@@ -937,7 +883,7 @@ fallbackRendererUuid, {});
 const rendererReady = ref(false);
 const ensureRenderer = computed({
     get() {
-        return (rendererReady.value ? v.value : null);
+        return (rendererReady.value ? ensuredRenderer.value : null);
     },
     set(val) {
         const t = val.type ?? '';
@@ -954,6 +900,80 @@ const autoRaycasterUuid = 'AUTO_RAYCASTER';
 // `unknown` is intentional here - we need to typecast the node since Raycaster isn't an Object3D
 const ensuredRaycaster = buildEnsured('Raycaster', autoRaycasterUuid, {}, (node) => setupAutoRaycaster(node));
 
+/** Create a new Lunchbox comment node. */
+function createCommentNode(options = {}) {
+    const defaults = {
+        text: options.text ?? '',
+    };
+    return new MiniDom.RendererCommentNode({
+        ...defaults,
+        ...options,
+        metaType: 'commentMeta',
+    });
+}
+/** Create a new DOM node. */
+function createDomNode(options = {}) {
+    const domElement = document.createElement(options.type ?? '');
+    const defaults = {
+        domElement,
+    };
+    const node = new MiniDom.RendererDomNode({
+        ...defaults,
+        ...options,
+        metaType: 'domMeta',
+    });
+    return node;
+}
+/** Create a new Lunchbox text node. */
+function createTextNode(options = {}) {
+    const defaults = {
+        text: options.text ?? '',
+    };
+    return new MiniDom.RendererTextNode({
+        ...options,
+        ...defaults,
+        metaType: 'textMeta',
+    });
+}
+/** Create a new Lunchbox standard node. */
+function createNode(options = {}, props = {}) {
+    const defaults = {
+        attached: options.attached ?? [],
+        attachedArray: options.attachedArray ?? {},
+        instance: options.instance ?? null,
+    };
+    const node = new MiniDom.RendererStandardNode({
+        ...options,
+        ...defaults,
+        metaType: 'standardMeta',
+    });
+    if (node.type && !isLunchboxRootNode(node) && !node.instance) {
+        // if (node.type.includes('Camera')) {
+        //     console.log(node.type, {
+        //         ...node.props,
+        //         ...props,
+        //     })
+        //     console.trace()
+        // }
+        node.instance = instantiateThreeObject({
+            ...node,
+            props: {
+                ...node.props,
+                ...props,
+            },
+        });
+    }
+    // TODO: these manual overrides are a bit brittle - replace?
+    if (node.type?.toLowerCase() === 'scene') {
+        // manually set scene override
+        ensuredScene.value = node;
+    }
+    else if (node.type?.toLowerCase().endsWith('camera')) {
+        ensuredCamera.value = node;
+    }
+    return node;
+}
+
 const createComponent = (tag) => defineComponent({
     inheritAttrs: false,
     name: tag,
@@ -1710,46 +1730,31 @@ const globals = {
 /** 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) => {
+function useCamera(callback) {
+    return 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) => {
+function useRenderer(callback) {
+    return 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) => {
+function useScene(callback) {
+    return watch(scene, (newVal) => {
         if (!newVal)
             return;
-        // TODO: better fix than `any`?
         callback(newVal);
-        if (once) {
-            destroy?.();
-        }
     }, { immediate: true });
 }
 // CUSTOM RENDER SUPPORT
@@ -1778,12 +1783,14 @@ const createApp = (root) => {
     app = createRenderer(nodeOps).createApp(root);
     // register all components
     Object.keys(components).forEach((key) => {
-        app.component(key, components[key]);
+        app?.component(key, components[key]);
     });
     // update mount function to match Lunchbox.Node
     const { mount } = app;
     app.mount = (root, ...args) => {
+        // find DOM element to use as app root
         const domElement = (typeof root === 'string' ? document.querySelector(root) : root);
+        // create or find root node
         const rootNode = ensureRootNode({
             domElement,
             isLunchboxRootNode: true,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lunchboxjs",
-    "version": "0.1.4012",
+    "version": "0.1.4015",
     "scripts": {
         "dev": "vite -c utils/vite.config.ts",
         "build": "vue-tsc --noEmit && vite build -c utils/vite.config.ts",
@@ -11,10 +11,10 @@
         "prepare": "npm run build:lib",
         "docs:dev": "vitepress dev docs",
         "docs:build": "vitepress build docs",
-        "docs:serve": "vitepress serve docs"
+        "docs:serve": "vitepress serve docs",
+        "demo:create": "node utils/createExample"
     },
     "dependencies": {
-        "lodash": "4.17.21",
         "uuid": "8.3.2",
         "vue": "^3.2.16"
     },
@@ -22,13 +22,18 @@
         "@rollup/plugin-node-resolve": "13.0.5",
         "@rollup/plugin-typescript": "8.3.0",
         "@types/lodash": "4.14.175",
-        "@types/three": "0.133.0",
+        "@types/three": "0.141.0",
         "@types/uuid": "8.3.1",
         "@vitejs/plugin-vue": "^1.9.3",
         "chroma-js": "2.1.2",
+        "kolorist": "1.5.1",
+        "lodash": "4.17.21",
         "nice-color-palettes": "3.0.0",
+        "prompt": "1.3.0",
+        "prompts": "2.4.2",
         "rollup-plugin-delete": "2.0.0",
         "rollup-plugin-terser": "7.0.2",
+        "three": "0.141.0",
         "typescript": "^4.4.3",
         "vite": "^2.6.4",
         "vite-plugin-glsl": "0.0.5",
@@ -36,7 +41,7 @@
         "vue-tsc": "^0.3.0"
     },
     "peerDependencies": {
-        "three": "0.137.5"
+        "three": "0.141.0"
     },
     "files": [
         "dist",

package/src/components/LunchboxWrapper/LunchboxWrapper.ts

@@ -24,9 +24,13 @@ import {
 } from '../../core'
 import { set } from 'lodash'
 import { globals, Lunch } from '../..'
-import { Color, Vector2 } from 'three'
+// import { Color, Vector2, sRGBEncoding, ACESFilmicToneMapping } from 'three'
+import * as THREE from 'three'
 import { prepCanvas } from './prepCanvas'
 
+// TODO:
+// Continue r3f prop - what else (besides camera fov) makes r3f look good?
+
 /** fixed & fill styling for container */
 const fillStyle = (position: string) => {
     return {
@@ -52,6 +56,7 @@ export const LunchboxWrapper: ComponentOptions = {
         dpr: Number,
         ortho: Boolean,
         orthographic: Boolean,
+        r3f: Boolean,
         rendererArguments: Object,
         rendererProperties: Object,
         shadow: [Boolean, Object],
@@ -67,6 +72,11 @@ export const LunchboxWrapper: ComponentOptions = {
         let camera: Lunch.Node<THREE.Camera> | null
         let scene: MiniDom.RendererStandardNode<THREE.Scene>
 
+        // https://threejs.org/docs/index.html#manual/en/introduction/Color-management
+        if (props.r3f && (THREE as any)?.ColorManagement) {
+            ;(THREE as any).ColorManagement.legacyMode = false
+        }
+
         // MOUNT
         // ====================
         onMounted(() => {
@@ -88,6 +98,9 @@ export const LunchboxWrapper: ComponentOptions = {
                     alpha: props.transparent,
                     antialias: true,
                     canvas: canvas.value.domElement,
+                    powerPreference: !!props.r3f
+                        ? 'high-performance'
+                        : 'default',
                     ...(props.rendererArguments ?? {}),
                 }
 
@@ -108,6 +121,16 @@ export const LunchboxWrapper: ComponentOptions = {
                         Lunch.Node<THREE.WebGLRenderer>
                     >
 
+                // apply r3f settings if desired
+                if (props.r3f) {
+                    if (rendererAsWebGlRenderer.value.instance) {
+                        rendererAsWebGlRenderer.value.instance.outputEncoding =
+                            THREE.sRGBEncoding
+                        rendererAsWebGlRenderer.value.instance.toneMapping =
+                            THREE.ACESFilmicToneMapping
+                    }
+                }
+
                 // update render sugar
                 const sugar = {
                     shadow: props.shadow,
@@ -160,7 +183,12 @@ export const LunchboxWrapper: ComponentOptions = {
                 } else {
                     ensuredCamera.value = createNode<THREE.PerspectiveCamera>({
                         props: {
-                            args: props.cameraArgs ?? [45, 0.5625, 1, 1000],
+                            args: props.cameraArgs ?? [
+                                props.r3f ? 75 : 45,
+                                0.5625,
+                                1,
+                                1000,
+                            ],
                         },
                         type: 'PerspectiveCamera',
                         uuid: fallbackCameraUuid,
@@ -195,7 +223,7 @@ export const LunchboxWrapper: ComponentOptions = {
             scene = ensuredScene.value
             // set background color
             if (scene && scene.instance && props.background) {
-                scene.instance.background = new Color(props.background)
+                scene.instance.background = new THREE.Color(props.background)
             }
 
             // MISC PROPERTIES

package/src/core/createNode.ts

@@ -1,6 +1,7 @@
 import { isLunchboxRootNode } from '../utils'
 import { instantiateThreeObject, MiniDom, ensuredScene } from '.'
 import { Lunch } from '..'
+import { ensuredCamera } from './ensure'
 
 /** Create a new Lunchbox comment node. */
 export function createCommentNode(options: Partial<Lunch.CommentMeta> = {}) {
@@ -74,9 +75,12 @@ export function createNode<T extends object = THREE.Object3D>(
         })
     }
 
-    if (node.type === 'scene') {
+    // TODO: these manual overrides are a bit brittle - replace?
+    if (node.type?.toLowerCase() === 'scene') {
         // manually set scene override
         ensuredScene.value = node as Lunch.Node<THREE.Scene>
+    } else if (node.type?.toLowerCase().endsWith('camera')) {
+        ensuredCamera.value = node as Lunch.Node<THREE.Camera>
     }
 
     return node

package/src/core/ensure.ts

@@ -158,18 +158,10 @@ export const ensuredCamera = computed<Lunch.Node<THREE.Camera> | null>({
     },
 })
 
-// export const ensuredCamera = buildEnsured<THREE.Camera>(
-//     ['PerspectiveCamera', 'OrthographicCamera'],
-//     fallbackCameraUuid,
-//     {
-//         args: [45, 0.5625, 1, 1000],
-//     }
-// )
-
 // ENSURE RENDERER
 // ====================
 export const fallbackRendererUuid = 'FALLBACK_RENDERER'
-export const v = buildEnsured(
+export const ensuredRenderer = buildEnsured(
     // TODO: ensure support for css/svg renderers
     ['WebGLRenderer'], //, 'CSS2DRenderer', 'CSS3DRenderer', 'SVGRenderer'],
     fallbackRendererUuid,
@@ -181,7 +173,9 @@ export const rendererReady = ref(false)
 
 export const ensureRenderer = computed<Lunch.Node<THREE.WebGLRenderer> | null>({
     get() {
-        return (rendererReady.value ? (v.value as any) : (null as any)) as any
+        return (
+            rendererReady.value ? (ensuredRenderer.value as any) : (null as any)
+        ) as any
     },
     set(val: any) {
         const t = val.type ?? ''

package/src/index.ts

@@ -1,11 +1,4 @@
-import {
-    computed,
-    createRenderer,
-    Component,
-    ref,
-    watch,
-    WatchStopHandle,
-} from 'vue'
+import { computed, createRenderer, Component, ref, watch } from 'vue'
 import { nodeOps } from './nodeOps'
 import {
     // createdCamera,
@@ -47,20 +40,13 @@ export const globals = {
 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
+    callback: (cam: T) => void
 ) {
-    let destroy: WatchStopHandle
-    destroy = watch(
+    return watch(
         camera,
         (newVal) => {
             if (!newVal) return
-
-            // TODO: better fix than `any`?
-            callback(newVal as any)
-            if (once) {
-                destroy?.()
-            }
+            callback(newVal as unknown as T)
         },
         { immediate: true }
     )
@@ -70,20 +56,13 @@ export function useCamera<T extends THREE.Camera = THREE.PerspectiveCamera>(
 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
+    callback: (rend: T) => void
 ) {
-    let destroy: WatchStopHandle
-    destroy = watch(
+    return watch(
         renderer,
         (newVal) => {
             if (!newVal) return
-
-            // TODO: better fix than `any`?
-            callback(newVal as any)
-            if (once) {
-                destroy?.()
-            }
+            callback(newVal as unknown as T)
         },
         { immediate: true }
     )
@@ -92,21 +71,12 @@ export function useRenderer<T extends THREE.Renderer = THREE.WebGLRenderer>(
 /** 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(
+export function useScene(callback: (newScene: THREE.Scene) => void) {
+    return watch(
         scene,
         (newVal) => {
             if (!newVal) return
-
-            // TODO: better fix than `any`?
             callback(newVal as any)
-            if (once) {
-                destroy?.()
-            }
         },
         { immediate: true }
     )
@@ -142,15 +112,17 @@ export const createApp = (root: Component) => {
 
     // register all components
     Object.keys(components).forEach((key) => {
-        app!.component(key, (components as any)[key])
+        app?.component(key, (components as any)[key])
     })
 
     // update mount function to match Lunchbox.Node
     const { mount } = app
     app.mount = (root, ...args) => {
+        // find DOM element to use as app root
         const domElement = (
             typeof root === 'string' ? document.querySelector(root) : root
         ) as HTMLElement
+        // create or find root node
         const rootNode = ensureRootNode({
             domElement,
             isLunchboxRootNode: true,

package/src/nodeOps/remove.ts

@@ -5,7 +5,6 @@ import { overrides } from '../core'
 export const remove = (node: MiniDom.RendererBaseNode) => {
     if (!node) return
     const overrideKeys = Object.keys(overrides)
-
     // prep subtree
     const subtree: MiniDom.BaseNode[] = []
     node.walk((descendant) => {

package/src/types.ts

@@ -145,6 +145,7 @@ export declare namespace Lunch {
         dpr?: number
         ortho?: boolean
         orthographic?: boolean
+        r3f?: boolean
         // TODO: Why doesn't ConstructorParameters<THREE.WebGLRenderer> work here?
         rendererArguments?: object
         rendererProperties?: Partial<THREE.WebGLRenderer>