@lukekaalim/act-three 5.1.0 → 5.2.0

package/components/groups.js

@@ -1,26 +1,37 @@
 // @flow strict
 /*:: import type { Component, Ref } from '@lukekaalim/act'; */
-/*:: import type { Euler, Group } from "three"; */
+/*:: import type { Euler, Group, Object3D } 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 }>*/ = ({
+/*::
+export type LookAtGroupProps = {
+  ...$Diff<GroupProps, { rotation?: Euler, ref?: RefProp<Group> }>,
+  target: Vector3,
+  deps?: mixed[],
+};
+*/
+
+export const LookAtGroup/*: Component<LookAtGroupProps>*/ = ({
   target,
   children,
   position = new Vector3(0, 0, 0),
+  deps = [],
   ...groupProps
 }) => {
-  const [groupNode, setGroup] = useState(null);
+  const groupRef = useRef(null);
+
   useEffect(() => {
+    const { current: groupNode } = groupRef;
     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]);
+  }, [target.x, target.y, target.z, position.x, position.y, position.z, ...deps]);
 
-  return h(group, { ...groupProps, position, ref: setGroup }, children);
+  return h(group, { ...groupProps, position, ref: groupRef }, children);
 }

package/hooks/matrix.js

@@ -0,0 +1,28 @@
+// @flow strict
+/*:: import type { Component, Ref } from '@lukekaalim/act'; */
+/*:: import type { Euler, Group, Object3D } 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 defaultUp/*: Vector3*/ = new Vector3(0, 1, 0);
+
+export const useLookAt = /*:: <T: Object3D>*/(
+  objectRef/*: Ref<?T>*/,
+  target/*: Vector3*/,
+  deps/*: mixed[]*/ = [],
+  up/*: Vector3*/ = defaultUp,
+) => {
+
+  useEffect(() => {
+    const { current: object } = objectRef;
+    if (!object)
+      return;
+      
+    object.setRotationFromMatrix(new Matrix4().lookAt(object.position, target, up));
+    object.updateMatrix();
+
+  }, [target.x, target.y, target.z, ...deps]);
+}

package/hooks.js

@@ -21,12 +21,13 @@ export type WebGLOptions = {
 */
 
 export const useWebGLRenderer = (
-  canvas/*: ?HTMLCanvasElement*/,
+  canvasRef/*: Ref<?HTMLCanvasElement>*/,
   options/*: WebGLOptions*/ = {},
   deps/*: mixed[]*/ = []
 )/*: ?WebGLRenderer*/ => {
   const [renderer, setRenderer] = useState/*:: <?WebGLRenderer>*/(null);
   useEffect(() => {
+    const { current: canvas } = canvasRef; 
     if (!canvas)
       return;
     
@@ -38,7 +39,7 @@ export const useWebGLRenderer = (
       setRenderer(null);
       renderer.dispose();
     }
-  }, [canvas, ...deps]);
+  }, deps);
 
   return renderer;
 };
@@ -46,9 +47,13 @@ export const useWebGLRenderer = (
 // 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*/ => {
+export const useResizingRenderer = (
+  canvasRef/*: Ref<?HTMLCanvasElement>*/,
+  renderer/*: ?WebGLRenderer*/
+)/*: ?Vector2*/ => {
   const [size, setSize] = useState(null)
   useEffect(() => {
+    const { current: canvas } = canvasRef; 
     if (!canvas || !renderer)
       return null;
     
@@ -67,16 +72,19 @@ export const useResizingRenderer = (canvas/*: ?HTMLCanvasElement*/, renderer/*:
       observer.unobserve(canvas);
       setSize(null);
     }
-  }, [canvas, renderer]);
+  }, [renderer]);
 
   return size;
 }
 
 export const useAnimationFrame = (
-  onAnimate/*: (now: DOMHighResTimeStamp, delta: number) => mixed*/,
+  onAnimate/*: ?(now: DOMHighResTimeStamp, delta: number) => mixed*/ = null,
   deps/*: mixed[]*/ = []
 ) => {
   useEffect(() => {
+    if (!onAnimate)
+      return;
+    
     let lastFrame = performance.now();
     const animate = (now) => {
       const delta = now - lastFrame;
@@ -96,22 +104,23 @@ export const useAnimationFrame = (
 
 export const useRenderLoop = (
   renderer/*: ?WebGLRenderer*/,
-  camera/*: ?Camera*/,
-  scene/*: ?Scene*/,
+  camera/*: Ref<?Camera>*/,
+  scene/*: Ref<?Scene>*/,
   onAnimate/*: (now: DOMHighResTimeStamp, delta: number) => mixed*/ = (_, __) => {},
   deps/*: mixed[]*/ = []
 ) => {
-  const renderFunction = renderer && camera && scene ? (now, delta) => {
+  const renderFunction = renderer && ((now, delta) => {
     onAnimate(now, delta);
-    renderer.render(scene, camera);
-  } : () => {};
+    if (camera.current && scene.current)
+      renderer.render(scene.current, camera.current);
+  });
 
   useEffect(() => {
-    if (scene && camera && renderer)
-      renderer.render(scene, camera);
-  }, [renderer, camera, scene, ...deps])
+    if (renderFunction)
+      renderFunction(performance.now(), 0);
+  }, [renderer, ...deps])
 
-  useAnimationFrame(renderFunction, [renderer, camera, scene, ...deps])
+  useAnimationFrame(renderFunction, [renderer, ...deps])
 }
 
 /*::
@@ -163,3 +172,6 @@ export const useTexture = (url/*: string*/)/*: Texture*/ => {
   
   return texture;
 };
+
+
+export * from './hooks/matrix.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukekaalim/act-three",
-  "version": "5.1.0",
+  "version": "5.2.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": "^3.0.0",
-    "@lukekaalim/act-reconciler": "^2.1.0",
-    "@lukekaalim/act-web": "^1.1.0"
+    "@lukekaalim/act-renderer-core": "^3.1.1",
+    "@lukekaalim/act-reconciler": "^3.0.0",
+    "@lukekaalim/act-web": "^1.2.0"
   }
 }

package/reconciler.js

@@ -21,6 +21,7 @@ export const render = (element/*: Element*/, node/*: HTMLElement*/) => {
   const options = {
     onDiff,
     scheduleWork: (c) => requestAnimationFrame(() => void c()),
+    cancelWork: (t) => cancelAnimationFrame(t),
   };
   const tree = createTree(element, options);
 };