@lukekaalim/act-three 5.2.1 → 5.4.0

package/components.js

@@ -16,6 +16,8 @@
   Scene,
   CubeTexture,
   Fog,
+  Line,
+  LineSegments,
   WebGLRenderer,
 } from "three"; */
 /*:: import * as Three from 'three'; */
@@ -110,9 +112,22 @@ export const orthographicCamera = ('orthographicCamera'/*: Component<Orthographi
 
 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 points = ('points'/*: Component<PointsProps>*/);
+
+/*::
+export type LineProps = {
+  ...Object3DProps<Line>,
+  geometry?: BufferGeometry,
+  material?: Material,
+}
+*/
+export const line = ('line'/*: Component<LineProps>*/);
+export const lineLoop = ('lineLoop'/*: Component<LineProps>*/);
+export const lineSegments = ('lineSegments'/*: Component<LineProps>*/);
+
 export const pointLight = ('pointLight'/*: Component<PointLightsProps>*/);
 export const ambientLight = ('ambientLight'/*: Component<AmbientLightProps>*/);
 export const hemisphereLight = ('hemisphereLight'/*: Component<PointLightsProps>*/);

package/hooks.js

@@ -1,6 +1,13 @@
 // @flow strict
 /*:: import type { Ref } from '@lukekaalim/act'; */
-/*:: import type { Camera, Scene, Texture } from "three"; */
+/*:: import type {
+  Camera,
+  Scene,
+  Texture,
+  Object3D,
+  PerspectiveCamera,
+  OrthographicCamera,
+} from "three"; */
 import { TextureLoader, Vector2, WebGLRenderer } from "three";
 
 import { useEffect, useState } from "@lukekaalim/act";
@@ -47,13 +54,15 @@ 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 = (
+export const useResizingRenderer = /*:: <TCam: (PerspectiveCamera | OrthographicCamera)>*/(
   canvasRef/*: Ref<?HTMLCanvasElement>*/,
-  renderer/*: ?WebGLRenderer*/
+  renderer/*: ?WebGLRenderer*/,
+  cameraRef/*: ?Ref<?PerspectiveCamera>*/ = null,
 )/*: ?Vector2*/ => {
   const [size, setSize] = useState(null)
   useEffect(() => {
     const { current: canvas } = canvasRef; 
+    const { current: camera } = (cameraRef || { current: null })
     if (!canvas || !renderer)
       return null;
     
@@ -64,6 +73,10 @@ export const useResizingRenderer = (
         const size = new Vector2(width, height);
         setSize(size);
         renderer.setSize(width, height, false);
+        if (camera) {
+          camera.aspect = width / height;
+          camera.updateProjectionMatrix();
+        }
       }
     });
     observer.observe(canvas, { box: 'content-box' });
@@ -102,10 +115,10 @@ export const useAnimationFrame = (
   }, deps);
 }
 
-export const useRenderLoop = (
+export const useRenderLoop = /*:: <TCamera: Camera, TScene: Object3D>*/(
   renderer/*: ?WebGLRenderer*/,
-  camera/*: Ref<?Camera>*/,
-  scene/*: Ref<?Scene>*/,
+  camera/*: Ref<?TCamera>*/,
+  scene/*: Ref<?TScene>*/,
   onAnimate/*: (now: DOMHighResTimeStamp, delta: number) => mixed*/ = (_, __) => {},
   deps/*: mixed[]*/ = []
 ) => {
@@ -159,8 +172,6 @@ export const useTexture = (url/*: string*/)/*: Texture*/ => {
 
     const texture = loader.load(url);
     setTexture(texture);
-
-    console.log(loader);
     
     return () => {
       texture.dispose();

package/objects.js

@@ -13,9 +13,16 @@ import {
   DirectionalLight,
   HemisphereLight,
   AmbientLight,
+  Skeleton,
+  LineSegments,
+  Line,
+  LineLoop,
+  Bone,
+  Sprite,
+  LOD,
 } from "three";
 
-const threeObjectClasses/*: { [string]: Class<Object3D> }*/ = Object.fromEntries(Object.entries({
+export const threeObjectClasses/*: { [string]: Class<Object3D> }*/ = Object.fromEntries(Object.entries({
   // grouping
   Scene,
   Group,
@@ -32,10 +39,20 @@ const threeObjectClasses/*: { [string]: Class<Object3D> }*/ = Object.fromEntries
 
   // lines
   Points,
+  LineSegments,
+  Line,
+  LineLoop,
+
+  // skinning
+  Skeleton,
+  Bone,
+
+  Sprite,
 
   // mesh
   Mesh,
   InstancedMesh,
+  LOD,
 }).map(([key, value]) => [key.toLowerCase(), (value/*: any*/)]));
 
 export const createObject = (type/*: string*/)/*: null | Object3D*/ => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukekaalim/act-three",
-  "version": "5.2.1",
+  "version": "5.4.0",
   "description": "Render threejs content using act",
   "main": "entry.js",
   "type": "module",

package/renderer.js

@@ -21,6 +21,8 @@ export const createObjectRenderer = ()/*: Renderer<Object3D>*/ => {
     add(diff) {
       if (typeof diff.next.element.type === 'function')
         return null;
+      if (diff.next.element.type === 'act:context')
+        return null;
       return createObject(diff.next.element.type);
     }
   });