lunchboxjs 0.1.4014 → 0.1.4017

package/dist/lunchboxjs.js

@@ -64,16 +64,30 @@
         }
     };
 
-    const prepCanvas = (container, canvasElement, onBeforeUnmount) => {
+    const getInnerDimensions = (node) => {
+        const computedStyle = getComputedStyle(node);
+        const width = node.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
+        const height = node.clientHeight - parseFloat(computedStyle.paddingTop) - parseFloat(computedStyle.paddingBottom);
+        return { width, height };
+    };
+    const prepCanvas = (container, canvasElement, onBeforeUnmount, sizePolicy) => {
         const containerElement = container.value?.domElement;
         if (!containerElement)
             throw new Error('missing container');
         // save...
         // ...and size element
-        resizeCanvas();
+        const resizeCanvasByPolicy = () => {
+            if (sizePolicy === "container") {
+                const dims = getInnerDimensions(containerElement);
+                resizeCanvas(dims.width, dims.height);
+            }
+            else
+                resizeCanvas();
+        };
+        resizeCanvasByPolicy();
         // attach listeners
         const observer = new ResizeObserver(([canvas]) => {
-            resizeCanvas();
+            resizeCanvasByPolicy();
         });
         // window.addEventListener('resize', resizeCanvas)
         if (containerElement) {
@@ -87,6 +101,8 @@
         });
     };
 
+    // TODO:
+    // Continue r3f prop - what else (besides camera fov) makes r3f look good?
     /** fixed & fill styling for container */
     const fillStyle = (position) => {
         return {
@@ -97,6 +113,7 @@
             left: 0,
             width: '100%',
             height: '100%',
+            display: 'block',
         };
     };
     const LunchboxWrapper = {
@@ -111,11 +128,14 @@
             dpr: Number,
             ortho: Boolean,
             orthographic: Boolean,
+            r3f: Boolean,
             rendererArguments: Object,
             rendererProperties: Object,
+            sizePolicy: String,
             shadow: [Boolean, Object],
             transparent: Boolean,
             zoom: Number,
+            updateSource: Object,
         },
         setup(props, context) {
             const canvas = vue.ref();
@@ -125,6 +145,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 +169,9 @@
                         alpha: props.transparent,
                         antialias: true,
                         canvas: canvas.value.domElement,
+                        powerPreference: !!props.r3f
+                            ? 'high-performance'
+                            : 'default',
                         ...(props.rendererArguments ?? {}),
                     };
                     // create new renderer
@@ -158,6 +185,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 +241,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 +279,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
                 // ====================
@@ -249,7 +290,7 @@
                     renderer.instance.setPixelRatio(dpr.value);
                     globals.dpr.value = dpr.value;
                     // prep canvas (sizing, observe, unmount, etc)
-                    prepCanvas(container, renderer.instance.domElement, vue.onBeforeUnmount);
+                    prepCanvas(container, renderer.instance.domElement, vue.onBeforeUnmount, props.sizePolicy);
                 }
                 else {
                     throw new Error('missing renderer');
@@ -274,24 +315,28 @@
                     camera: camera.instance,
                     renderer: renderer.instance,
                     scene: scene.instance,
+                    updateSource: props.updateSource,
                 });
             });
             // UNMOUNT
             // ====================
             vue.onBeforeUnmount(() => {
                 cancelUpdate();
+                cancelUpdateSource();
             });
             // RENDER FUNCTION
             // ====================
+            const containerFillStyle = props.sizePolicy === 'container' ? 'static' : 'absolute';
+            const canvasFillStyle = props.sizePolicy === 'container' ? 'static' : 'fixed';
             return () => [
                 context.slots.default?.() ?? null,
                 vue.h('div', {
-                    style: fillStyle('absolute'),
+                    style: fillStyle(containerFillStyle),
                     ref: container,
                 }, [
                     useFallbackRenderer.value
                         ? vue.h('canvas', {
-                            style: fillStyle('fixed'),
+                            style: fillStyle(canvasFillStyle),
                             class: 'lunchbox-canvas',
                             ref: canvas,
                         })
@@ -625,6 +670,7 @@
     let mouseUpListener;
     const mousePos = vue.ref({ x: Infinity, y: Infinity });
     let autoRaycasterEventsInitialized = false;
+    let frameID$1;
     const setupAutoRaycaster = (node) => {
         const instance = node.instance;
         if (!instance)
@@ -657,8 +703,14 @@
             renderer.instance.domElement.addEventListener('mousedown', mouseDownListener);
             renderer.instance.domElement.addEventListener('mouseup', mouseUpListener);
             // TODO: add touch events
-            // add to update loop
-            onBeforeRender(autoRaycasterBeforeRender);
+            // process mouse events asynchronously, whenever the mouse state changes
+            vue.watch(() => [inputActive.value, mousePos.value.x, mousePos.value.y], () => {
+                if (frameID$1)
+                    cancelAnimationFrame(frameID$1);
+                frameID$1 = requestAnimationFrame(() => {
+                    autoRaycasterBeforeRender();
+                });
+            });
             // mark complete
             autoRaycasterEventsInitialized = true;
             // cancel setup watcher
@@ -987,7 +1039,7 @@
     };
 
     /** Process props into either themselves or the $attached value */
-    function processProp({ node, prop }) {
+    function processProp({ node, prop, }) {
         // return $attachedArray value if needed
         if (typeof prop === 'string' && prop.startsWith('$attachedArray')) {
             return node.attachedArray[prop.replace('$attachedArray.', '')];
@@ -999,10 +1051,12 @@
         // otherwise, return plain value
         return prop;
     }
-    function processPropAsArray({ node, prop }) {
+    function processPropAsArray({ node, prop, }) {
         const isAttachedArray = typeof prop === 'string' && prop.startsWith('$attachedArray');
         const output = processProp({ node, prop });
-        return Array.isArray(output) && isAttachedArray ? output : [output];
+        return Array.isArray(output) && isAttachedArray
+            ? output
+            : [output];
     }
 
     function instantiateThreeObject(node) {
@@ -1301,16 +1355,34 @@
     };
 
     let frameID;
+    let watchStopHandle;
     const beforeRender = [];
     const afterRender = [];
-    const update = (opts) => {
-        // request next frame
+    const requestUpdate = (opts) => {
+        cancelUpdate();
         frameID = requestAnimationFrame(() => update({
             app: opts.app,
             renderer: ensureRenderer.value?.instance,
             scene: ensuredScene.value.instance,
             camera: ensuredCamera.value?.instance,
+            updateSource: opts.updateSource,
         }));
+    };
+    const update = (opts) => {
+        if (opts.updateSource) {
+            if (!watchStopHandle) {
+                // request next frame only when state changes
+                watchStopHandle = vue.watch(opts.updateSource, () => {
+                    requestUpdate(opts);
+                }, {
+                    deep: true,
+                });
+            }
+        }
+        else {
+            // request next frame on a continuous loop
+            requestUpdate(opts);
+        }
         // prep options
         const { app, renderer, scene, camera } = opts;
         // BEFORE RENDER
@@ -1373,6 +1445,10 @@
         if (frameID)
             cancelAnimationFrame(frameID);
     };
+    const cancelUpdateSource = () => {
+        if (watchStopHandle)
+            watchStopHandle();
+    };
 
     /** Update a single prop on a given node. */
     function updateObjectProp({ node, key, value, }) {

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=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,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=B(["WebGLRenderer"]),l)s.value=!1,U.value=!0;else{const t={alpha:e.transparent,antialias:!0,canvas:a.value.domElement,...e.rendererArguments??{}};W.value=K({type:"WebGLRenderer",uuid:F,props:{args:[t]}}),U.value=!0;const n=W,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=B(["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??[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 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,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 N(t={}){return e.lunchboxTree||(e.lunchboxTree=new J.RendererRootNode(t)),e.lunchboxTree}function B(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=B(e);if(t)return t;const a=N(),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??N();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=N({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})}));
+!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=$.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,t,n,r)=>{const o=e.value?.domElement;if(!o)throw new Error("missing container");const a=()=>{if("container"===r){const e=(e=>{const t=getComputedStyle(e);return{width:e.clientWidth-parseFloat(t.paddingLeft)-parseFloat(t.paddingRight),height:e.clientHeight-parseFloat(t.paddingTop)-parseFloat(t.paddingBottom)}})(o);i(e.width,e.height)}else i()};a();const s=new ResizeObserver((([e])=>{a()}));o&&s.observe(o),n((()=>{t&&s.unobserve(t)}))},d=e=>({position:e,top:0,right:0,bottom:0,left:0,width:"100%",height:"100%",display:"block"}),u={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,sizePolicy:String,shadow:[Boolean,Object],transparent:Boolean,zoom:Number,updateSource:Object},setup(e,n){const o=t.ref(),s=t.ref(!0),i=t.ref(e.dpr??-1),u=t.ref();let l,p,m;e.r3f&&a?.ColorManagement&&(a.ColorManagement.legacyMode=!1),t.onMounted((()=>{if(!o.value)throw new Error("missing canvas");if(l=T(["WebGLRenderer"]),l)s.value=!1,z.value=!0;else{const t={alpha:e.transparent,antialias:!0,canvas:o.value.domElement,powerPreference:e.r3f?"high-performance":"default",...e.rendererArguments??{}};I.value=q({type:"WebGLRenderer",uuid:U,props:{args:[t]}}),z.value=!0;const n=I;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=T(["PerspectiveCamera","OrthographicCamera"]),p?D.value=!0:(e.ortho||e.orthographic?$.value=q({props:{args:e.cameraArgs??[]},type:"OrthographicCamera",uuid:S}):$.value=q({props:{args:e.cameraArgs??[e.r3f?75: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(p&&void 0!==e.zoom&&(p.instance.zoom=e.zoom),m=K.value,m&&m.instance&&e.background&&(m.instance.background=new a.Color(e.background)),-1===i.value&&(i.value=window.devicePixelRatio),!l?.instance)throw new Error("missing renderer");l.instance.setPixelRatio(i.value),ge.dpr.value=i.value,c(u,l.instance.domElement,t.onBeforeUnmount,e.sizePolicy);const n=t.getCurrentInstance().appContext.app;for(let e of re)e({app:n,camera:p.instance,renderer:l.instance,scene:m.instance});de({app:n,camera:p.instance,renderer:l.instance,scene:m.instance,updateSource:e.updateSource})})),t.onBeforeUnmount((()=>{ue(),le()}));const h="container"===e.sizePolicy?"static":"absolute",f="container"===e.sizePolicy?"static":"fixed";return()=>[n.slots.default?.()??null,t.h("div",{style:d(h),ref:u},[s.value?t.h("canvas",{style:d(f),class:"lunchbox-canvas",ref:o}):null])]}},l={},p=["canvas","div","LunchboxWrapper"],m={...["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:u};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,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),w.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=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 R,A,C;const E=t.ref({x:1/0,y:1/0});let L,P=!1;let M=[];const B=()=>{const e=_.value?.instance,t=$.value?.instance;if(!e||!t)return;e.setFromCamera(ge.mousePos.value,t);const n=e.intersectObjects(g.map((e=>e.instance)));let r=[],o=[],a=[];r=M.map((e=>e.intersection)),n?.forEach((e=>{if(-1===M.findIndex((t=>t.intersection.object===e.object))){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 t=r.findIndex((t=>t.object.uuid===e.object.uuid));-1!==t&&r.splice(t,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})})),M=[].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 G(t={}){return e.lunchboxTree||(e.lunchboxTree=new Z.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 n of e){const e=O[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 O[n]=t,t}}var t;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=G(),s=q({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,{}),z=t.ref(!1),I=t.computed({get:()=>z.value?W.value:null,set(e){const t=e.type??"",n=t[0].toUpperCase()+t.slice(1);j[n]=e}}),K=k("Scene","FALLBACK_SCENE"),_=k("Raycaster","AUTO_RAYCASTER",{},(e=>(e=>{if(!e.instance)return;let n=null;n=t.watch((()=>I.value),(e=>{e?.instance&&(P||(R=t=>{const n=(e.instance.domElement.width??1)/ge.dpr.value,r=(e.instance.domElement.height??1)/ge.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",R),e.instance.domElement.addEventListener("mousedown",A),e.instance.domElement.addEventListener("mouseup",C),t.watch((()=>[b.value,E.value.x,E.value.y]),(()=>{L&&cancelAnimationFrame(L),L=requestAnimationFrame((()=>{B()}))})),P=!0),n&&n())}),{immediate:!0})})(e)));function q(e={},t={}){const n={attached:e.attached??[],attachedArray:e.attachedArray??{},instance:e.instance??null},r=new Z.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?.toLowerCase()?K.value=r:r.type?.toLowerCase().endsWith("camera")&&($.value=r),r}const V=e=>t.defineComponent({inheritAttrs:!1,name:e,render(){return t.h(e,this.$attrs,this.$slots?.default?.()||[])}});var H,Y=new Uint8Array(16);function X(){if(!H&&!(H="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 H(Y)}var J=/^(?:[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 Q(e){return"string"==typeof e&&J.test(e)}for(var Z,ee=[],te=0;te<256;++te)ee.push((te+256).toString(16).substr(1));function ne(e,t,n){var r=(e=e||{}).random||(e.rng||X)();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=(ee[e[t+0]]+ee[e[t+1]]+ee[e[t+2]]+ee[e[t+3]]+"-"+ee[e[t+4]]+ee[e[t+5]]+"-"+ee[e[t+6]]+ee[e[t+7]]+"-"+ee[e[t+8]]+ee[e[t+9]]+"-"+ee[e[t+10]]+ee[e[t+11]]+ee[e[t+12]]+ee[e[t+13]]+ee[e[t+14]]+ee[e[t+15]]).toLowerCase();if(!Q(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??ne(),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}(Z||(Z={}));(new Z.RendererRootNode).minidomType="RootNode";const re=[];let oe,ae;const se=[],ie=[],ce=e=>{ue(),oe=requestAnimationFrame((()=>de({app:e.app,renderer:I.value?.instance,scene:K.value.instance,camera:$.value?.instance,updateSource:e.updateSource})))},de=e=>{e.updateSource?ae||(ae=t.watch(e.updateSource,(()=>{ce(e)}),{deep:!0})):ce(e);const{app:n,renderer:r,scene:o,camera:a}=e;se.forEach((t=>{t&&t(e)})),r&&o&&a&&(n.customRender?n.customRender(e):r.render(t.toRaw(o),t.toRaw(a))),ie.forEach((t=>{t&&t(e)}))},ue=()=>{oe&&cancelAnimationFrame(oe)},le=()=>{ae&&ae()};const pe={x:"position.x",y:"position.y",z:"position.z"},me=["","parameters"],he=["args","attach","attachArray","is.default","isDefault","key","onAdded","ref","src"],fe=["geometry","material"];function ye(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 ve={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 Z.RendererDomNode({...t,...e,metaType:"domMeta"})}(o);return e}const a=q(o);return fe.forEach((t=>{e.toLowerCase().endsWith(t)&&(a.props.attach=t)})),a},createText:e=>function(e={}){const t={text:e.text??""};return new Z.RendererTextNode({...e,...t,metaType:"textMeta"})}({text:e}),createComment:e=>function(e={}){const t={text:e.text??""};return new Z.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&&(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=K.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);ye(e,t,e.props.attach,r)}else n.load(e.props.src,(n=>{ye(e,t,e.props.attach,n)}),null,(e=>{throw new Error(e)}))}(e,t):ye(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 x({node:e,key:t,value:n});const o=t.replace(/-/g,"."),a=pe[o]||o;if(he.includes(t)||he.includes(a))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 s=e.instance;if(!s)return e;let i;for(let e=0;e<me.length&&!i;e++){const t=[me[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(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(){}},ge={dpr:t.ref(1),inputActive:b,mousePos:E},be=t.computed((()=>$.value?.instance??null));const xe=t.computed((()=>I.value?.instance??null));const we=t.computed((()=>K.value.instance));let Re=null,Ae=null;e.camera=be,e.clearCustomRender=()=>{Re?Re.clearCustomRender():Ae=null},e.createApp=e=>{Re=t.createRenderer(ve).createApp(e),Object.keys(m).forEach((e=>{Re?.component(e,m[e])}));const{mount:n}=Re;return Re.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"});Re.rootNode=r;return n(r,...t)},Re.extend=e=>((({app:e,...t})=>{Object.keys(t).forEach((n=>{e.component(n,V(n)),l[n]=t[n]}))})({app:Re,...e}),Re),Re.setCustomRender=e=>{Re.customRender=e},Ae&&(Re.setCustomRender(Ae),Ae=null),Re.clearCustomRender=()=>{Re.customRender=null},Re},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=ge,e.offAfterRender=e=>{if(isFinite(e))ie.splice(e,1);else{const t=ie.findIndex((t=>t==e));ie.splice(t,1)}},e.offBeforeRender=e=>{if(isFinite(e))se.splice(e,1);else{const t=se.findIndex((t=>t==e));se.splice(t,1)}},e.onAfterRender=(e,t=1/0)=>{t===1/0?ie.push(e):ie.splice(t,0,e)},e.onBeforeRender=(e,t=1/0)=>{t===1/0?se.push(e):se.splice(t,0,e)},e.onStart=(e,t=1/0)=>{t===1/0?re.push(e):re.splice(t,0,e)},e.renderer=xe,e.scene=we,e.setCustomRender=e=>{Re?Re.setCustomRender(e):Ae=e},e.useCamera=function(e){return t.watch(be,(t=>{t&&e(t)}),{immediate:!0})},e.useRenderer=function(e){return t.watch(xe,(t=>{t&&e(t)}),{immediate:!0})},e.useScene=function(e){return t.watch(we,(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 { toRaw, ref, onMounted, onBeforeUnmount, getCurrentInstance, 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
@@ -43,16 +42,30 @@ const resizeCanvas = (width, height) => {
     }
 };
 
-const prepCanvas = (container, canvasElement, onBeforeUnmount) => {
+const getInnerDimensions = (node) => {
+    const computedStyle = getComputedStyle(node);
+    const width = node.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
+    const height = node.clientHeight - parseFloat(computedStyle.paddingTop) - parseFloat(computedStyle.paddingBottom);
+    return { width, height };
+};
+const prepCanvas = (container, canvasElement, onBeforeUnmount, sizePolicy) => {
     const containerElement = container.value?.domElement;
     if (!containerElement)
         throw new Error('missing container');
     // save...
     // ...and size element
-    resizeCanvas();
+    const resizeCanvasByPolicy = () => {
+        if (sizePolicy === "container") {
+            const dims = getInnerDimensions(containerElement);
+            resizeCanvas(dims.width, dims.height);
+        }
+        else
+            resizeCanvas();
+    };
+    resizeCanvasByPolicy();
     // attach listeners
     const observer = new ResizeObserver(([canvas]) => {
-        resizeCanvas();
+        resizeCanvasByPolicy();
     });
     // window.addEventListener('resize', resizeCanvas)
     if (containerElement) {
@@ -66,6 +79,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 {
@@ -76,6 +91,7 @@ const fillStyle = (position) => {
         left: 0,
         width: '100%',
         height: '100%',
+        display: 'block',
     };
 };
 const LunchboxWrapper = {
@@ -90,11 +106,14 @@ const LunchboxWrapper = {
         dpr: Number,
         ortho: Boolean,
         orthographic: Boolean,
+        r3f: Boolean,
         rendererArguments: Object,
         rendererProperties: Object,
+        sizePolicy: String,
         shadow: [Boolean, Object],
         transparent: Boolean,
         zoom: Number,
+        updateSource: Object,
     },
     setup(props, context) {
         const canvas = ref();
@@ -104,6 +123,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 +147,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 +163,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 +219,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 +257,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
             // ====================
@@ -228,7 +268,7 @@ const LunchboxWrapper = {
                 renderer.instance.setPixelRatio(dpr.value);
                 globals.dpr.value = dpr.value;
                 // prep canvas (sizing, observe, unmount, etc)
-                prepCanvas(container, renderer.instance.domElement, onBeforeUnmount);
+                prepCanvas(container, renderer.instance.domElement, onBeforeUnmount, props.sizePolicy);
             }
             else {
                 throw new Error('missing renderer');
@@ -253,24 +293,28 @@ const LunchboxWrapper = {
                 camera: camera.instance,
                 renderer: renderer.instance,
                 scene: scene.instance,
+                updateSource: props.updateSource,
             });
         });
         // UNMOUNT
         // ====================
         onBeforeUnmount(() => {
             cancelUpdate();
+            cancelUpdateSource();
         });
         // RENDER FUNCTION
         // ====================
+        const containerFillStyle = props.sizePolicy === 'container' ? 'static' : 'absolute';
+        const canvasFillStyle = props.sizePolicy === 'container' ? 'static' : 'fixed';
         return () => [
             context.slots.default?.() ?? null,
             h('div', {
-                style: fillStyle('absolute'),
+                style: fillStyle(containerFillStyle),
                 ref: container,
             }, [
                 useFallbackRenderer.value
                     ? h('canvas', {
-                        style: fillStyle('fixed'),
+                        style: fillStyle(canvasFillStyle),
                         class: 'lunchbox-canvas',
                         ref: canvas,
                     })
@@ -604,6 +648,7 @@ let mouseDownListener;
 let mouseUpListener;
 const mousePos = ref({ x: Infinity, y: Infinity });
 let autoRaycasterEventsInitialized = false;
+let frameID$1;
 const setupAutoRaycaster = (node) => {
     const instance = node.instance;
     if (!instance)
@@ -636,8 +681,14 @@ const setupAutoRaycaster = (node) => {
         renderer.instance.domElement.addEventListener('mousedown', mouseDownListener);
         renderer.instance.domElement.addEventListener('mouseup', mouseUpListener);
         // TODO: add touch events
-        // add to update loop
-        onBeforeRender(autoRaycasterBeforeRender);
+        // process mouse events asynchronously, whenever the mouse state changes
+        watch(() => [inputActive.value, mousePos.value.x, mousePos.value.y], () => {
+            if (frameID$1)
+                cancelAnimationFrame(frameID$1);
+            frameID$1 = requestAnimationFrame(() => {
+                autoRaycasterBeforeRender();
+            });
+        });
         // mark complete
         autoRaycasterEventsInitialized = true;
         // cancel setup watcher
@@ -966,7 +1017,7 @@ const extend = ({ app, ...targets }) => {
 };
 
 /** Process props into either themselves or the $attached value */
-function processProp({ node, prop }) {
+function processProp({ node, prop, }) {
     // return $attachedArray value if needed
     if (typeof prop === 'string' && prop.startsWith('$attachedArray')) {
         return node.attachedArray[prop.replace('$attachedArray.', '')];
@@ -978,10 +1029,12 @@ function processProp({ node, prop }) {
     // otherwise, return plain value
     return prop;
 }
-function processPropAsArray({ node, prop }) {
+function processPropAsArray({ node, prop, }) {
     const isAttachedArray = typeof prop === 'string' && prop.startsWith('$attachedArray');
     const output = processProp({ node, prop });
-    return Array.isArray(output) && isAttachedArray ? output : [output];
+    return Array.isArray(output) && isAttachedArray
+        ? output
+        : [output];
 }
 
 function instantiateThreeObject(node) {
@@ -1280,16 +1333,34 @@ const onStart = (cb, index = Infinity) => {
 };
 
 let frameID;
+let watchStopHandle;
 const beforeRender = [];
 const afterRender = [];
-const update = (opts) => {
-    // request next frame
+const requestUpdate = (opts) => {
+    cancelUpdate();
     frameID = requestAnimationFrame(() => update({
         app: opts.app,
         renderer: ensureRenderer.value?.instance,
         scene: ensuredScene.value.instance,
         camera: ensuredCamera.value?.instance,
+        updateSource: opts.updateSource,
     }));
+};
+const update = (opts) => {
+    if (opts.updateSource) {
+        if (!watchStopHandle) {
+            // request next frame only when state changes
+            watchStopHandle = watch(opts.updateSource, () => {
+                requestUpdate(opts);
+            }, {
+                deep: true,
+            });
+        }
+    }
+    else {
+        // request next frame on a continuous loop
+        requestUpdate(opts);
+    }
     // prep options
     const { app, renderer, scene, camera } = opts;
     // BEFORE RENDER
@@ -1352,6 +1423,10 @@ const cancelUpdate = () => {
     if (frameID)
         cancelAnimationFrame(frameID);
 };
+const cancelUpdateSource = () => {
+    if (watchStopHandle)
+        watchStopHandle();
+};
 
 /** Update a single prop on a given node. */
 function updateObjectProp({ node, key, value, }) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lunchboxjs",
-    "version": "0.1.4014",
+    "version": "0.1.4017",
     "scripts": {
         "dev": "vite -c utils/vite.config.ts",
         "build": "vue-tsc --noEmit && vite build -c utils/vite.config.ts",
@@ -22,7 +22,7 @@
         "@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",
@@ -33,6 +33,7 @@
         "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",
@@ -40,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

@@ -5,11 +5,13 @@ import {
     onBeforeUnmount,
     onMounted,
     ref,
+    WatchSource,
     WritableComputedRef,
 } from 'vue'
 import {
     cameraReady,
     cancelUpdate,
+    cancelUpdateSource,
     createNode,
     ensuredCamera,
     ensureRenderer,
@@ -24,9 +26,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 {
@@ -37,6 +43,7 @@ const fillStyle = (position: string) => {
         left: 0,
         width: '100%',
         height: '100%',
+        display: 'block',
     }
 }
 
@@ -52,11 +59,14 @@ export const LunchboxWrapper: ComponentOptions = {
         dpr: Number,
         ortho: Boolean,
         orthographic: Boolean,
+        r3f: Boolean,
         rendererArguments: Object,
         rendererProperties: Object,
+        sizePolicy: String,
         shadow: [Boolean, Object],
         transparent: Boolean,
         zoom: Number,
+        updateSource: Object,
     },
     setup(props: Lunch.WrapperProps, context) {
         const canvas = ref<MiniDom.RendererDomNode>()
@@ -67,6 +77,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 +103,9 @@ export const LunchboxWrapper: ComponentOptions = {
                     alpha: props.transparent,
                     antialias: true,
                     canvas: canvas.value.domElement,
+                    powerPreference: !!props.r3f
+                        ? 'high-performance'
+                        : 'default',
                     ...(props.rendererArguments ?? {}),
                 }
 
@@ -108,6 +126,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 +188,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 +228,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
@@ -211,7 +244,8 @@ export const LunchboxWrapper: ComponentOptions = {
                 prepCanvas(
                     container,
                     renderer.instance.domElement,
-                    onBeforeUnmount
+                    onBeforeUnmount,
+                    props.sizePolicy,
                 )
             } else {
                 throw new Error('missing renderer')
@@ -239,6 +273,7 @@ export const LunchboxWrapper: ComponentOptions = {
                 camera: camera.instance,
                 renderer: renderer.instance,
                 scene: scene.instance,
+                updateSource: props.updateSource,
             })
         })
 
@@ -246,22 +281,26 @@ export const LunchboxWrapper: ComponentOptions = {
         // ====================
         onBeforeUnmount(() => {
             cancelUpdate()
+            cancelUpdateSource()
         })
 
         // RENDER FUNCTION
         // ====================
+        const containerFillStyle = props.sizePolicy === 'container' ? 'static' : 'absolute'
+        const canvasFillStyle = props.sizePolicy === 'container' ? 'static' : 'fixed'
+
         return () => [
             context.slots.default?.() ?? null,
             h(
                 'div',
                 {
-                    style: fillStyle('absolute'),
+                    style: fillStyle(containerFillStyle),
                     ref: container,
                 },
                 [
                     useFallbackRenderer.value
                         ? h('canvas', {
-                              style: fillStyle('fixed'),
+                              style: fillStyle(canvasFillStyle),
                               class: 'lunchbox-canvas',
                               ref: canvas,
                           })

package/src/components/LunchboxWrapper/prepCanvas.ts

@@ -1,22 +1,39 @@
 import { MiniDom } from '../../core'
+import { Lunch } from '../../types'
 import { Ref } from 'vue'
 import { resizeCanvas } from './resizeCanvas'
 
+const getInnerDimensions = (node: Element) => {
+    const computedStyle = getComputedStyle(node)
+    const width = node.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight)
+    const height = node.clientHeight - parseFloat(computedStyle.paddingTop) - parseFloat(computedStyle.paddingBottom)
+    return { width, height }
+}
+
 export const prepCanvas = (
     container: Ref<MiniDom.RendererDomNode | undefined>,
     canvasElement: HTMLCanvasElement,
     onBeforeUnmount: Function,
+    sizePolicy?: Lunch.SizePolicy
 ) => {
     const containerElement = container.value?.domElement
     if (!containerElement) throw new Error('missing container')
 
     // save...
     // ...and size element
-    resizeCanvas()
+    const resizeCanvasByPolicy = () => {
+        if (sizePolicy === "container") {
+            const dims = getInnerDimensions(containerElement);
+            resizeCanvas(dims.width, dims.height);
+        }
+        else
+            resizeCanvas()
+    };
+    resizeCanvasByPolicy();
 
     // attach listeners
     const observer = new ResizeObserver(([canvas]) => {
-        resizeCanvas()
+        resizeCanvasByPolicy();
     })
     // window.addEventListener('resize', resizeCanvas)
     if (containerElement) {
@@ -29,4 +46,4 @@ export const prepCanvas = (
             observer.unobserve(canvasElement)
         }
     })
-}
+}

package/src/components/catalogue.ts

@@ -1,3 +1,3 @@
 import { Lunch } from '..'
 
-export const catalogue: Lunch.Catalogue = {}
+export const catalogue: Lunch.Catalogue = {}

package/src/core/instantiateThreeObject/processProps.ts

@@ -1,10 +1,18 @@
 import { Lunch } from '../..'
 
 /** Process props into either themselves or the $attached value */
-export function processProp<T, U = THREE.Object3D>({ node, prop }: { node: Lunch.StandardMeta<U>, prop: any }) {
+export function processProp<T, U = THREE.Object3D>({
+    node,
+    prop,
+}: {
+    node: Lunch.StandardMeta<U>
+    prop: any
+}) {
     // return $attachedArray value if needed
     if (typeof prop === 'string' && prop.startsWith('$attachedArray')) {
-        return node.attachedArray[prop.replace('$attachedArray.', '')] as any as T
+        return node.attachedArray[
+            prop.replace('$attachedArray.', '')
+        ] as any as T
     }
 
     // return $attached value if needed
@@ -16,8 +24,17 @@ export function processProp<T, U = THREE.Object3D>({ node, prop }: { node: Lunch
     return prop as T
 }
 
-export function processPropAsArray<T, U = THREE.Object3D>({ node, prop }: { node: Lunch.StandardMeta<U>, prop: any }) {
-    const isAttachedArray = typeof prop === 'string' && prop.startsWith('$attachedArray')
+export function processPropAsArray<T, U = THREE.Object3D>({
+    node,
+    prop,
+}: {
+    node: Lunch.StandardMeta<U>
+    prop: any
+}) {
+    const isAttachedArray =
+        typeof prop === 'string' && prop.startsWith('$attachedArray')
     const output = processProp<T, U>({ node, prop })
-    return Array.isArray(output) && isAttachedArray ? output as Array<T> : [output]
-}
+    return Array.isArray(output) && isAttachedArray
+        ? (output as Array<T>)
+        : [output]
+}

package/src/core/interaction/input.ts

@@ -1,4 +1,4 @@
 import { ref } from 'vue'
 
 /** Mouse is down, touch is pressed, etc */
-export const inputActive = ref(false)
+export const inputActive = ref(false)

package/src/core/interaction/setupAutoRaycaster.ts

@@ -17,6 +17,8 @@ let mouseUpListener: (event: MouseEvent) => void
 export const mousePos = ref({ x: Infinity, y: Infinity })
 let autoRaycasterEventsInitialized = false
 
+let frameID: number
+
 export const setupAutoRaycaster = (node: Lunch.Node<THREE.Raycaster>) => {
     const instance = node.instance
 
@@ -67,8 +69,16 @@ export const setupAutoRaycaster = (node: Lunch.Node<THREE.Raycaster>) => {
 
             // TODO: add touch events
 
-            // add to update loop
-            onBeforeRender(autoRaycasterBeforeRender)
+            // process mouse events asynchronously, whenever the mouse state changes
+            watch(
+                () => [inputActive.value, mousePos.value.x, mousePos.value.y],
+                () => {
+                    if (frameID) cancelAnimationFrame(frameID)
+                    frameID = requestAnimationFrame(() => {
+                        autoRaycasterBeforeRender()
+                    })
+                }
+            )
 
             // mark complete
             autoRaycasterEventsInitialized = true

package/src/core/update.ts

@@ -1,22 +1,44 @@
 import { ensureRenderer, ensuredScene, ensuredCamera } from '.'
 import { Lunch } from '..'
-import { toRaw } from 'vue'
+import { toRaw, watch, WatchStopHandle } from 'vue'
 
 let frameID: number
+let watchStopHandle: WatchStopHandle
 
 export const beforeRender = [] as Lunch.UpdateCallback[]
 export const afterRender = [] as Lunch.UpdateCallback[]
 
-export const update: Lunch.UpdateCallback = (opts) => {
-    // request next frame
+const requestUpdate = (opts: Lunch.UpdateCallbackProperties) => {
+    cancelUpdate()
     frameID = requestAnimationFrame(() =>
         update({
             app: opts.app,
             renderer: ensureRenderer.value?.instance,
             scene: ensuredScene.value.instance,
             camera: ensuredCamera.value?.instance,
+            updateSource: opts.updateSource,
         })
     )
+}
+
+export const update: Lunch.UpdateCallback = (opts) => {
+    if (opts.updateSource) {
+        if (!watchStopHandle) {
+            // request next frame only when state changes
+            watchStopHandle = watch(
+                opts.updateSource,
+                () => {
+                    requestUpdate(opts)
+                },
+                {
+                    deep: true,
+                }
+            )
+        }
+    } else {
+        // request next frame on a continuous loop
+        requestUpdate(opts)
+    }
 
     // prep options
     const { app, renderer, scene, camera } = opts
@@ -82,3 +104,7 @@ export const offAfterRender = (cb: Lunch.UpdateCallback | number) => {
 export const cancelUpdate = () => {
     if (frameID) cancelAnimationFrame(frameID)
 }
+
+export const cancelUpdateSource = () => {
+    if (watchStopHandle) watchStopHandle()
+}

package/src/types.ts

@@ -1,6 +1,7 @@
 type RootNode = import('./core/minidom').MiniDom.RendererRootNode
 type VNodeProps = import('vue').VNodeProps
 type VueApp<T> = import('vue').App<T>
+type WatchSource = import('vue').WatchSource
 type RendererStandardNode<T = THREE.Object3D> =
     import('./core').MiniDom.RendererStandardNode<T>
 
@@ -127,6 +128,7 @@ export declare namespace Lunch {
         scene?: THREE.Scene | null
         renderer?: THREE.Renderer | null
         camera?: THREE.Camera | null
+        updateSource?: WatchSource | null
 
         // sceneNode: Node<THREE.Scene> | null
         // rendererNode: Node<THREE.Renderer> | null
@@ -136,6 +138,8 @@ export declare namespace Lunch {
     /** Universally unique identifier. */
     type Uuid = string
 
+    type SizePolicy = 'full' | 'container'
+
     interface WrapperProps {
         background?: string
         cameraArgs?: any[]
@@ -145,11 +149,14 @@ 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>
+        sizePolicy?: SizePolicy
         shadow?: ShadowSugar
         transparent?: boolean
         zoom?: number
+        updateSource?: WatchSource | null
     }
 }