@lukekaalim/act-three 3.10.0 → 5.2.0

package/components/groups.js

@@ -0,0 +1,37 @@
+// @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 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 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();
+  }, [target.x, target.y, target.z, position.x, position.y, position.z, ...deps]);
+
+  return h(group, { ...groupProps, position, ref: groupRef }, children);
+}

package/components/lights.js

@@ -0,0 +1 @@
+// @flow strict

package/components.js

@@ -1,7 +1,8 @@
 // @flow strict
-/*:: import type { Component as ActComponent } from '@lukekaalim/act'; */
+/*:: import type { Component } from '@lukekaalim/act'; */
 /*:: import type {
   Vector3,
+  Vector2,
   Object3D,
   Quaternion,
   BufferGeometry,
@@ -11,13 +12,19 @@
   Group,
   Camera,
   PerspectiveCamera,
-  Euler
+  Euler,
+  Scene,
+  CubeTexture,
+  Fog,
+  WebGLRenderer,
 } from "three"; */
 /*:: import * as Three from 'three'; */
 
 /*::
+export type RefProp<T> = ((reference: T) => mixed) | { current: T | any }
+
 export type Object3DProps<T> = {
-  ref?: ((reference: T) => mixed) | { current: T | any },
+  ref?: RefProp<?T>,
 
   name?: string,
   position?: Vector3,
@@ -26,14 +33,29 @@ export type Object3DProps<T> = {
   visible?: boolean,
   scale?: Vector3,
 };
+
+export type SceneProps = {
+  ...Object3DProps<Scene>,
+  autoUpdate?: ?boolean,
+  background?: ?(Color | Texture | CubeTexture),
+  environment?: ?Texture,
+  fog?: ?Fog,
+  overrideMaterial?: ?Material
+};
+
 export type MeshProps = {
   ...Object3DProps<Three.Mesh>,
   geometry?: BufferGeometry,
   material?: Material,
 };
-export type InstanceMeshProps = {
+export type SpriteProps = {
+  ...Object3DProps<Three.Sprite>,
+  material: Material;
+  center: Vector2;
+};
+export type InstancedMeshProps = {
   ...MeshProps,
-  ...Object3DProps<Three.InstanceMesh>,
+  ...Object3DProps<Three.InstancedMesh>,
 };
 export type PointLightsProps = {
   ...Object3DProps<Three.PointLight>,
@@ -42,22 +64,23 @@ export type PointLightsProps = {
   intensity?: number,
   power?: number,
 };
+export type DirectionalLightProps = {
+  ...Object3DProps<Three.DirectionalLight>,
+  distance?: number,
+  decay?: number,
+  intensity?: number,
+  power?: number,
+};
+export type AmbientLightProps = {
+  ...Object3DProps<Three.AmbientLight>,
+  intensity?: number,
+  power?: number,
+};
 export type PointsProps = {
   ...Object3DProps<Three.Points>,
   geometry?: BufferGeometry,
   material?: Material,
 };
-type Ref<T> = ((reference: T) => mixed) | { current: T | any };
-export type ThreeProps = {
-  ref?: Ref<{ scene: Three.Scene, camera: PerspectiveCamera, renderer: Three.WebGLRenderer }>,
-  width: number,
-  height: number,
-  setStyle?: boolean,
-  background?: Color | null | Texture,
-  alpha?: boolean,
-  camera?: Camera,
-  onRender?: (timestamp: number) => void,
-};
 export type GroupProps = {
   ...Object3DProps<Three.Group>,
   group?: ?Three.Object3D,
@@ -70,15 +93,31 @@ export type PerspectiveCameraProps = {
   fov?: number,
   zoom?: number,
 }
+export type OrthographicCameraProps = {
+  ...Object3DProps<Three.OrthographicCamera>,
+  aspect?: number,
+  near?: number,
+  far?: number,
+  zoom?: number,
+}
 */
 
-export const Component = {
-  mesh: ('mesh'/*: ActComponent<MeshProps>*/),
-  perspectiveCamera: ('perspectiveCamera'/*: ActComponent<PerspectiveCameraProps>*/),
-  instanceMesh: ('instanceMesh'/*: ActComponent<InstanceMeshProps>*/),
-  pointLight: ('pointLight'/*: ActComponent<PointLightsProps>*/),
-  points: ('points'/*: ActComponent<PointsProps>*/),
-  three: ('three'/*: ActComponent<ThreeProps>*/),
-  group: ('group'/*: ActComponent<GroupProps>*/),
-};
-export const C = Component;
+export const scene = ('scene'/*: Component<SceneProps>*/);
+export const group = ('group'/*: Component<GroupProps>*/);
+
+export const perspectiveCamera = ('perspectiveCamera'/*: Component<PerspectiveCameraProps>*/);
+export const orthographicCamera = ('orthographicCamera'/*: Component<OrthographicCameraProps>*/);
+
+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 pointLight = ('pointLight'/*: Component<PointLightsProps>*/);
+export const ambientLight = ('ambientLight'/*: Component<AmbientLightProps>*/);
+export const hemisphereLight = ('hemisphereLight'/*: Component<PointLightsProps>*/);
+export const directionalLight = ('directionalLight'/*: Component<DirectionalLightProps>*/);
+
+
+export * from './components/groups.js';
+export * from './components/lights.js';

package/entry.js

@@ -0,0 +1,7 @@
+// @flow strict
+
+export * from './reconciler.js';
+export * from './renderer.js';
+export * from './objects.js';
+export * from './components.js';
+export * from './hooks.js';

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

@@ -0,0 +1,177 @@
+// @flow strict
+/*:: import type { Ref } from '@lukekaalim/act'; */
+/*:: import type { Camera, Scene, Texture } from "three"; */
+import { TextureLoader, Vector2, WebGLRenderer } from "three";
+
+import { useEffect, useState } from "@lukekaalim/act";
+import { useRef } from "@lukekaalim/act";
+
+
+/*::
+export type WebGLOptions = {
+  antialias?: boolean,
+  alpha?: boolean,
+
+  shadowMap?: {
+    enabled?: boolean,
+    autoUpdate?: boolean,
+    type?: number,
+  }
+};
+*/
+
+export const useWebGLRenderer = (
+  canvasRef/*: Ref<?HTMLCanvasElement>*/,
+  options/*: WebGLOptions*/ = {},
+  deps/*: mixed[]*/ = []
+)/*: ?WebGLRenderer*/ => {
+  const [renderer, setRenderer] = useState/*:: <?WebGLRenderer>*/(null);
+  useEffect(() => {
+    const { current: canvas } = canvasRef; 
+    if (!canvas)
+      return;
+    
+    const renderer = new WebGLRenderer({ ...options, canvas });
+    renderer.shadowMap.enabled = options.shadowMap?.enabled || false;
+    setRenderer(renderer);
+
+    return () => {
+      setRenderer(null);
+      renderer.dispose();
+    }
+  }, deps);
+
+  return renderer;
+};
+
+// 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 = (
+  canvasRef/*: Ref<?HTMLCanvasElement>*/,
+  renderer/*: ?WebGLRenderer*/
+)/*: ?Vector2*/ => {
+  const [size, setSize] = useState(null)
+  useEffect(() => {
+    const { current: canvas } = canvasRef; 
+    if (!canvas || !renderer)
+      return null;
+    
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries.filter(e => e.target === canvas)) {
+        const width = entry.contentBoxSize[0].inlineSize;
+        const height = entry.contentBoxSize[0].blockSize;
+        const size = new Vector2(width, height);
+        setSize(size);
+        renderer.setSize(width, height, false);
+      }
+    });
+    observer.observe(canvas, { box: 'content-box' });
+
+    return () => {
+      observer.unobserve(canvas);
+      setSize(null);
+    }
+  }, [renderer]);
+
+  return size;
+}
+
+export const useAnimationFrame = (
+  onAnimate/*: ?(now: DOMHighResTimeStamp, delta: number) => mixed*/ = null,
+  deps/*: mixed[]*/ = []
+) => {
+  useEffect(() => {
+    if (!onAnimate)
+      return;
+    
+    let lastFrame = performance.now();
+    const animate = (now) => {
+      const delta = now - lastFrame;
+      lastFrame = now;
+
+      onAnimate(now, delta);
+      id = requestAnimationFrame(animate);
+    };
+    let id = requestAnimationFrame(animate);
+
+    return () => {
+      if (id)
+        cancelAnimationFrame(id);
+    }
+  }, deps);
+}
+
+export const useRenderLoop = (
+  renderer/*: ?WebGLRenderer*/,
+  camera/*: Ref<?Camera>*/,
+  scene/*: Ref<?Scene>*/,
+  onAnimate/*: (now: DOMHighResTimeStamp, delta: number) => mixed*/ = (_, __) => {},
+  deps/*: mixed[]*/ = []
+) => {
+  const renderFunction = renderer && ((now, delta) => {
+    onAnimate(now, delta);
+    if (camera.current && scene.current)
+      renderer.render(scene.current, camera.current);
+  });
+
+  useEffect(() => {
+    if (renderFunction)
+      renderFunction(performance.now(), 0);
+  }, [renderer, ...deps])
+
+  useAnimationFrame(renderFunction, [renderer, ...deps])
+}
+
+/*::
+export interface Disposable {
+  dispose(): void;
+}
+*/
+
+export const useDisposable = /*:: <T: Disposable>*/(
+  create/*: () => T*/,
+  deps/*: mixed[]*/ = []
+)/*: T*/ => {
+  const [resource, setResource] = useState/*:: <T>*/(() => create());
+  const disposedRef = useRef(false);
+
+  useEffect(() => {
+    const { current: disposed } = disposedRef
+
+    if (disposed) {
+      setResource(create());
+      disposedRef.current = false;
+    }
+  
+    return () => {
+      resource.dispose();
+      disposedRef.current = true;
+    }
+  }, deps);
+  return resource;
+};
+
+export const useTexture = (url/*: string*/)/*: Texture*/ => {
+  const [texture, setTexture] = useState(null)
+  useEffect(() => {
+    const loader = new TextureLoader();
+
+    const texture = loader.load(url);
+    setTexture(texture);
+
+    console.log(loader);
+    
+    return () => {
+      texture.dispose();
+    }
+  }, []);
+
+  if (!texture)
+    throw { type: 'loading' };
+  
+  return texture;
+};
+
+
+export * from './hooks/matrix.js';

package/objects.js

@@ -0,0 +1,50 @@
+// @flow strict
+/*:: import type { Object3D } from "three"; */
+/*:: import type { PropDiff } from '@lukekaalim/act-reconciler'; */ 
+import {
+  Group,
+  Mesh,
+  PerspectiveCamera,
+  PointLight,
+  Points,
+  Scene,
+  InstancedMesh,
+  OrthographicCamera,
+  DirectionalLight,
+  HemisphereLight,
+  AmbientLight,
+} from "three";
+
+const threeObjectClasses/*: { [string]: Class<Object3D> }*/ = Object.fromEntries(Object.entries({
+  // grouping
+  Scene,
+  Group,
+
+  // lights
+  DirectionalLight,
+  HemisphereLight,
+  PointLight,
+  AmbientLight,
+
+  // camera
+  PerspectiveCamera,
+  OrthographicCamera,
+
+  // lines
+  Points,
+
+  // mesh
+  Mesh,
+  InstancedMesh,
+}).map(([key, value]) => [key.toLowerCase(), (value/*: any*/)]));
+
+export const createObject = (type/*: string*/)/*: null | Object3D*/ => {
+  const objectClass = threeObjectClasses[type.toLowerCase()];
+
+  if (!objectClass) {
+    console.warn(`Unknown object type "${type}"`)
+    return null;
+  }
+
+  return new objectClass(); 
+};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@lukekaalim/act-three",
-  "version": "3.10.0",
+  "version": "5.2.0",
   "description": "Render threejs content using act",
-  "main": "main.js",
+  "main": "entry.js",
   "type": "module",
   "scripts": {
     "test": "cd ../../; npm test;",
@@ -16,7 +16,8 @@
   },
   "dependencies": {
     "@lukekaalim/act": "^2.2.0",
-    "@lukekaalim/act-reconciler": "^2.0.4",
-    "@lukekaalim/act-web": "^0.4.2"
+    "@lukekaalim/act-renderer-core": "^3.1.1",
+    "@lukekaalim/act-reconciler": "^3.0.0",
+    "@lukekaalim/act-web": "^1.2.0"
   }
 }

package/props.js

@@ -0,0 +1,78 @@
+// @flow strict
+/*:: import type { Object3D, WebGLRenderer } from "three"; */
+/*:: import type { Props, PropDiff, CommitDiff } from '@lukekaalim/act-reconciler'; */
+
+import { calculatePropsDiff } from "@lukekaalim/act-reconciler";
+import { setHTMLProp } from "@lukekaalim/act-web";
+import { DirectionalLight, Group, Light, OrthographicCamera } from "three";
+import { setRef } from "@lukekaalim/act-renderer-core";
+
+export const setObjectProp = ({ key, prev, next }/*: PropDiff*/, object/*: Object3D*/)/*: void*/ => {
+  switch (key) {
+    case 'position':
+      return object.position.copy((next/*: any*/));
+    case 'quaternion':
+      return void object.quaternion.copy((next/*: any*/));
+    case 'rotation':
+      return object.rotation.copy((next/*: any*/));
+    case 'scale':
+      return object.scale.copy((next/*: any*/));
+    case 'matrix':
+      return void object.matrix.copy((next/*: any*/));
+    default:
+      (object/*: any*/)[key] = next; break;
+  }
+};
+
+export const setGroupProps = (diff/*: CommitDiff*/, group/*: Group*/) => {
+  const diffs = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
+  for (const [key, diff] of diffs) {
+    switch (key) {
+      case 'group':
+        if (diff.prev && diff.prev !== diff.next)
+          group.remove((diff.prev/*: any*/));
+        if (diff.next)
+          group.add((diff.next/*: any*/));
+        break;
+      default:
+        setObjectProp(diff, group); break;
+    }
+  }
+};
+
+export const setDirectionalLightProps = (diff/*: CommitDiff*/, light/*: DirectionalLight*/) => {
+  const diffs = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
+  for (const [key, diff] of diffs) {
+    switch (key) {
+      case 'shadow': {
+        const diffs = calculatePropsDiff((diff.prev/*: any*/) || {}, (diff.next/*: any*/) || {});
+        for (const [key, diff] of diffs)
+          (light/*: any*/).shadow[key] = diff.next;
+        break;
+      }
+      default:
+        setObjectProp(diff, light); break;
+    }
+  }
+}
+
+export const setObjectProps = (diff/*: CommitDiff*/, object/*: ?Object3D*/)/*: void*/ => {
+  setRef(object, diff);
+  if (diff.next.pruned || !object)
+    return;
+  if (object instanceof Group)
+    return setGroupProps(diff, object);
+  if (object instanceof DirectionalLight)
+    return setDirectionalLightProps(diff, object);
+  if (object instanceof OrthographicCamera) {
+    const diffs = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
+    for (const [key, diff] of diffs)
+      setObjectProp(diff, object);
+    object.updateProjectionMatrix();
+  }
+  else {
+    const diffs = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
+    for (const [key, diff] of diffs)
+      setObjectProp(diff, object);
+  }
+};

package/reconciler.js

@@ -0,0 +1,27 @@
+// @flow strict
+/*:: import type { Element } from '@lukekaalim/act'; */
+/*:: import type { Renderer } from '@lukekaalim/act-renderer-core'; */
+
+import { createTree } from "@lukekaalim/act-reconciler";
+import { createWebRenderer, setNodeChildren } from "@lukekaalim/act-web";
+
+import { createSceneRenderer } from "./renderer";
+
+export const render = (element/*: Element*/, node/*: HTMLElement*/) => {
+
+  const scene = createSceneRenderer();
+  const web = createWebRenderer({
+    'scene': scene,
+  });
+  const onDiff = diff => {
+    const children = web.render(diff);
+    setNodeChildren(diff, node, children)
+  };
+
+  const options = {
+    onDiff,
+    scheduleWork: (c) => requestAnimationFrame(() => void c()),
+    cancelWork: (t) => cancelAnimationFrame(t),
+  };
+  const tree = createTree(element, options);
+};

package/renderer.js

@@ -0,0 +1,32 @@
+// @flow strict
+/*:: import type { Renderer } from '@lukekaalim/act-renderer-core'; */
+/*:: import type { CommitDiff, PropDiff, CommitID } from '@lukekaalim/act-reconciler'; */
+/*:: import type { Object3D } from 'three'; */
+import { createManagedRenderer, createNullRenderer } from '@lukekaalim/act-renderer-core';
+import { createObject } from "./objects";
+import { setObjectProps } from "./props";
+
+export const createObjectRenderer = ()/*: Renderer<Object3D>*/ => {
+  return createManagedRenderer({
+    remove(object) {
+      object.removeFromParent();
+    },
+    update(object, diff, children) {
+      if (typeof diff.next.element.type === 'function')
+        return;
+      setObjectProps(diff, object);
+      if (children.length > 0)
+        object.add(...children.map(c => c.node));
+    },
+    add(diff) {
+      if (typeof diff.next.element.type === 'function')
+        return null;
+      return createObject(diff.next.element.type);
+    }
+  });
+};
+
+export const createSceneRenderer = /*:: <T>*/()/*: Renderer<T>*/ => {
+  const object = createObjectRenderer();
+  return createNullRenderer(object);
+}

package/main.js

@@ -1,25 +0,0 @@
-// @flow strict
-/*:: import type { Element } from '@lukekaalim/act'; */
-/*:: import type { ThreeRenderer } from "./render.js"; */
-
-import { createTree } from "@lukekaalim/act-reconciler";
-import { createWebRenderService } from "@lukekaalim/act-web";
-import { attachNodes } from "@lukekaalim/act-web/node.js";
-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 onDiff = diff => attachNodes(node, web.render(diff));
-
-  const options = {
-    onDiff,
-    scheduleWork: (c) => requestAnimationFrame(() => void c()),
-  };
-  const tree = createTree(element, options);
-};
-
-export * from './render.js';
-export * from './node.js';
-export * from './components.js';

package/node.js

@@ -1,88 +0,0 @@
-// @flow strict
-/*:: import type { Object3D } from "three"; */
-/*:: import type { PropDiff } from '@lukekaalim/act-reconciler'; */ 
-import { Group, Mesh, PerspectiveCamera, PointLight, Points } from "three";
-
-/*::
-export type NodeInstance = {
-  object: Object3D,
-  update: (props: PropDiff[]) => void,
-  dispose: () => void,
-};
-
-export type NodeDefinition = {
-  type: string,
-  create: () => NodeInstance,
-};
-*/
-
-const updateObjectProps = (object, props) => {
-  for (const { key, next } of props)
-    switch (key) {
-      case 'position':
-        object.position.copy((next/*: any*/)); break;
-      case 'quaternion':
-        object.quaternion.copy((next/*: any*/)); break;
-      case 'rotation':
-        object.rotation.copy((next/*: any*/)); break;
-      case 'scale':
-        object.scale.copy((next/*: any*/)); break;
-      default:
-        (object/*: any*/)[key] = next; break;
-    }
-}
-
-const createNodeDefinitionFromConstructor = ([type, constructor])/*: NodeDefinition*/ => {
-  const create = () => {
-    const object = constructor();
-    const update = (props) => {
-      updateObjectProps(object, props);
-    };
-    const dispose = () => {
-      return;
-    };
-    const instance = {
-      object,
-      update,
-      dispose,
-    };
-    return instance;
-  };
-  return {
-    type,
-    create,
-  }
-};
-
-const groupDefinition = {
-  type: 'group',
-  create: () => {
-    const object = new Group();
-    const update = (props) => {
-      updateObjectProps(object, props.filter(p => p.key !== 'group'));
-      for (const { key, next, prev } of props)
-        switch (key) {
-          case 'group':
-            prev && object.remove((prev/*: any*/));
-            next && object.add((next/*: any*/));
-        }
-    };
-    const dispose = () => {
-
-    };
-    return { object, update, dispose };
-  },
-}
-
-const constructorNodes/*: NodeDefinition[]*/ = [
-  ['mesh', () => new Mesh()],
-  ['pointLight', () => new PointLight()],
-  ['points', () => new Points()],
-  ['perspectiveCamera', () => new PerspectiveCamera()],
-].map(createNodeDefinitionFromConstructor);
-
-
-export const threeNodes/*: NodeDefinition[]*/ = [
-  ...constructorNodes,
-  groupDefinition,
-];

package/render.js

@@ -1,163 +0,0 @@
-// @flow strict
-/*:: 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';
-import { threeNodes } from './node.js';
-import { calculatePropsDiff } from '@lukekaalim/act-reconciler'
-
-/*::
-export type ThreeRenderer = {
-  renderRoot: CommitDiff => Node[],
-};
-
-export type Frame = {
-  id: ?AnimationFrameID
-}
-*/
-
-export const createThreeRenderer = (nodeDefs/*: NodeDefinition[]*/ = threeNodes)/*: ThreeRenderer*/ => {
-  const nodeDefsByType = new Map(nodeDefs.map(def => [def.type, def]));
-
-  const roots = new Map/*:: <CommitID, [WebGLRenderer, Scene, PerspectiveCamera, Frame]>*/();
-  const objects = new Map();
-
-  const createRoot = (diff) => {
-    const { width, height, setStyle = false, background = null, alpha = false, onRender, sceneRef } = (diff.next.element.props/*: any*/);
-    
-    const renderer = new WebGLRenderer({ alpha });
-    renderer.setSize(width, height, setStyle);
-    const scene = new Scene();
-    scene.background = background;
-    const camera = new PerspectiveCamera( 75, width / height, 0.1, 1000 );
-    camera.position.z = 5;
-
-    const frame/*: Frame*/ = { id: null };
-
-    const animate = (timestamp) => {
-      onRender && onRender(timestamp);
-      renderer.render( scene, camera );
-      frame.id = requestAnimationFrame( animate );
-    };
-    frame.id = animate(performance.now());
-
-    roots.set(diff.next.id, [renderer, scene, camera, frame]);
-    return [renderer, scene, camera, frame];
-  };
-  const setRootProps = (diff, [renderer, scene, camera, frame]) => {
-    const props = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
-    const { width, height, setStyle = false, background = null, onRender } = (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;
-    if (props.has('onRender')) {
-      frame.id && cancelAnimationFrame(frame.id);
-      const animate = (timestamp) => {
-        onRender && onRender(timestamp);
-        renderer.render( scene, camera );
-        frame.id = requestAnimationFrame( animate );
-      };
-      frame.id = animate(performance.now());
-    }
-  }
-
-  const removeRenderer = (diff, [renderer, scene, camera, frame]) => {
-    roots.delete(diff.next.id);
-    renderer.dispose();
-    frame.id && cancelAnimationFrame(frame.id);
-
-    const { parentNode } = renderer.domElement;
-    if (parentNode)
-      parentNode.removeChild(renderer.domElement);
-    return [];
-  };
-
-  const createObject = (diff) => {
-    const { type } = diff.next.element;
-    if (typeof type !== 'string')
-      return null;
-    if (type === 'act:null')
-      return null;
-
-    const nodeDef = nodeDefsByType.get(type);
-    if (!nodeDef)
-      throw new Error(`Unknown type ${type}`);
-
-    const nodeInstance = nodeDef.create();
-    objects.set(diff.next.id, nodeInstance);
-
-    return nodeInstance;
-  }
-
-  const removeObject = (nodeInstance) => {
-    nodeInstance.object.removeFromParent();
-    nodeInstance.dispose();
-  };
-
-  const setRef = (diff, reference) => {
-    if (diff.prev.pruned) {
-      const { ref } = (diff.next.element.props/*: any*/);
-      if (typeof ref === 'object')
-        ref.current = reference;
-      else if (typeof ref === 'function')
-       ref(reference);
-    } else if (diff.next.pruned) {
-      const { ref } = (diff.next.element.props/*: any*/);
-      if (typeof ref === 'object')
-        ref.current = null;
-      else if (typeof ref === 'function')
-       ref(null);
-    }
-  };
-
-  const renderObject = (diff/*: CommitDiff*/)/*: Object3D[]*/ => {
-    const nodeInstance = objects.get(diff.next.id) || createObject(diff);
-
-    setRef(diff, nodeInstance && nodeInstance.object)
-    const children = diff.diffs.map(renderObject).flat(1);
-
-    if (!nodeInstance)
-      return children;
-    
-    if (diff.next.pruned)
-      return (removeObject(nodeInstance), []);
-
-    const props = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
-    nodeInstance.update([...props.values()]);
-    attachObjects(nodeInstance.object, children);
-    
-    return [nodeInstance.object];
-  };
-  const attachObjects = (scene, children) => {
-    if (children.length > 0)
-      scene.add(...children);
-  };
-
-  const renderRoot = (diff/*: CommitDiff*/)/*: Node[]*/ => {
-    if (diff.next.element.type !== 'three')
-      return [];
-
-    const root = roots.get(diff.next.id) || createRoot(diff);
-
-    const children = diff.diffs.map(renderObject).flat(1);
-
-    if (diff.next.pruned)
-      return removeRenderer(diff, root);
-    
-    const [renderer, scene, camera] = root;
-    setRootProps(diff, root);
-    attachObjects(scene, children);
-    setRef(diff, { renderer, scene, camera });
-
-    return [renderer.domElement];
-  }
-
-  return {
-    renderRoot,
-  }
-};