feat: add support for <Entity from={Constructor} args={ConstructorParameters} />

Entity now supports both Three.js constructors and instances:
- <Entity from={THREE.Mesh} args={[geometry, material]} />
- <Entity from={new THREE.Mesh(geometry, material)} />

Author: bigmistqke

playground/App.tsx

@@ -2,7 +2,8 @@ import { A, Route, Router } from "@solidjs/router"
 import type { ParentProps } from "solid-js"
 import * as THREE from "three"
 import { Canvas, createT } from "../src/index.ts"
-import { SimpleSolar } from "./examples/SimpleSolar.tsx"
+import { SimplePortal } from "./examples/SimplePortal.tsx"
+import { SimpleSolarExample } from "./examples/SimpleSolar.tsx"
 import "./index.css"
 
 const T = createT(THREE)
@@ -43,6 +44,17 @@ function Layout(props: ParentProps) {
         >
           Simple Solar
         </A>
+        <A
+          href="/portal"
+          style={{
+            color: "white",
+            "text-decoration": "none",
+            padding: "5px 10px",
+            display: "block",
+          }}
+        >
+          Portal
+        </A>
       </nav>
       {props.children}
     </>
@@ -52,7 +64,8 @@ function Layout(props: ParentProps) {
 export function App() {
   return (
     <Router root={Layout}>
-      <Route path="/simple-solar" component={SimpleSolar} />
+      <Route path="/simple-solar" component={SimpleSolarExample} />
+      <Route path="/portal" component={SimplePortal} />
       <Route
         path="/"
         component={() => (

playground/examples/SimplePortal.tsx

@@ -0,0 +1,26 @@
+import * as THREE from "three"
+import { Canvas, createT, Entity, Portal } from "../../src/index.ts"
+
+const T = createT(THREE)
+
+export function SimplePortal() {
+  const group = new THREE.Group()
+  return (
+    <Canvas
+      style={{ width: "100vw", height: "100vh" }}
+      camera={{ position: new THREE.Vector3(0, 0, 30) }}
+      onClick={event => console.debug("canvas clicked", event)}
+      onClickMissed={event => console.debug("canvas click missed", event)}
+      onPointerLeave={event => console.debug("canvas pointer leave", event)}
+      onPointerEnter={event => console.debug("canvas pointer enter", event)}
+    >
+      <Entity from={group} position={[0, 5, 0]} />
+      <Portal element={group}>
+        <T.Mesh>
+          <T.SphereGeometry args={[2, 32, 32]} />
+          <T.MeshBasicMaterial color="red" />
+        </T.Mesh>
+      </Portal>
+    </Canvas>
+  )
+}

playground/examples/SimpleSolar.tsx

@@ -116,7 +116,7 @@ function CelestialBody(
   )
 }
 
-export function SimpleSolar() {
+export function SimpleSolarExample() {
   return (
     <Canvas
       style={{ width: "100vw", height: "100vh" }}

src/augment.ts

@@ -1,12 +1,16 @@
 import { type JSX, type ParentProps, createMemo, createRenderEffect, mergeProps } from "solid-js"
 import { Object3D } from "three"
-import { augment } from "./augment.ts"
 import { threeContext, useThree } from "./hooks.ts"
 import { manageSceneGraph, useProps } from "./props.ts"
-import type { Instance, Props, ThreeInstance } from "./types.ts"
+import type { Instance, Props } from "./types.ts"
 import { type InstanceFromConstructor } from "./types.ts"
-import { isInstance } from "./utils/is-instance.ts"
-import { withContext } from "./utils/with-context.ts"
+import { augment, autodispose, isConstructor, isInstance, withContext } from "./utils.ts"
+
+/**********************************************************************************/
+/*                                                                                */
+/*                                     Portal                                     */
+/*                                                                                */
+/**********************************************************************************/
 
 type PortalProps = ParentProps<{
   element?: InstanceFromConstructor<Object3D> | Instance<Object3D>
@@ -48,10 +52,14 @@ export const Portal = (props: PortalProps) => {
   return null
 }
 
-type EntityProps<T> = Omit<Props<T>, "object" | "children" | "ref" | "args"> & {
+/**********************************************************************************/
+/*                                                                                */
+/*                                     Entity                                     */
+/*                                                                                */
+/**********************************************************************************/
+
+type EntityProps<T extends object | (new (...args: any[]) => any)> = Omit<Props<T>, "from"> & {
   from: T
-  children?: JSX.Element
-  ref?: T | ((value: T) => void)
 }
 /**
  * Wraps a `ThreeElement` and allows it to be used as a JSX-component within a `solid-three` scene.
@@ -62,8 +70,13 @@ type EntityProps<T> = Omit<Props<T>, "object" | "children" | "ref" | "args"> & {
  *                                    optional children, and a ref that provides access to the object instance.
  * @returns The Three.js object wrapped as a JSX element, allowing it to be used within Solid's component system.
  */
-export function Entity<T extends ThreeInstance>(props: EntityProps<T>) {
-  const memo = createMemo(() => augment(props.from, { props }) as Instance<T>)
+export function Entity<T extends object | (new (...args: any[]) => object)>(props: EntityProps<T>) {
+  const memo = createMemo(() => {
+    return augment(
+      isConstructor(props.from) ? autodispose(new props.from(...(props.args ?? []))) : props.from,
+      { props },
+    ) as Instance<T>
+  })
   useProps(memo, props)
   return memo as unknown as JSX.Element
 }

src/components.tsx

@@ -2,7 +2,7 @@ import { Object3D, type Intersection } from "three"
 import type { CanvasProps } from "./canvas.tsx"
 import { $S3C } from "./constants.ts"
 import type { Context, EventName, Instance, ThreeEvent } from "./types.ts"
-import { isInstance } from "./utils/is-instance.ts"
+import { isInstance } from "./utils.ts"
 
 const eventNameMap = {
   onClick: "click",

src/create-events.ts

@@ -1,7 +1,7 @@
 import { createMemo, type JSX, mergeProps } from "solid-js"
-import { augment } from "./augment.ts"
 import { useProps } from "./props.ts"
 import type { Component } from "./types.ts"
+import { augment } from "./utils.ts"
 
 /**********************************************************************************/
 /*                                                                                */

src/create-t.tsx

@@ -23,18 +23,15 @@ import {
   Vector2,
   WebGLRenderer,
 } from "three"
-import { augment } from "./augment.ts"
 import type { CanvasProps } from "./canvas.tsx"
 import { createEvents } from "./create-events.ts"
 import { AugmentedStack } from "./data-structure/augmented-stack.ts"
 import { frameContext, threeContext } from "./hooks.ts"
 import { canvasPropsContext, eventContext } from "./internal-context.ts"
 import { manageSceneGraph, useProps } from "./props.ts"
 import type { CameraType, Context } from "./types.ts"
-import { defaultProps } from "./utils/default-props.ts"
-import { removeElementFromArray } from "./utils/remove-element-from-array.ts"
+import { augment, defaultProps, removeElementFromArray, withMultiContexts } from "./utils.ts"
 import { useMeasure } from "./utils/use-measure.ts"
-import { withMultiContexts } from "./utils/with-context.ts"
 
 /**
  * Creates and manages a `solid-three` scene. It initializes necessary objects like
@@ -109,7 +106,7 @@ export function createThree(canvas: HTMLCanvasElement, props: CanvasProps) {
     }
     pendingRenderRequest = undefined
     context.gl.render(context.scene, context.camera)
-    frameListeners.forEach(listener => listener(context, timestamp, frame))
+    frameListeners.forEach(listener => listener(context, context.clock.getDelta(), frame))
   }
   function requestRender() {
     if (pendingRenderRequest) return
@@ -132,9 +129,12 @@ export function createThree(canvas: HTMLCanvasElement, props: CanvasProps) {
   const measure = useMeasure()
   measure.setElement(canvas)
 
+  const clock = new Clock()
+  clock.start()
+
   const context: Context = {
     canvas,
-    clock: new Clock(),
+    clock,
     get bounds() {
       return measure.bounds()
     },

src/create-three.tsx

@@ -1,6 +1,6 @@
 import type { Accessor } from "solid-js"
 import type { Instance } from "src/types.ts"
-import { augment } from "../augment.ts"
+import { augment } from "../utils.ts"
 import { Stack } from "./stack.ts"
 
 /** A generic stack data structure. It augments each value before pushing it onto the stack. */

src/data-structure/augmented-stack.ts

@@ -5,4 +5,4 @@ export { createT, createTComponent } from "./create-t.tsx"
 export { useFrame, useLoader, useThree } from "./hooks.ts"
 export { applyProps, useProps } from "./props.ts"
 export * as S3 from "./types.ts"
-export { buildGraph } from "./utils/build-graph.ts"
+export { autodispose, buildGraph } from "./utils.ts"