lunchboxjs 0.1.4001 → 0.1.4005

package/extras/Gltf.vue

@@ -7,7 +7,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
-import { Lunchbox } from '../src'
+import { Lunch } from '../src'
 
 const props = defineProps<{
     preventAdd?: boolean
@@ -20,7 +20,7 @@ const emit = defineEmits<{
     (e: 'error', evt: ErrorEvent): void
 }>()
 
-const container = ref<Lunchbox.LunchboxComponent<THREE.Group>>()
+const container = ref<Lunch.LunchboxComponent<THREE.Group>>()
 const onLoad = (gltf: GLTF) => {
     if (!props.preventAdd) {
         container.value?.$el?.instance?.add(gltf.scene)

package/extras/OrbitControlsWrapper.vue

@@ -11,8 +11,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { onBeforeRender, globals, Lunchbox } from '../src'
+import { computed, ref, watch } from 'vue'
+import { onBeforeRender, globals, Lunch, camera, renderer } from '../src'
 
 // props
 const props = defineProps<{
@@ -20,18 +20,17 @@ const props = defineProps<{
 }>()
 
 // computed
-const camera = globals.camera
-const renderer = globals.renderer
+// const camera = globals.camera
+// const renderer = globals.renderer
 const ready = computed(() => {
-    return camera.value !== null && renderer.value?.instance?.domElement
+    return camera.value !== null && renderer.value?.domElement
 })
-const orbitArgs = computed(() => [
-    camera.value?.instance,
-    renderer.value?.instance?.domElement,
-])
+const orbitArgs = computed(() => [camera.value, renderer.value?.domElement])
+// watch(() => orbitArgs.value, console.log, { immediate: true })
+// console.log(renderer)
 
 // update
-const controls = ref<Lunchbox.LunchboxComponent>()
+const controls = ref<Lunch.LunchboxComponent>()
 const update = () => {
     const instance = controls.value?.$el.instance as any
     if (instance && ready.value) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lunchboxjs",
-    "version": "0.1.4001",
+    "version": "0.1.4005",
     "scripts": {
         "dev": "vite -c utils/vite.config.ts",
         "build": "vue-tsc --noEmit && vite build -c utils/vite.config.ts",
@@ -8,7 +8,10 @@
         "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",
-        "prepare": "npm run build:lib"
+        "prepare": "npm run build:lib",
+        "docs:dev": "vitepress dev docs",
+        "docs:build": "vitepress build docs",
+        "docs:serve": "vitepress serve docs"
     },
     "dependencies": {
         "lodash": "4.17.21",
@@ -22,11 +25,14 @@
         "@types/three": "0.133.0",
         "@types/uuid": "8.3.1",
         "@vitejs/plugin-vue": "^1.9.3",
+        "chroma-js": "2.1.2",
+        "nice-color-palettes": "3.0.0",
         "rollup-plugin-delete": "2.0.0",
         "rollup-plugin-terser": "7.0.2",
         "typescript": "^4.4.3",
         "vite": "^2.6.4",
         "vite-plugin-glsl": "0.0.5",
+        "vitepress": "0.20.1",
         "vue-tsc": "^0.3.0"
     },
     "peerDependencies": {
@@ -42,5 +48,20 @@
     ],
     "main": "./dist/lunchboxjs.js",
     "module": "./dist/lunchboxjs.module.js",
-    "types": "dist/lunchboxjs.es.d.ts"
+    "types": "dist/lunchboxjs.es.d.ts",
+    "directories": {
+        "doc": "docs"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/breakfast-studio/lunchboxjs.git"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "bugs": {
+        "url": "https://github.com/breakfast-studio/lunchboxjs/issues"
+    },
+    "homepage": "https://github.com/breakfast-studio/lunchboxjs#readme",
+    "description": ""
 }

package/src/components/LunchboxWrapper/LunchboxWrapper.ts

@@ -5,19 +5,25 @@ import {
     onBeforeUnmount,
     onMounted,
     ref,
+    WritableComputedRef,
 } from 'vue'
 import {
+    cameraReady,
     cancelUpdate,
-    ensureCamera,
+    createNode,
+    ensuredCamera,
     ensureRenderer,
-    ensureScene,
+    ensuredScene,
+    fallbackCameraUuid,
     fallbackRendererUuid,
     MiniDom,
+    rendererReady,
+    tryGetNodeWithInstanceType,
     update,
 } from '../../core'
 import { set } from 'lodash'
 import { globals, Lunch } from '../..'
-import { Color } from 'three'
+import { Color, Vector2 } from 'three'
 import { prepCanvas } from './prepCanvas'
 
 /** fixed & fill styling for container */
@@ -38,8 +44,13 @@ export const LunchboxWrapper: ComponentOptions = {
     props: {
         // These should match the Lunchbox.WrapperProps interface
         background: String,
+        cameraArgs: Array,
+        cameraLook: Array,
+        cameraLookAt: Array,
         cameraPosition: Array,
         dpr: Number,
+        ortho: Boolean,
+        orthographic: Boolean,
         rendererProperties: Object,
         shadow: [Boolean, Object],
         transparent: Boolean,
@@ -49,7 +60,8 @@ export const LunchboxWrapper: ComponentOptions = {
         const useFallbackRenderer = ref(true)
         const dpr = ref(props.dpr ?? -1)
         const container = ref<MiniDom.RendererDomNode>()
-        let renderer: MiniDom.RendererStandardNode<THREE.WebGLRenderer>
+        let renderer: Lunch.Node<THREE.WebGLRenderer> | null
+        let camera: Lunch.Node<THREE.Camera> | null
         let scene: MiniDom.RendererStandardNode<THREE.Scene>
 
         // MOUNT
@@ -58,42 +70,121 @@ export const LunchboxWrapper: ComponentOptions = {
             // canvas needs to exist
             if (!canvas.value) throw new Error('missing canvas')
 
-            // ensure camera
-            const camera = ensureCamera().instance
-            // move camera if needed
-            if (camera && props.cameraPosition) {
-                camera.position.set(...props.cameraPosition)
-            }
-
             // RENDERER
             // ====================
-            // build renderer args
-            const rendererArgs: THREE.WebGLRendererParameters = {
-                antialias: true,
-                canvas: canvas.value.domElement,
-            }
-            if (props.transparent) {
-                rendererArgs.alpha = true
-            }
-            const sugar = {
-                shadow: props.shadow,
-            }
-            // ensure renderer
-            renderer = ensureRenderer([rendererArgs], sugar)
-            // set renderer props if needed
-            if (props.rendererProperties) {
-                Object.keys(props.rendererProperties).forEach((key) => {
-                    set(renderer, key, (props.rendererProperties as any)[key])
+            // is there already a renderer?
+            // TODO: allow other renderer types
+            renderer = tryGetNodeWithInstanceType([
+                'WebGLRenderer',
+            ]) as unknown as Lunch.Node<THREE.WebGLRenderer> | null
+
+            // if renderer is missing, initialize with options
+            if (!renderer) {
+                // build renderer args
+                const rendererArgs: THREE.WebGLRendererParameters = {
+                    antialias: true,
+                    canvas: canvas.value.domElement,
+                }
+                if (props.transparent) {
+                    rendererArgs.alpha = true
+                }
+
+                // create new renderer
+                ensureRenderer.value = createNode<THREE.WebGLRenderer>({
+                    type: 'WebGLRenderer',
+                    uuid: fallbackRendererUuid,
+                    props: {
+                        args: [rendererArgs],
+                    },
                 })
-            }
-            if (renderer.uuid !== fallbackRendererUuid) {
+
+                // we've initialized the renderer, so anything depending on it can execute now
+                rendererReady.value = true
+
+                const rendererAsWebGlRenderer =
+                    ensureRenderer as WritableComputedRef<
+                        Lunch.Node<THREE.WebGLRenderer>
+                    >
+
+                // update render sugar
+                const sugar = {
+                    shadow: props.shadow,
+                }
+                if (rendererAsWebGlRenderer.value.instance && sugar?.shadow) {
+                    rendererAsWebGlRenderer.value.instance.shadowMap.enabled =
+                        true
+                    if (typeof sugar.shadow === 'object') {
+                        rendererAsWebGlRenderer.value.instance.shadowMap.type =
+                            sugar.shadow.type
+                    }
+                }
+
+                // set renderer props if needed
+                if (props.rendererProperties) {
+                    Object.keys(props.rendererProperties).forEach((key) => {
+                        set(
+                            rendererAsWebGlRenderer.value,
+                            key,
+                            (props.rendererProperties as any)[key]
+                        )
+                    })
+                }
+
+                // update using created renderer
+                renderer = rendererAsWebGlRenderer.value
+            } else {
                 useFallbackRenderer.value = false
+                // the user has initialized the renderer, so anything depending
+                // on the renderer can execute
+                rendererReady.value = true
                 return
             }
 
+            // CAMERA
+            // ====================
+            // is there already a camera?
+            camera = tryGetNodeWithInstanceType([
+                'PerspectiveCamera',
+                'OrthographicCamera',
+            ])
+            // if not, let's create one
+            if (!camera) {
+                // create ortho camera
+                if (props.ortho || props.orthographic) {
+                    ensuredCamera.value = createNode<THREE.OrthographicCamera>({
+                        props: { args: props.cameraArgs ?? [] },
+                        type: 'OrthographicCamera',
+                        uuid: fallbackCameraUuid,
+                    })
+                } else {
+                    ensuredCamera.value = createNode<THREE.PerspectiveCamera>({
+                        props: {
+                            args: props.cameraArgs ?? [45, 0.5625, 1, 1000],
+                        },
+                        type: 'PerspectiveCamera',
+                        uuid: fallbackCameraUuid,
+                    })
+                }
+
+                cameraReady.value = true
+
+                camera = ensuredCamera.value
+            } else {
+                cameraReady.value = true
+            }
+            // move camera if needed
+            if (camera && props.cameraPosition) {
+                camera.instance?.position.set(...props.cameraPosition)
+            }
+            // angle camera if needed
+            if (camera && (props.cameraLookAt || props.cameraLook)) {
+                const source = (props.cameraLookAt || props.cameraLook)!
+                camera.instance?.lookAt(...source)
+            }
+
             // SCENE
             // ====================
-            scene = ensureScene()
+            scene = ensuredScene.value
             // set background color
             if (scene && scene.instance && props.background) {
                 scene.instance.background = new Color(props.background)
@@ -105,7 +196,7 @@ export const LunchboxWrapper: ComponentOptions = {
                 dpr.value = window.devicePixelRatio
             }
 
-            if (renderer.instance) {
+            if (renderer?.instance) {
                 renderer.instance.setPixelRatio(dpr.value)
                 globals.dpr.value = dpr.value
                 // prep canvas (sizing, observe, unmount, etc)
@@ -120,9 +211,10 @@ export const LunchboxWrapper: ComponentOptions = {
 
             // KICK UPDATE
             // ====================
+            // console.log(scene)
             update({
                 app: getCurrentInstance()!.appContext.app as Lunch.App,
-                camera,
+                camera: camera.instance,
                 renderer: renderer.instance,
                 scene: scene.instance,
             })

package/src/components/LunchboxWrapper/resizeCanvas.ts

@@ -1,30 +1,40 @@
-import { ensureCamera, ensureRenderer, ensureScene } from '../../core'
+import { ensuredCamera, ensureRenderer, ensuredScene } from '../../core'
+import { toRaw } from 'vue'
 
 export const resizeCanvas = (width?: number, height?: number) => {
-    const renderer = ensureRenderer().instance
-    const scene = ensureScene().instance
+    const renderer = ensureRenderer.value?.instance
+    const scene = ensuredScene.value.instance
+    const camera = ensuredCamera.value
 
     // ignore if no element
-    if (!renderer?.domElement || !scene) return
+    if (!renderer?.domElement || !scene || !camera) return
 
     width = width ?? window.innerWidth
     height = height ?? window.innerHeight
 
     // update camera
     const aspect = width / height
-    const camera = ensureCamera()
     if (camera.type?.toLowerCase() === 'perspectivecamera') {
         const perspectiveCamera = camera.instance as THREE.PerspectiveCamera
         perspectiveCamera.aspect = aspect
         perspectiveCamera.updateProjectionMatrix()
+    } else if (camera.type?.toLowerCase() === 'orthographiccamera') {
+        // console.log('TODO: ortho camera update')
+        const orthoCamera = camera.instance as THREE.OrthographicCamera
+        const heightInTermsOfWidth = height / width
+        orthoCamera.top = heightInTermsOfWidth * 10
+        orthoCamera.bottom = -heightInTermsOfWidth * 10
+        orthoCamera.right = 10
+        orthoCamera.left = -10
+        orthoCamera.updateProjectionMatrix()
     } else {
-        console.log('TODO: ortho camera update')
+        console.log('TODO: non-ortho or perspective camera')
     }
 
     // update canvas
     renderer.setSize(width, height)
     // render immediately so there's no flicker
     if (scene && camera.instance) {
-        renderer.render(scene, camera.instance)
+        renderer.render(toRaw(scene), toRaw(camera.instance))
     }
 }

package/src/components/autoGeneratedComponents.ts

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