@lukekaalim/act-three 3.1.0 → 3.3.0

package/components.js

@@ -6,6 +6,7 @@
   Quaternion,
   BufferGeometry,
   Material,
+  Texture,
 } from "three"; */
 /*:: import * as Three from 'three'; */
 
@@ -44,6 +45,8 @@ export type ThreeProps = {
   width: number,
   height: number,
   setStyle?: boolean,
+  background?: string | null | Texture,
+  alpha?: boolean,
 };
 */
 

package/main.js

@@ -9,7 +9,7 @@ import { createThreeRenderer } from "./render.js";
 
 export const render = (element/*: Element*/, node/*: HTMLElement*/, renderer/*: ThreeRenderer*/ = createThreeRenderer()) => {
   const { renderRoot } = renderer;
-  const web = createWebRenderService(new Map([['Three', { render: renderRoot }]]));
+  const web = createWebRenderService(new Map([['three', { render: renderRoot }]]));
 
   const onDiff = diff => attachNodes(node, web.render(diff));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukekaalim/act-three",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "Render threejs content using act",
   "main": "main.js",
   "type": "module",
@@ -11,10 +11,12 @@
   },
   "author": "Luke Kaalim",
   "license": "ISC",
+  "peerDependencies": {
+    "three": "^0.130.0"
+  },
   "dependencies": {
     "@lukekaalim/act": "^2.2.0",
     "@lukekaalim/act-reconciler": "^2.0.1",
-    "@lukekaalim/act-web": "^0.4.0",
-    "three": "^0.130.0"
+    "@lukekaalim/act-web": "^0.4.0"
   }
 }

package/render.js

@@ -1,5 +1,5 @@
 // @flow strict
-/*:: import type { CommitDiff, PropDiff } from '@lukekaalim/act-reconciler'; */
+/*:: import type { CommitDiff, PropDiff, CommitID } from '@lukekaalim/act-reconciler'; */
 /*:: import type { Object3D } from 'three'; */
 /*:: import type { NodeDefinition } from './node.js'; */
 import {  PerspectiveCamera, Scene, WebGLRenderer } from 'three';
@@ -15,16 +15,17 @@ export type ThreeRenderer = {
 export const createThreeRenderer = (nodeDefs/*: NodeDefinition[]*/ = threeNodes)/*: ThreeRenderer*/ => {
   const nodeDefsByType = new Map(nodeDefs.map(def => [def.type, def]));
 
-  const roots = new Map();
+  const roots = new Map/*:: <CommitID, [WebGLRenderer, Scene, PerspectiveCamera]>*/();
   const objects = new Map();
 
   const createRoot = (diff) => {
-    const renderer = new WebGLRenderer();
-    const { width, height, setStyle = false } = (diff.next.element.props/*: any*/);
+    const { width, height, setStyle = false, background = null, alpha = false } = (diff.next.element.props/*: any*/);
     
+    const renderer = new WebGLRenderer({ alpha });
     renderer.setSize(width, height, setStyle);
     const scene = new Scene();
-    const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+    scene.background = background;
+    const camera = new PerspectiveCamera( 75, width / height, 0.1, 1000 );
     camera.position.z = 5;
 
     const animate = () => {
@@ -36,6 +37,18 @@ export const createThreeRenderer = (nodeDefs/*: NodeDefinition[]*/ = threeNodes)
     roots.set(diff.next.id, [renderer, scene, camera]);
     return [renderer, scene, camera];
   };
+  const setRootProps = (diff, [renderer, scene, camera]) => {
+    const props = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
+    const { width, height, setStyle = false, background = null, alpha = false } = (diff.next.element.props/*: any*/);
+
+    if (props.has('width') || props.has('height') || props.has('setStyle')) {
+      renderer.setSize(width, height, setStyle);
+      camera.aspect = width / height;
+      camera.updateProjectionMatrix();
+    }
+    if (props.has('background'))
+      scene.background = background;
+  }
 
   const removeRenderer = (diff, [renderer, scene, camera]) => {
     roots.delete(diff.next.id);
@@ -91,7 +104,7 @@ export const createThreeRenderer = (nodeDefs/*: NodeDefinition[]*/ = threeNodes)
   };
 
   const renderRoot = (diff/*: CommitDiff*/)/*: Node[]*/ => {
-    if (diff.next.element.type !== 'Three')
+    if (diff.next.element.type !== 'three')
       return [];
 
     const root = roots.get(diff.next.id) || createRoot(diff);
@@ -102,6 +115,7 @@ export const createThreeRenderer = (nodeDefs/*: NodeDefinition[]*/ = threeNodes)
       return removeRenderer(diff, root);
     
     const [renderer, scene] = root;
+    setRootProps(diff, root);
     attachObjects(scene, children);
 
     return [renderer.domElement];