lunchboxjs 0.1.4002 → 0.1.4006

package/src/components/autoGeneratedComponents.ts

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

package/src/components/index.ts

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

package/src/core/ensure.ts

@@ -127,13 +127,35 @@ function buildEnsured<T extends THREE.Object3D>(
 // ENSURE CAMERA
 // ====================
 export const fallbackCameraUuid = 'FALLBACK_CAMERA'
-export const ensuredCamera = buildEnsured<THREE.Camera>(
+export const defaultCamera = buildEnsured(
     ['PerspectiveCamera', 'OrthographicCamera'],
     fallbackCameraUuid,
-    {
-        args: [45, 0.5625, 1, 1000],
-    }
-)
+    { args: [45, 0.5625, 1, 1000] }
+) as unknown as WritableComputedRef<Lunch.Node<THREE.Camera>>
+/** Special value to be changed ONLY in `LunchboxWrapper`.
+ * Functions waiting for a Camera need to wait for this to be true.  */
+export const cameraReady = ref(false)
+
+export const ensuredCamera = computed<Lunch.Node<THREE.Camera> | null>({
+    get() {
+        return (
+            cameraReady.value ? (defaultCamera.value as any) : (null as any)
+        ) as any
+    },
+    set(val: any) {
+        const t = val.type ?? ''
+        const pascalType = t[0].toUpperCase() + t.slice(1)
+        overrides[pascalType] = val as any
+    },
+})
+
+// export const ensuredCamera = buildEnsured<THREE.Camera>(
+//     ['PerspectiveCamera', 'OrthographicCamera'],
+//     fallbackCameraUuid,
+//     {
+//         args: [45, 0.5625, 1, 1000],
+//     }
+// )
 
 // ENSURE RENDERER
 // ====================

package/src/core/interaction/index.ts

@@ -53,6 +53,7 @@ export function addEventListener({
         const stop = watch(
             () => inputActive.value,
             (isDown) => {
+                console.log(isDown, currentIntersections)
                 const idx = currentIntersections
                     .map((v) => v.element)
                     .findIndex(

package/src/core/update.ts

@@ -7,21 +7,18 @@ let frameID: number
 export const beforeRender = [] as Lunch.UpdateCallback[]
 export const afterRender = [] as Lunch.UpdateCallback[]
 
-export const update: Lunch.UpdateCallback = (opts: {
-    app: Lunch.App
-    renderer?: THREE.Renderer | null
-    scene?: THREE.Scene | null
-    camera?: THREE.Camera | null
-}) => {
+export const update: Lunch.UpdateCallback = (opts) => {
+    // request next frame
     frameID = requestAnimationFrame(() =>
         update({
             app: opts.app,
             renderer: ensureRenderer.value?.instance,
             scene: ensuredScene.value.instance,
-            camera: ensuredCamera.value.instance,
+            camera: ensuredCamera.value?.instance,
         })
     )
 
+    // prep options
     const { app, renderer, scene, camera } = opts
 
     // BEFORE RENDER
@@ -32,9 +29,12 @@ export const update: Lunch.UpdateCallback = (opts: {
     })
 
     // RENDER
-    // console.log(camera?.position.z)
     if (renderer && scene && camera) {
-        renderer.render(toRaw(scene), toRaw(camera))
+        if (app.customRender) {
+            app.customRender(opts)
+        } else {
+            renderer.render(toRaw(scene), toRaw(camera))
+        }
     }
 
     // AFTER RENDER
@@ -53,6 +53,15 @@ export const onBeforeRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
     }
 }
 
+export const offBeforeRender = (cb: Lunch.UpdateCallback | number) => {
+    if (isFinite(cb as number)) {
+        beforeRender.splice(cb as number, 1)
+    } else {
+        const idx = beforeRender.findIndex((v) => v == cb)
+        beforeRender.splice(idx, 1)
+    }
+}
+
 export const onAfterRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
     if (index === Infinity) {
         afterRender.push(cb)
@@ -61,6 +70,15 @@ export const onAfterRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
     }
 }
 
+export const offAfterRender = (cb: Lunch.UpdateCallback | number) => {
+    if (isFinite(cb as number)) {
+        afterRender.splice(cb as number, 1)
+    } else {
+        const idx = afterRender.findIndex((v) => v == cb)
+        afterRender.splice(idx, 1)
+    }
+}
+
 export const cancelUpdate = () => {
     if (frameID) cancelAnimationFrame(frameID)
 }

package/src/index.ts

@@ -12,13 +12,17 @@ import {
     inputActive,
     mousePos,
     rootUuid,
-    update,
 } from './core'
 import { components } from './components'
 import { Lunch } from './types'
 
 export { lunchboxRootNode as lunchboxTree } from './core'
-export { onBeforeRender, onAfterRender, update } from './core'
+export {
+    offAfterRender,
+    offBeforeRender,
+    onBeforeRender,
+    onAfterRender,
+} from './core'
 export * from './types'
 
 // Utilities
@@ -31,16 +35,41 @@ export const globals = {
     mousePos,
 }
 
-export const camera = computed(() => ensuredCamera.value.instance)
+export const camera = computed(() => ensuredCamera.value?.instance ?? null)
 export const renderer = computed(() => ensureRenderer.value?.instance ?? null)
 export const scene = computed(() => ensuredScene.value.instance)
 
+// CUSTOM RENDER SUPPORT
+// ====================
+let app: Lunch.App | null = null
+let queuedCustomRenderFunction:
+    | ((opts: Lunch.UpdateCallbackProperties) => void)
+    | null = null
+
+/** Set a custom render function, overriding the Lunchbox app's default render function.
+ * Changing this requires the user to manually render their scene.
+ */
+export const setCustomRender = (
+    render: (opts: Lunch.UpdateCallbackProperties) => void
+) => {
+    if (app) app.setCustomRender(render)
+    else queuedCustomRenderFunction = render
+}
+
+/** Clear the active app's custom render function. */
+export const clearCustomRender = () => {
+    if (app) app.clearCustomRender()
+    else queuedCustomRenderFunction = null
+}
+
+// CREATE APP
+// ====================
 export const createApp = (root: Component) => {
-    const app = createRenderer(nodeOps).createApp(root) as Lunch.App
+    app = createRenderer(nodeOps).createApp(root) as Lunch.App
 
     // 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
@@ -57,15 +86,33 @@ export const createApp = (root: Component) => {
             type: 'root',
             uuid: rootUuid,
         })
-        app.rootNode = rootNode
+        app!.rootNode = rootNode
         const mounted = mount(rootNode, ...args)
         return mounted
     }
 
     // embed .extend function
     app.extend = (targets: Record<string, any>) => {
-        extend({ app, ...targets })
-        return app
+        extend({ app: app!, ...targets })
+        return app!
+    }
+
+    // prep for custom render support
+    app.setCustomRender = (
+        newRender: (opts: Lunch.UpdateCallbackProperties) => void
+    ) => {
+        app!.customRender = newRender
+    }
+
+    // add queued custom render if we have one
+    if (queuedCustomRenderFunction) {
+        app.setCustomRender(queuedCustomRenderFunction)
+        queuedCustomRenderFunction = null
+    }
+
+    // add custom render removal
+    app.clearCustomRender = () => {
+        app!.customRender = null
     }
 
     // done

package/src/types.ts

@@ -7,8 +7,13 @@ type RendererStandardNode<T = THREE.Object3D> =
 export declare namespace Lunch {
     /** Lunchbox app. */
     type App = VueApp<any> & {
+        clearCustomRender: () => void
+        customRender: ((opts: UpdateCallbackProperties) => void) | null
         extend: (v: Record<string, any>) => App
         rootNode: RootNode
+        setCustomRender: (
+            update: (opts: UpdateCallbackProperties) => void
+        ) => void
         update: UpdateCallback
     }
 
@@ -133,8 +138,13 @@ export declare namespace Lunch {
 
     interface WrapperProps {
         background?: string
+        cameraArgs?: any[]
+        cameraLook?: [number, number, number]
+        cameraLookAt?: [number, number, number]
         cameraPosition?: [number, number, number]
         dpr?: number
+        ortho?: boolean
+        orthographic?: boolean
         rendererProperties?: Partial<THREE.WebGLRenderer>
         shadow?: ShadowSugar
         transparent?: boolean