@lukekaalim/act-three 5.2.0 → 5.3.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,6 @@
 // @flow strict
 /*:: import type { Ref } from '@lukekaalim/act'; */
-/*:: import type { Camera, Scene, Texture } from "three"; */
+/*:: import type { Camera, Scene, Texture, Object3D } from "three"; */
 import { TextureLoader, Vector2, WebGLRenderer } from "three";
 
 import { useEffect, useState } from "@lukekaalim/act";
@@ -102,10 +102,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[]*/ = []
 ) => {

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.0",
+  "version": "5.3.0",
   "description": "Render threejs content using act",
   "main": "entry.js",
   "type": "module",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@lukekaalim/act": "^2.2.0",
     "@lukekaalim/act-renderer-core": "^3.1.1",
-    "@lukekaalim/act-reconciler": "^3.0.0",
+    "@lukekaalim/act-reconciler": "^3.0.1",
     "@lukekaalim/act-web": "^1.2.0"
   }
 }

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);
     }
   });