@lukekaalim/act-three 4.0.0 → 5.0.0

package/components/groups.js

@@ -0,0 +1,26 @@
+// @flow strict
+/*:: import type { Component, Ref } from '@lukekaalim/act'; */
+/*:: import type { Euler, Group } from "three"; */
+/*:: import type { GroupProps, RefProp } from '../components'; */
+
+import { h, useEffect, useRef, useState } from '@lukekaalim/act';
+import { Matrix4, Vector3 } from "three";
+import { group } from '../components.js';
+
+export const LookAtGroup/*: Component<{ ...$Diff<GroupProps, { rotation?: Euler, ref?: RefProp<Group> }>, target: Vector3 }>*/ = ({
+  target,
+  children,
+  position = new Vector3(0, 0, 0),
+  ...groupProps
+}) => {
+  const [groupNode, setGroup] = useState(null);
+  useEffect(() => {
+    if (!groupNode)
+      return;
+      
+    groupNode.setRotationFromMatrix(new Matrix4().lookAt(position, target, new Vector3(0, 1, 0)));
+    groupNode.updateMatrix();
+  }, [groupNode, target.x, target.y, target.z, position.x, position.y, position.z]);
+
+  return h(group, { ...groupProps, position, ref: setGroup }, children);
+}

package/components/lights.js

@@ -0,0 +1 @@
+// @flow strict

package/components.js

@@ -21,19 +21,10 @@
 /*:: import * as Three from 'three'; */
 
 /*::
-export type RootProps = {
-  canvas?: ?{ [string]: mixed },
-  renderer?: ?{
-    size?: ?{ width: number, height: number, updateStyle: boolean },
-    clearColor?: ?{ color: Color, alpha: number },
-    clearAlpha?: number,
-  },
-  onRender?: ?(timestamp: number, renderer: WebGLRenderer, scene: Object3D) => mixed,
-  camera?: ?Camera,
-};
+export type RefProp<T> = ((reference: T) => mixed) | { current: T | any }
 
 export type Object3DProps<T> = {
-  ref?: ((reference: T) => mixed) | { current: T | any },
+  ref?: RefProp<?T>,
 
   name?: string,
   position?: Vector3,
@@ -73,6 +64,18 @@ export type PointLightsProps = {
   intensity?: number,
   power?: number,
 };
+export type DirectionalLightProps = {
+  ...Object3DProps<Three.DirectionalLight>,
+  distance?: number,
+  decay?: number,
+  intensity?: number,
+  power?: number,
+};
+export type AmbientLightProps = {
+  ...Object3DProps<Three.AmbientLight>,
+  intensity?: number,
+  power?: number,
+};
 export type PointsProps = {
   ...Object3DProps<Three.Points>,
   geometry?: BufferGeometry,
@@ -90,17 +93,31 @@ export type PerspectiveCameraProps = {
   fov?: number,
   zoom?: number,
 }
+export type OrthographicCameraProps = {
+  ...Object3DProps<Three.OrthographicCamera>,
+  aspect?: number,
+  near?: number,
+  far?: number,
+  zoom?: number,
+}
 */
 
-export const three = ('three'/*: Component<RootProps>*/);
-
 export const scene = ('scene'/*: Component<SceneProps>*/);
 export const group = ('group'/*: Component<GroupProps>*/);
 
 export const perspectiveCamera = ('perspectiveCamera'/*: Component<PerspectiveCameraProps>*/);
+export const orthographicCamera = ('orthographicCamera'/*: Component<OrthographicCameraProps>*/);
 
 export const mesh = ('mesh'/*: Component<MeshProps>*/);
 export const sprite = ('sprite'/*: Component<SpriteProps>*/);
 export const points = ('points'/*: Component<PointsProps>*/);
 export const instancedMesh = ('instancedMesh'/*: Component<InstancedMeshProps>*/);
-export const pointLight = ('pointLight'/*: Component<PointLightsProps>*/);
+
+export const pointLight = ('pointLight'/*: Component<PointLightsProps>*/);
+export const ambientLight = ('ambientLight'/*: Component<AmbientLightProps>*/);
+export const hemisphereLight = ('hemisphereLight'/*: Component<PointLightsProps>*/);
+export const directionalLight = ('directionalLight'/*: Component<DirectionalLightProps>*/);
+
+
+export * from './components/groups.js';
+export * from './components/lights.js';

package/entry.js

@@ -3,4 +3,5 @@
 export * from './reconciler.js';
 export * from './renderer.js';
 export * from './objects.js';
-export * from './components.js';
+export * from './components.js';
+export * from './hooks.js';

package/hooks.js

@@ -0,0 +1,165 @@
+// @flow strict
+/*:: import type { Ref } from '@lukekaalim/act'; */
+/*:: import type { Camera, Scene, Texture } from "three"; */
+import { TextureLoader, Vector2, WebGLRenderer } from "three";
+
+import { useEffect, useState } from "@lukekaalim/act";
+import { useRef } from "@lukekaalim/act";
+
+
+/*::
+export type WebGLOptions = {
+  antialias?: boolean,
+  alpha?: boolean,
+
+  shadowMap?: {
+    enabled?: boolean,
+    autoUpdate?: boolean,
+    type?: number,
+  }
+};
+*/
+
+export const useWebGLRenderer = (
+  canvas/*: ?HTMLCanvasElement*/,
+  options/*: WebGLOptions*/ = {},
+  deps/*: mixed[]*/ = []
+)/*: ?WebGLRenderer*/ => {
+  const [renderer, setRenderer] = useState/*:: <?WebGLRenderer>*/(null);
+  useEffect(() => {
+    if (!canvas)
+      return;
+    
+    const renderer = new WebGLRenderer({ ...options, canvas });
+    renderer.shadowMap.enabled = options.shadowMap?.enabled || false;
+    setRenderer(renderer);
+
+    return () => {
+      setRenderer(null);
+      renderer.dispose();
+    }
+  }, [canvas, ...deps]);
+
+  return renderer;
+};
+
+// Resize the canvas's resolution whenever it changes size
+// useful for when the canvas is some percentage of the screen
+// like: width: 100%
+export const useResizingRenderer = (canvas/*: ?HTMLCanvasElement*/, renderer/*: ?WebGLRenderer*/)/*: ?Vector2*/ => {
+  const [size, setSize] = useState(null)
+  useEffect(() => {
+    if (!canvas || !renderer)
+      return null;
+    
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries.filter(e => e.target === canvas)) {
+        const width = entry.contentBoxSize[0].inlineSize;
+        const height = entry.contentBoxSize[0].blockSize;
+        const size = new Vector2(width, height);
+        setSize(size);
+        renderer.setSize(width, height, false);
+      }
+    });
+    observer.observe(canvas, { box: 'content-box' });
+
+    return () => {
+      observer.unobserve(canvas);
+      setSize(null);
+    }
+  }, [canvas, renderer]);
+
+  return size;
+}
+
+export const useAnimationFrame = (
+  onAnimate/*: (now: DOMHighResTimeStamp, delta: number) => mixed*/,
+  deps/*: mixed[]*/ = []
+) => {
+  useEffect(() => {
+    let lastFrame = performance.now();
+    const animate = (now) => {
+      const delta = now - lastFrame;
+      lastFrame = now;
+
+      onAnimate(now, delta);
+      id = requestAnimationFrame(animate);
+    };
+    let id = requestAnimationFrame(animate);
+
+    return () => {
+      if (id)
+        cancelAnimationFrame(id);
+    }
+  }, deps);
+}
+
+export const useRenderLoop = (
+  renderer/*: ?WebGLRenderer*/,
+  camera/*: ?Camera*/,
+  scene/*: ?Scene*/,
+  onAnimate/*: (now: DOMHighResTimeStamp, delta: number) => mixed*/ = (_, __) => {},
+  deps/*: mixed[]*/ = []
+) => {
+  const renderFunction = renderer && camera && scene ? (now, delta) => {
+    onAnimate(now, delta);
+    renderer.render(scene, camera);
+  } : () => {};
+
+  useEffect(() => {
+    if (scene && camera && renderer)
+      renderer.render(scene, camera);
+  }, [renderer, camera, scene, ...deps])
+
+  useAnimationFrame(renderFunction, [renderer, camera, scene, ...deps])
+}
+
+/*::
+export interface Disposable {
+  dispose(): void;
+}
+*/
+
+export const useDisposable = /*:: <T: Disposable>*/(
+  create/*: () => T*/,
+  deps/*: mixed[]*/ = []
+)/*: T*/ => {
+  const [resource, setResource] = useState/*:: <T>*/(() => create());
+  const disposedRef = useRef(false);
+
+  useEffect(() => {
+    const { current: disposed } = disposedRef
+
+    if (disposed) {
+      setResource(create());
+      disposedRef.current = false;
+    }
+  
+    return () => {
+      resource.dispose();
+      disposedRef.current = true;
+    }
+  }, deps);
+  return resource;
+};
+
+export const useTexture = (url/*: string*/)/*: Texture*/ => {
+  const [texture, setTexture] = useState(null)
+  useEffect(() => {
+    const loader = new TextureLoader();
+
+    const texture = loader.load(url);
+    setTexture(texture);
+
+    console.log(loader);
+    
+    return () => {
+      texture.dispose();
+    }
+  }, []);
+
+  if (!texture)
+    throw { type: 'loading' };
+  
+  return texture;
+};

package/objects.js

@@ -1,7 +1,6 @@
 // @flow strict
 /*:: import type { Object3D } from "three"; */
 /*:: import type { PropDiff } from '@lukekaalim/act-reconciler'; */ 
-/*:: import type { ObjectDef } from './renderer.js'; */ 
 import {
   Group,
   Mesh,
@@ -10,24 +9,42 @@ import {
   Points,
   Scene,
   InstancedMesh,
+  OrthographicCamera,
+  DirectionalLight,
+  HemisphereLight,
+  AmbientLight,
 } from "three";
 
+const threeObjectClasses/*: { [string]: Class<Object3D> }*/ = Object.fromEntries(Object.entries({
+  // grouping
+  Scene,
+  Group,
+
+  // lights
+  DirectionalLight,
+  HemisphereLight,
+  PointLight,
+  AmbientLight,
+
+  // camera
+  PerspectiveCamera,
+  OrthographicCamera,
+
+  // lines
+  Points,
+
+  // mesh
+  Mesh,
+  InstancedMesh,
+}).map(([key, value]) => [key.toLowerCase(), (value/*: any*/)]));
+
 export const createObject = (type/*: string*/)/*: null | Object3D*/ => {
-  switch (type) {
-    case 'scene':
-      return new Scene();
-    case 'group':
-      return new Group();
-    case 'perspectiveCamera':
-      return new PerspectiveCamera();
-    case 'points':
-      return new Points();
-    case 'mesh':
-      return new Mesh();
-    case 'instancedMesh':
-      return new InstancedMesh();
-    default:
-      console.warn(`Unknown object type "${type}"`)
-      return null;
+  const objectClass = threeObjectClasses[type.toLowerCase()];
+
+  if (!objectClass) {
+    console.warn(`Unknown object type "${type}"`)
+    return null;
   }
+
+  return new objectClass(); 
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukekaalim/act-three",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Render threejs content using act",
   "main": "entry.js",
   "type": "module",
@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@lukekaalim/act": "^2.2.0",
-    "@lukekaalim/act-renderer-core": "^2.0.0",
-    "@lukekaalim/act-reconciler": "^2.0.4",
+    "@lukekaalim/act-renderer-core": "^3.0.0",
+    "@lukekaalim/act-reconciler": "^2.1.0",
     "@lukekaalim/act-web": "^1.0.0"
   }
 }

package/props.js

@@ -1,84 +1,12 @@
 // @flow strict
 /*:: import type { Object3D, WebGLRenderer } from "three"; */
 /*:: import type { Props, PropDiff, CommitDiff } from '@lukekaalim/act-reconciler'; */
-/*:: import type { Frame, Root } from "./renderer.js"; */
 
 import { calculatePropsDiff } from "@lukekaalim/act-reconciler";
 import { setHTMLProp } from "@lukekaalim/act-web";
-import { Group } from "three";
+import { DirectionalLight, Group, Light, OrthographicCamera } from "three";
 import { setRef } from "@lukekaalim/act-renderer-core";
 
-export const setCanvasProps = ({ prev, next }/*: PropDiff*/, canvas/*: HTMLCanvasElement*/) => {
-  const validPrev = typeof prev === 'object' && prev ? prev : {};
-  const validNext = typeof next === 'object' && next ? next : {};
-  const diffs = calculatePropsDiff(validPrev, validNext)
-  for (const [key, prop] of diffs)
-    setHTMLProp(canvas, prop);
-};
-
-export const setWebGLRendererProp = ({ key, prev, next }/*: PropDiff*/,renderer/*: WebGLRenderer*/) => {
-  switch (key) {
-    case 'size':
-      if (typeof next !== 'object' || !next)
-        return;
-      const { width, height, updateStyle } = next;
-      // $FlowFixMe
-      renderer.setSize(width, height, updateStyle);
-      return;
-    case 'clearAlpha':
-      // $FlowFixMe
-      renderer.setClearAlpha(next);
-    case 'clearColor':
-      if (typeof next !== 'object' || !next)
-        return;
-      const { color, alpha } = next;
-      // $FlowFixMe
-      renderer.setClearColor(color, alpha);
-  }
-};
-
-export const setWebGLRendererProps = ({ prev, next }/*: PropDiff*/, renderer/*: WebGLRenderer*/) => {
-  const validPrev = typeof prev === 'object' && prev ? prev : {};
-  const validNext = typeof next === 'object' && next ? next : {};
-  const diffs = calculatePropsDiff(validPrev, validNext)
-
-  for (const [key, prop] of diffs)
-    setWebGLRendererProp(prop, renderer);
-};
-
-const defaultRootProps/*: Props*/ = {
-  camera: null,
-  onRender: _ => {},
-};
-
-export const setRootProps = (diff/*: CommitDiff*/, { frame, renderer, canvas }/*: Root*/, children/*: Object3D[]*/) => {
-  const validPrev = { ...defaultRootProps, ...diff.prev.element.props };
-  const validNext = { ...defaultRootProps, ...diff.next.element.props };
-  const diffs = calculatePropsDiff(validPrev, validNext);
-
-  if (diffs.has('camera') || diffs.has('onRender')) {
-    const { onRender, camera } = (validNext/*: any*/);
-    if (frame.id)
-      cancelAnimationFrame(frame.id);
-    if (!camera)
-      renderer.clear(true, true, true);
-    if (onRender && camera && children[0]) {
-      const updateFunction = (timestamp) => {
-        onRender(timestamp, renderer, children[0]);
-        renderer.render(children[0], camera);
-        frame.id = requestAnimationFrame(updateFunction);
-      };
-      frame.id = requestAnimationFrame(updateFunction);
-    }
-  }
-  const canvasProps = diffs.get('canvas');
-  const rendererProps = diffs.get('renderer');
-  if (canvasProps)
-    setCanvasProps(canvasProps, canvas);
-  if (rendererProps)
-    setWebGLRendererProps(rendererProps, renderer);
-};
-
 export const setObjectProp = ({ key, prev, next }/*: PropDiff*/, object/*: Object3D*/)/*: void*/ => {
   switch (key) {
     case 'position':
@@ -112,12 +40,36 @@ export const setGroupProps = (diff/*: CommitDiff*/, group/*: Group*/) => {
   }
 };
 
+export const setDirectionalLightProps = (diff/*: CommitDiff*/, light/*: DirectionalLight*/) => {
+  const diffs = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
+  for (const [key, diff] of diffs) {
+    switch (key) {
+      case 'shadow': {
+        const diffs = calculatePropsDiff((diff.prev/*: any*/) || {}, (diff.next/*: any*/) || {});
+        for (const [key, diff] of diffs)
+          (light/*: any*/).shadow[key] = diff.next;
+        break;
+      }
+      default:
+        setObjectProp(diff, light); break;
+    }
+  }
+}
+
 export const setObjectProps = (diff/*: CommitDiff*/, object/*: ?Object3D*/)/*: void*/ => {
   setRef(object, diff);
   if (diff.next.pruned || !object)
     return;
   if (object instanceof Group)
     return setGroupProps(diff, object);
+  if (object instanceof DirectionalLight)
+    return setDirectionalLightProps(diff, object);
+  if (object instanceof OrthographicCamera) {
+    const diffs = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
+    for (const [key, diff] of diffs)
+      setObjectProp(diff, object);
+    object.updateProjectionMatrix();
+  }
   else {
     const diffs = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
     for (const [key, diff] of diffs)

package/reconciler.js

@@ -3,16 +3,20 @@
 /*:: import type { Renderer } from '@lukekaalim/act-renderer-core'; */
 
 import { createTree } from "@lukekaalim/act-reconciler";
-import { createWebRenderer } from "@lukekaalim/act-web";
-import { attachNodes } from "@lukekaalim/act-web/node.js";
-import { createThreeRenderer } from "./renderer.js";
+import { createWebRenderer, setNodeChildren } from "@lukekaalim/act-web";
+
+import { createSceneRenderer } from "./renderer";
 
 export const render = (element/*: Element*/, node/*: HTMLElement*/) => {
-  const three = createThreeRenderer();
+
+  const scene = createSceneRenderer();
   const web = createWebRenderer({
-    'three': three,
+    'scene': scene,
   });
-  const onDiff = diff => attachNodes(node, web.render(diff));
+  const onDiff = diff => {
+    const children = web.render(diff);
+    setNodeChildren(diff, node, children)
+  };
 
   const options = {
     onDiff,

package/renderer.js

@@ -2,63 +2,10 @@
 /*:: import type { Renderer } from '@lukekaalim/act-renderer-core'; */
 /*:: import type { CommitDiff, PropDiff, CommitID } from '@lukekaalim/act-reconciler'; */
 /*:: import type { Object3D } from 'three'; */
-import { WebGLRenderer } from 'three';
-import { createManagedRenderer } from '@lukekaalim/act-renderer-core';
-import { setRootProps } from "./props.js";
+import { createManagedRenderer, createNullRenderer } from '@lukekaalim/act-renderer-core';
 import { createObject } from "./objects";
 import { setObjectProps } from "./props";
 
-/*::
-export type Root = {
-  canvas: HTMLCanvasElement,
-  renderer: WebGLRenderer,
-  frame: Frame
-};
-export type Frame = {
-  scene: ?Object3D,
-  id: ?AnimationFrameID
-}
-export type ObjectDef = {
-  update: Object3D => mixed,
-  create: () => Object3D
-};
-export type ObjectDefMap = { [type: string]: ObjectDef };
-*/
-
-// A "root" is a combination of a canvas and a renderer
-export const createRootRenderer = (objectRenderer/*: Renderer<Object3D>*/)/*: Renderer<Node>*/ => {
-  const roots/*: Map<CommitID, Root>*/ = new Map();
-  const createRoot = (diff) => {
-    const canvas = document.createElement('canvas');
-    const renderer = new WebGLRenderer({ canvas });
-
-    const root = { canvas, renderer, frame: { id: null, scene: null } };
-    roots.set(diff.next.id, root);
-    return root;
-  };
-  const removeRoot = (diff, root) => {
-    if (root.frame.id)
-      cancelAnimationFrame(root.frame.id)
-
-    root.renderer.dispose();
-    root.canvas.parentNode?.removeChild(root.canvas);
-    roots.delete(diff.next.id);
-  };
-  const render = (diff) => {
-    const root = roots.get(diff.next.id) || createRoot(diff);
-
-    if (diff.next.pruned)
-      return (removeRoot(diff, root), []);
-
-    const children = diff.diffs.map(objectRenderer.render).flat(1);
-    setRootProps(diff, root, children);
-
-    return [root.canvas];
-  };
-  return {
-    render
-  };
-};
 export const createObjectRenderer = ()/*: Renderer<Object3D>*/ => {
   return createManagedRenderer({
     remove(object) {
@@ -69,7 +16,7 @@ export const createObjectRenderer = ()/*: Renderer<Object3D>*/ => {
         return;
       setObjectProps(diff, object);
       if (children.length > 0)
-        object.add(...children);
+        object.add(...children.map(c => c.node));
     },
     add(diff) {
       if (typeof diff.next.element.type === 'function')
@@ -79,8 +26,7 @@ export const createObjectRenderer = ()/*: Renderer<Object3D>*/ => {
   });
 };
 
-export const createThreeRenderer = ()/*: Renderer<Node>*/ => {
+export const createSceneRenderer = /*:: <T>*/()/*: Renderer<T>*/ => {
   const object = createObjectRenderer();
-  const root = createRootRenderer(object);
-  return root;
-};
+  return createNullRenderer(object);
+}