lunchboxjs 0.1.4017 → 0.2.1001-beta.1

package/extras/OrbitControlsWrapper.vue

@@ -12,7 +12,14 @@
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
-import { onBeforeRender, globals, Lunch, camera, renderer } from '../src'
+import {
+    onBeforeRender,
+    globals,
+    Lunch,
+    // camera,
+    useRenderer,
+    useCamera,
+} from '../src'
 
 // props
 const props = defineProps<{
@@ -20,14 +27,15 @@ const props = defineProps<{
 }>()
 
 // computed
-// const camera = globals.camera
-// const renderer = globals.renderer
 const ready = computed(() => {
-    return camera.value !== null && renderer.value?.domElement
+    return camera.value !== null && renderer.value.domElement
 })
+const camera = useCamera()
+const renderer = useRenderer()
 const orbitArgs = computed(() => [camera.value, renderer.value?.domElement])
 // watch(() => orbitArgs.value, console.log, { immediate: true })
 // console.log(renderer)
+watch(camera, console.log)
 
 // update
 const controls = ref<Lunch.LunchboxComponent>()

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "lunchboxjs",
-    "version": "0.1.4017",
+    "version": "0.2.1001-beta.1",
     "scripts": {
         "dev": "vite -c utils/vite.config.ts",
         "build": "vue-tsc --noEmit && vite build -c utils/vite.config.ts",
         "build:tsc": "tsc --project ./utils/tsconfig.lib.json",
         "build:rollup": "rollup -c ./utils/lib-rollup.ts",
         "build:dts": "cp utils/lib-dts.d.ts dist/lunchboxjs.es.d.ts && cp utils/lib-dts.d.ts dist/lunchboxjs.umd.d.ts",
-        "build:lib": "npm run build:tsc && npm run build:rollup && npm run build:dts",
+        "build:lib": "rimraf js && npm run build:tsc && npm run build:rollup && npm run build:dts",
         "prepare": "npm run build:lib",
         "docs:dev": "vitepress dev docs",
         "docs:build": "vitepress build docs",
@@ -19,25 +19,33 @@
         "vue": "^3.2.16"
     },
     "devDependencies": {
+        "@babel/plugin-transform-runtime": "7.18.10",
+        "@rollup/plugin-babel": "5.3.1",
         "@rollup/plugin-node-resolve": "13.0.5",
         "@rollup/plugin-typescript": "8.3.0",
         "@types/lodash": "4.14.175",
+        "@types/node": "18.6.3",
         "@types/three": "0.141.0",
         "@types/uuid": "8.3.1",
-        "@vitejs/plugin-vue": "^1.9.3",
+        "@vitejs/plugin-vue": "3.0.1",
+        "@vitejs/plugin-vue-jsx": "2.0.0",
+        "@vue/babel-plugin-jsx": "1.1.1",
         "chroma-js": "2.1.2",
         "kolorist": "1.5.1",
         "lodash": "4.17.21",
         "nice-color-palettes": "3.0.0",
         "prompt": "1.3.0",
         "prompts": "2.4.2",
+        "rimraf": "3.0.2",
         "rollup-plugin-delete": "2.0.0",
+        "rollup-plugin-jsx": "1.0.3",
         "rollup-plugin-terser": "7.0.2",
         "three": "0.141.0",
         "typescript": "^4.4.3",
-        "vite": "^2.6.4",
+        "vite": "3.0.4",
         "vite-plugin-glsl": "0.0.5",
         "vitepress": "0.20.1",
+        "vue-jsx-factory": "0.3.0",
         "vue-tsc": "^0.3.0"
     },
     "peerDependencies": {

package/src/components/LunchboxEventHandlers.tsx

@@ -0,0 +1,239 @@
+import { defineComponent, onBeforeUnmount, ref, watch } from 'vue'
+import {
+    Lunch,
+    useCamera,
+    useGlobals,
+    useLunchboxInteractables,
+    useRenderer,
+} from '..'
+import * as THREE from 'three'
+import { offBeforeRender, onBeforeRender } from '../core'
+
+export const LunchboxEventHandlers = defineComponent({
+    name: 'LunchboxEventHandlers',
+    setup() {
+        const interactables = useLunchboxInteractables()
+        const camera = useCamera()
+        const renderer = useRenderer()
+        const globals = useGlobals()
+        const mousePos = ref({ x: Infinity, y: Infinity })
+        const inputActive = ref(false)
+
+        let currentIntersections: Array<{
+            element: Lunch.Node
+            intersection: THREE.Intersection<THREE.Object3D>
+        }> = []
+
+        const raycaster = new THREE.Raycaster(
+            new THREE.Vector3(),
+            new THREE.Vector3(0, 0, -1)
+        )
+
+        const fireEventsFromIntersections = ({
+            element,
+            eventKeys,
+            intersection,
+        }: {
+            element: Lunch.Node
+            eventKeys: Array<Lunch.EventKey>
+            intersection: THREE.Intersection<THREE.Object3D>
+        }) => {
+            if (!element) return
+            eventKeys.forEach((eventKey) => {
+                if (element.eventListeners[eventKey]) {
+                    element.eventListeners[eventKey].forEach((cb) => {
+                        cb({ intersection })
+                    })
+                }
+            })
+        }
+
+        // add mouse listener to renderer DOM element when the element is ready
+        const stopWatch = watch(
+            renderer,
+            (v) => {
+                if (!v?.domElement) return
+
+                // we have a DOM element, so let's add mouse listeners
+                const { domElement } = v
+
+                const mouseMoveListener = (evt: PointerEvent) => {
+                    const screenWidth = (domElement.width ?? 1) / globals.dpr
+                    const screenHeight = (domElement.height ?? 1) / globals.dpr
+                    mousePos.value.x = (evt.offsetX / screenWidth) * 2 - 1
+                    mousePos.value.y = -(evt.offsetY / screenHeight) * 2 + 1
+                }
+                const mouseDownListener = () => (inputActive.value = true)
+                const mouseUpListener = () => (inputActive.value = false)
+
+                // add mouse events
+                domElement.addEventListener('pointermove', mouseMoveListener)
+                domElement.addEventListener('pointerdown', mouseDownListener)
+                domElement.addEventListener('pointerup', mouseUpListener)
+
+                // stop the watcher
+                stopWatch()
+            },
+            { immediate: true }
+        )
+
+        const update = () => {
+            const c = camera.value
+            if (!c) return
+
+            raycaster.setFromCamera(mousePos.value, c)
+            const intersections = raycaster.intersectObjects(
+                interactables?.value.map(
+                    (v) => v.instance as any as THREE.Object3D
+                ) ?? []
+            )
+
+            let enterValues: Array<THREE.Intersection<THREE.Object3D>> = [],
+                sameValues: Array<THREE.Intersection<THREE.Object3D>> = [],
+                leaveValues: Array<THREE.Intersection<THREE.Object3D>> = [],
+                entering: Array<{
+                    element: Lunch.Node
+                    intersection: THREE.Intersection<THREE.Object3D>
+                }> = [],
+                staying: Array<{
+                    element: Lunch.Node
+                    intersection: THREE.Intersection<THREE.Object3D>
+                }> = []
+
+            // intersection arrays
+            leaveValues = currentIntersections.map((v) => v.intersection)
+
+            // element arrays
+            intersections?.forEach((intersection) => {
+                const currentIdx = currentIntersections.findIndex(
+                    (v) => v.intersection.object === intersection.object
+                )
+                if (currentIdx === -1) {
+                    // new intersection
+                    enterValues.push(intersection)
+
+                    const found = interactables?.value.find(
+                        (v) => v.instance?.uuid === intersection.object.uuid
+                    )
+                    if (found) {
+                        entering.push({ element: found, intersection })
+                    }
+                } else {
+                    // existing intersection
+                    sameValues.push(intersection)
+
+                    const found = interactables?.value.find(
+                        (v) => v.instance?.uuid === intersection.object.uuid
+                    )
+                    if (found) {
+                        staying.push({ element: found, intersection })
+                    }
+                }
+                // this is a current intersection, so it won't be in our `leave` array
+                const leaveIdx = leaveValues.findIndex(
+                    (v) => v.object.uuid === intersection.object.uuid
+                )
+                if (leaveIdx !== -1) {
+                    leaveValues.splice(leaveIdx, 1)
+                }
+            })
+
+            const leaving: Array<{
+                element: Lunch.Node
+                intersection: THREE.Intersection<THREE.Object3D>
+            }> = leaveValues.map((intersection) => {
+                return {
+                    element: interactables?.value.find(
+                        (interactable) =>
+                            interactable.instance?.uuid ===
+                            intersection.object.uuid
+                    ) as any as Lunch.Node,
+                    intersection,
+                }
+            })
+
+            // new interactions
+            entering.forEach(({ element, intersection }) => {
+                fireEventsFromIntersections({
+                    element,
+                    eventKeys: ['onPointerEnter'],
+                    intersection,
+                })
+            })
+
+            // unchanged interactions
+            staying.forEach(({ element, intersection }) => {
+                const eventKeys: Array<Lunch.EventKey> = [
+                    'onPointerOver',
+                    'onPointerMove',
+                ]
+                fireEventsFromIntersections({
+                    element,
+                    eventKeys,
+                    intersection,
+                })
+            })
+
+            // exited interactions
+            leaving.forEach(({ element, intersection }) => {
+                const eventKeys: Array<Lunch.EventKey> = [
+                    'onPointerLeave',
+                    'onPointerOut',
+                ]
+                fireEventsFromIntersections({
+                    element,
+                    eventKeys,
+                    intersection,
+                })
+            })
+
+            currentIntersections = ([] as any).concat(entering, staying)
+        }
+
+        // update function
+        onBeforeRender(update)
+
+        const teardown = () => offBeforeRender(update)
+        onBeforeUnmount(teardown)
+
+        const clickEventKeys: Lunch.EventKey[] = [
+            'onClick',
+            'onPointerDown',
+            'onPointerUp',
+        ]
+        watch(inputActive, (isDown) => {
+            // meshes with multiple intersections receive multiple callbacks by default -
+            // let's make it so they only receive one callback of each type per frame.
+            // (ie usually when you click on a mesh, you expect only one click event to fire, even
+            // if there are technically multiple intersections with that mesh)
+            const uuidsInteractedWithThisFrame: string[] = []
+            currentIntersections.forEach((v) => {
+                clickEventKeys.forEach((key) => {
+                    const id = v.element.uuid + key
+                    if (
+                        isDown &&
+                        (key === 'onClick' || key === 'onPointerDown')
+                    ) {
+                        if (!uuidsInteractedWithThisFrame.includes(id)) {
+                            v.element.eventListeners[key]?.forEach((cb) =>
+                                cb({ intersection: v.intersection })
+                            )
+                            uuidsInteractedWithThisFrame.push(id)
+                        }
+                    } else if (!isDown && key === 'onPointerUp') {
+                        if (!uuidsInteractedWithThisFrame.includes(id)) {
+                            v.element.eventListeners[key]?.forEach((cb) =>
+                                cb({ intersection: v.intersection })
+                            )
+                            uuidsInteractedWithThisFrame.push(id)
+                        }
+                    }
+                })
+            })
+        })
+
+        // return arbitrary object to ensure instantiation
+        // TODO: why can't we return a <raycaster/> here?
+        return () => <object3D />
+    },
+})

package/src/components/LunchboxWrapper/LunchboxScene.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export const LunchboxScene = defineComponent({
+    name: 'LunchboxScene',
+    setup(props, { slots }) {
+        return () => <scene>{slots.default?.()}</scene>
+    },
+})

package/src/components/LunchboxWrapper/LunchboxWrapper.tsx

@@ -0,0 +1,300 @@
+import {
+    defineComponent,
+    onBeforeUnmount,
+    onMounted,
+    PropType,
+    reactive,
+    ref,
+    WatchSource,
+} from 'vue'
+import { cancelUpdate, cancelUpdateSource, MiniDom, update } from '../../core'
+import { Lunch, useApp, useGlobals, useLunchboxInteractables } from '../..'
+import * as THREE from 'three'
+import { prepCanvas } from './prepCanvas'
+import { useUpdateGlobals, useStartCallbacks } from '../..'
+import { LunchboxScene } from './LunchboxScene'
+import { LunchboxEventHandlers } from '../LunchboxEventHandlers'
+
+/** fixed & fill styling for container */
+const fillStyle = (position: string) => {
+    return {
+        position,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        display: 'block',
+    }
+}
+
+export const LunchboxWrapper = defineComponent({
+    name: 'Lunchbox',
+    props: {
+        // These should match the Lunchbox.WrapperProps interface
+        background: String,
+        cameraArgs: Array,
+        cameraLook: Array as unknown as PropType<Lunch.Vector3AsArray>,
+        cameraLookAt: Array as unknown as PropType<Lunch.Vector3AsArray>,
+        cameraPosition: Array as unknown as PropType<Lunch.Vector3AsArray>,
+        dpr: Number,
+        ortho: Boolean,
+        orthographic: Boolean,
+        r3f: Boolean,
+        rendererArguments: Object,
+        rendererProperties: Object,
+        sizePolicy: String as PropType<Lunch.SizePolicy>,
+        shadow: [Boolean, Object],
+        transparent: Boolean,
+        zoom: Number,
+        updateSource: Object as PropType<WatchSource>,
+    },
+    setup(props, context) {
+        const canvas = ref<MiniDom.RendererDomNode>()
+        let dpr = props.dpr ?? -1
+        const container = ref<MiniDom.RendererDomNode>()
+        const renderer = ref<Lunch.LunchboxComponent<THREE.Renderer>>()
+        const camera = ref<Lunch.LunchboxComponent<THREE.Camera>>()
+        const scene = ref<Lunch.LunchboxComponent<THREE.Scene>>()
+        const globals = useGlobals()
+        const updateGlobals = useUpdateGlobals()
+        const app = useApp()
+        const consolidatedCameraProperties: Record<string, any> = reactive({})
+        const startCallbacks = useStartCallbacks()
+
+        // https://threejs.org/docs/index.html#manual/en/introduction/Color-management
+        if (props.r3f && (THREE as any)?.ColorManagement) {
+            ;(THREE as any).ColorManagement.legacyMode = false
+        }
+
+        const interactables = useLunchboxInteractables()
+
+        // MOUNT
+        // ====================
+        onMounted(async () => {
+            // canvas needs to exist (or user needs to handle it on their own)
+            if (!canvas.value && !context.slots?.renderer?.()?.length)
+                throw new Error('missing canvas')
+
+            // no camera provided, so let's create one
+            if (!context.slots?.camera?.()?.length) {
+                if (props.cameraPosition) {
+                    consolidatedCameraProperties.position = props.cameraPosition
+                }
+                if (props.cameraLook || props.cameraLookAt) {
+                    consolidatedCameraProperties.lookAt =
+                        props.cameraLook || props.cameraLookAt
+                }
+                if (props.zoom !== undefined) {
+                    consolidatedCameraProperties.zoom = props.zoom
+                }
+            }
+
+            // SCENE
+            // ====================
+            // set background color
+            if (scene.value?.$el?.instance && props.background) {
+                scene.value.$el.instance.background = new THREE.Color(
+                    props.background
+                )
+            }
+
+            // MISC PROPERTIES
+            // ====================
+            if (dpr === -1) {
+                dpr = window.devicePixelRatio
+            }
+            updateGlobals?.({ dpr })
+
+            while (
+                !renderer.value?.$el?.instance &&
+                // TODO: remove `as any`
+                !(renderer.value as any)?.component?.ctx.$el?.instance
+            ) {
+                await new Promise((r) => requestAnimationFrame(r))
+            }
+
+            while (
+                !scene.value?.$el?.instance &&
+                // TODO: remove `as any`
+                !(scene.value as any)?.component?.ctx.$el?.instance
+            ) {
+                await new Promise((r) => requestAnimationFrame(r))
+            }
+
+            const normalizedRenderer = (renderer.value?.$el?.instance ??
+                (renderer.value as any)?.component?.ctx.$el
+                    ?.instance) as THREE.WebGLRenderer
+
+            normalizedRenderer.setPixelRatio(globals.dpr)
+
+            const normalizedScene = (scene.value?.$el?.instance ??
+                (scene.value as any)?.component?.ctx.$el
+                    ?.instance) as THREE.Scene
+
+            const normalizedCamera = (camera.value?.$el?.instance ??
+                (camera.value as any)?.component?.ctx.$el
+                    ?.instance) as THREE.Camera
+
+            // TODO: update DPR on monitor switch
+            // prep canvas (sizing, observe, unmount, etc)
+            // (only run if no custom renderer)
+            if (!context.slots?.renderer?.()?.length) {
+                // TODO: use dispose
+                const { dispose } = prepCanvas(
+                    container,
+                    normalizedCamera,
+                    normalizedRenderer,
+                    normalizedScene,
+                    props.sizePolicy
+                )
+
+                if (props.r3f) {
+                    normalizedRenderer.outputEncoding = THREE.sRGBEncoding
+                    normalizedRenderer.toneMapping = THREE.ACESFilmicToneMapping
+                }
+
+                // update render sugar
+                const sugar = {
+                    shadow: props.shadow,
+                }
+                if (sugar?.shadow) {
+                    normalizedRenderer.shadowMap.enabled = true
+                    if (typeof sugar.shadow === 'object') {
+                        normalizedRenderer.shadowMap.type = sugar.shadow.type
+                    }
+                }
+            }
+
+            // START
+            // ====================
+            if (!app) {
+                throw new Error('error creating app')
+            }
+
+            // save renderer, scene, camera
+            app.config.globalProperties.lunchbox.camera = normalizedCamera
+            app.config.globalProperties.lunchbox.renderer = normalizedRenderer
+            app.config.globalProperties.lunchbox.scene = normalizedScene
+
+            for (let startCallback of startCallbacks ?? []) {
+                startCallback({
+                    app,
+                    camera: normalizedCamera,
+                    renderer: normalizedRenderer,
+                    scene: normalizedScene,
+                })
+            }
+
+            // KICK UPDATE
+            // ====================
+            update({
+                app,
+                camera: normalizedCamera,
+                renderer: normalizedRenderer,
+                scene: normalizedScene,
+                updateSource: props.updateSource,
+            })
+        })
+
+        // UNMOUNT
+        // ====================
+        onBeforeUnmount(() => {
+            cancelUpdate()
+            cancelUpdateSource()
+        })
+
+        // RENDER FUNCTION
+        // ====================
+        const containerFillStyle =
+            props.sizePolicy === 'container' ? 'static' : 'absolute'
+        const canvasFillStyle =
+            props.sizePolicy === 'container' ? 'static' : 'fixed'
+
+        return () => (
+            <>
+                {/* use renderer slot if provided... */}
+                {context.slots?.renderer?.()?.length ? (
+                    // TODO: remove `as any` cast
+                    (renderer.value = context.slots?.renderer?.()[0] as any)
+                ) : (
+                    // ...otherwise, add canvas...
+                    <>
+                        <div
+                            class="lunchbox-container"
+                            style={fillStyle(containerFillStyle) as any}
+                            ref={container}
+                            data-lunchbox="true"
+                        >
+                            <canvas
+                                ref={canvas}
+                                class="lunchbox-canvas"
+                                style={fillStyle(canvasFillStyle) as any}
+                                data-lunchbox="true"
+                            ></canvas>
+                        </div>
+                        {/* ...and create default renderer once canvas is present */}
+                        {canvas.value?.domElement && (
+                            <webGLRenderer
+                                {...(props.rendererProperties ?? {})}
+                                ref={renderer}
+                                args={[
+                                    {
+                                        alpha: props.transparent,
+                                        antialias: true,
+                                        canvas: canvas.value?.domElement,
+                                        powerPreference: !!props.r3f
+                                            ? 'high-performance'
+                                            : 'default',
+                                        ...(props.rendererArguments ?? {}),
+                                    },
+                                ]}
+                            />
+                        )}
+                    </>
+                )}
+
+                {/* use scene slot if provided... */}
+                {context.slots?.scene?.()?.length ? (
+                    // TODO: remove `as any` cast
+                    (scene.value = context.slots?.scene?.()[0] as any)
+                ) : (
+                    // ...otherwise, add default scene
+                    // TODO: why does this need to be a separate component? <scene> throws an error
+                    <LunchboxScene ref={scene}>
+                        {context.slots?.default?.()}
+                    </LunchboxScene>
+                )}
+
+                {/* use camera slot if provided... */}
+                {context.slots?.camera?.()?.length ? (
+                    // TODO: remove `any` cast
+                    (camera.value = context.slots?.camera?.()[0] as any)
+                ) : props.ortho || props.orthographic ? (
+                    <orthographicCamera
+                        ref={camera}
+                        args={props.cameraArgs ?? []}
+                        {...consolidatedCameraProperties}
+                    />
+                ) : (
+                    <perspectiveCamera
+                        ref={camera}
+                        args={
+                            props.cameraArgs ?? [
+                                props.r3f ? 75 : 45,
+                                0.5625,
+                                1,
+                                1000,
+                            ]
+                        }
+                        {...consolidatedCameraProperties}
+                    />
+                )}
+
+                {/* Lunchbox interaction handlers */}
+                {interactables?.value.length && <LunchboxEventHandlers />}
+            </>
+        )
+    },
+})