@lukekaalim/act-three 5.2.2 → 5.4.1

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, Object3D } from "three"; */
+/*:: import type {
+  Camera,
+  Scene,
+  Texture,
+  Object3D,
+  PerspectiveCamera,
+  OrthographicCamera,
+} from "three"; */
 import { TextureLoader, Vector2, WebGLRenderer } from "three";
 
 import { useEffect, useState } from "@lukekaalim/act";
@@ -49,11 +56,13 @@ export const useWebGLRenderer = (
 // like: width: 100%
 export const useResizingRenderer = (
   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' });
@@ -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.2",
+  "version": "5.4.1",
   "description": "Render threejs content using act",
   "main": "entry.js",
   "type": "module",