cleanup: cleanup EventPlugin, remove Canvas-export

Author: bigmistqke

playground/App.tsx

@@ -1,14 +1,14 @@
 import { A, Route, Router } from "@solidjs/router"
 import type { ParentProps } from "solid-js"
 import * as THREE from "three"
-import { Canvas, createT, Entity } from "../src/index.ts"
+import { createT, Entity } from "../src/index.ts"
 import { EnvironmentExample } from "./examples/EnvironmentExample.tsx"
 import { PluginExample } from "./examples/PluginExample.tsx"
 import { PortalExample } from "./examples/PortalExample.tsx"
 import { SolarExample } from "./examples/SolarExample.tsx"
 import "./index.css"
 
-const { T } = createT({ ...THREE, Entity })
+const { T, Canvas } = createT({ ...THREE, Entity })
 
 function Layout(props: ParentProps) {
   return (

src/canvas.tsx renamed to src/create-canvas.tsx

@@ -10,12 +10,12 @@ import {
 } from "three"
 import { createThree } from "./create-three.tsx"
 import type { EventRaycaster } from "./raycasters.tsx"
-import type { CanvasEventHandlers, Context, Plugin, Props } from "./types.ts"
+import type { Context, Plugin, PluginPropsOf, Props } from "./types.ts"
 
 /**
  * Props for the Canvas component, which initializes the Three.js rendering context and acts as the root for your 3D scene.
  */
-export interface CanvasProps extends ParentProps<Partial<CanvasEventHandlers>> {
+export interface CanvasProps extends ParentProps {
   ref?: Ref<Context>
   class?: string
   /** Configuration for the camera used in the scene. */
@@ -55,64 +55,8 @@ export interface CanvasProps extends ParentProps<Partial<CanvasEventHandlers>> {
  * @param props - Configuration options include camera settings, style, and children elements.
  * @returns A div element containing the WebGL canvas configured to occupy the full available space.
  */
-export function Canvas(props: ParentProps<CanvasProps>) {
-  let canvas: HTMLCanvasElement = null!
-  let container: HTMLDivElement = null!
-
-  onMount(() => {
-    const context = createThree(canvas, props)
-
-    // Resize observer for the canvas to adjust camera and renderer on size change
-    createResizeObserver(container, function onResize() {
-      const { width, height } = container.getBoundingClientRect()
-      context.gl.setSize(width, height)
-      context.gl.setPixelRatio(globalThis.devicePixelRatio)
-
-      if (context.currentCamera instanceof OrthographicCamera) {
-        context.currentCamera.left = width / -2
-        context.currentCamera.right = width / 2
-        context.currentCamera.top = height / 2
-        context.currentCamera.bottom = height / -2
-      } else {
-        context.currentCamera.aspect = width / height
-      }
-
-      context.currentCamera.updateProjectionMatrix()
-      context.render(performance.now())
-    })
-  })
-
-  return (
-    <div
-      ref={container!}
-      style={{
-        position: "relative",
-        width: "100%",
-        height: "100%",
-        overflow: "hidden",
-        contain: "strict",
-        display: "flex",
-        ...props.style,
-      }}
-      class={props.class}
-    >
-      <canvas ref={canvas!} />
-    </div>
-  )
-}
-
-/**
- * Serves as the root component for all 3D scenes created with `solid-three`. It initializes
- * the Three.js rendering context, including a WebGL renderer, a scene, and a camera.
- * All `<T/>`-components must be children of this Canvas. Hooks such as `useThree` and
- * `useFrame` should only be used within this component to ensure proper context.
- *
- * @function Canvas
- * @param props - Configuration options include camera settings, style, and children elements.
- * @returns A div element containing the WebGL canvas configured to occupy the full available space.
- */
-export function createCanvas<TPlugins extends Plugin[] = $3.Plugins>(plugins: TPlugins) {
-  return function (props: ParentProps<CanvasProps>) {
+export function createCanvas<TPlugins extends Plugin[] = Plugin[]>(plugins: TPlugins) {
+  return function (props: ParentProps<CanvasProps> & Partial<PluginPropsOf<Scene, TPlugins>>) {
     let canvas: HTMLCanvasElement = null!
     let container: HTMLDivElement = null!
 

src/create-t.tsx

@@ -1,6 +1,6 @@
 import { createMemo, type Component, type JSX, type JSXElement, type MergeProps } from "solid-js"
-import { createCanvas } from "./canvas.tsx"
 import { $S3C } from "./constants.ts"
+import { createCanvas } from "./create-canvas.tsx"
 import { useProps } from "./props.ts"
 import type { Plugin, Props } from "./types.ts"
 import { meta } from "./utils.ts"

src/create-three.tsx

@@ -1,6 +1,5 @@
 import { ReactiveMap } from "@solid-primitives/map"
 import {
-  children,
   createEffect,
   createMemo,
   createRenderEffect,
@@ -24,8 +23,7 @@ import {
   VSMShadowMap,
   WebGLRenderer,
 } from "three"
-import type { CanvasProps } from "./canvas.tsx"
-import { Stack } from "./data-structure/stack.ts"
+import type { CanvasProps } from "./create-canvas.tsx"
 import { frameContext, threeContext } from "./hooks.ts"
 import { pluginContext } from "./internal-context.ts"
 import { useProps, useSceneGraph } from "./props.ts"
@@ -38,14 +36,16 @@ import {
   meta,
   removeElementFromArray,
   useRef,
+  withContext,
   withMultiContexts,
 } from "./utils.ts"
+import { Stack } from "./utils/stack.ts"
 import { useMeasure } from "./utils/use-measure.ts"
 
 /**
  * Creates and manages a `solid-three` scene. It initializes necessary objects like
- * camera, renderer, raycaster, and scene, manages the scene graph, setups up an event system
- * and rendering loop based on the provided properties.
+ * camera, renderer, raycaster, and scene, manages the scene graph, setups up a rendering loop
+ * based on the provided properties.
  */
 export function createThree(canvas: HTMLCanvasElement, props: CanvasProps, plugins: Plugin[]) {
   const canvasProps = defaultProps(props, { frameloop: "always" })
@@ -206,22 +206,24 @@ export function createThree(canvas: HTMLCanvasElement, props: CanvasProps, plugi
 
   const raycasterStack = new Stack<Raycaster>("raycaster")
 
+  const glProp = createMemo(() => props.gl)
   const gl = createMemo(() => {
-    const gl =
-      props.gl instanceof WebGLRenderer
-        ? // props.gl can be a WebGLRenderer provided by the user
-          props.gl
-        : typeof props.gl === "function"
+    const _glProp = glProp()
+    return meta(
+      _glProp instanceof WebGLRenderer
+        ? // _glProp can be a WebGLRenderer provided by the user
+          _glProp
+        : typeof _glProp === "function"
         ? // or a callback that returns a Renderer
-          props.gl(canvas)
-        : // if props.gl is not defined we default to a WebGLRenderer
-          new WebGLRenderer({ canvas })
-
-    return meta(gl, {
-      get props() {
-        return props.gl || {}
+          _glProp(canvas)
+        : // if _glProp is not defined we default to a WebGLRenderer
+          new WebGLRenderer({ canvas }),
+      {
+        get props() {
+          return glProp() || {}
+        },
       },
-    })
+    )
   })
 
   const measure = useMeasure()
@@ -297,92 +299,98 @@ export function createThree(canvas: HTMLCanvasElement, props: CanvasProps, plugi
   /*                                                                                */
   /**********************************************************************************/
 
-  withMultiContexts(() => {
-    createRenderEffect(() => {
-      if (props.frameloop === "never") {
-        context.clock.stop()
-        context.clock.elapsedTime = 0
-      } else {
-        context.clock.start()
-      }
-    })
+  withContext(
+    () => {
+      createRenderEffect(() => {
+        if (props.frameloop === "never") {
+          context.clock.stop()
+          context.clock.elapsedTime = 0
+        } else {
+          context.clock.start()
+        }
+      })
 
-    // Manage camera
-    createRenderEffect(() => {
-      if (cameraStack.peek()) return
-      if (!props.defaultCamera || props.defaultCamera instanceof Camera) return
-      useProps(defaultCamera, props.defaultCamera)
-      // NOTE:  Manually update camera's matrix with updateMatrixWorld is needed.
-      //        Otherwise casting a ray immediately after start-up will cause the incorrect matrix to be used.
-      defaultCamera().updateMatrixWorld(true)
-    })
+      // Manage camera
+      createRenderEffect(() => {
+        if (cameraStack.peek()) return
+        if (!props.defaultCamera || props.defaultCamera instanceof Camera) return
+        useProps(defaultCamera, props.defaultCamera)
+        // NOTE:  Manually update camera's matrix with updateMatrixWorld is needed.
+        //        Otherwise casting a ray immediately after start-up will cause the incorrect matrix to be used.
+        defaultCamera().updateMatrixWorld(true)
+      })
 
-    // Manage scene
-    createRenderEffect(() => {
-      if (!props.scene || props.scene instanceof Scene) return
-      useProps(scene, props.scene)
-    })
+      // Manage scene
+      createRenderEffect(() => {
+        if (!props.scene || props.scene instanceof Scene) return
+        useProps(scene, props.scene)
+      })
 
-    // Manage raycaster
-    createRenderEffect(() => {
-      if (!props.defaultRaycaster || props.defaultRaycaster instanceof Raycaster) return
-      useProps(defaultRaycaster, props.defaultRaycaster)
-    })
+      // Manage raycaster
+      createRenderEffect(() => {
+        if (!props.defaultRaycaster || props.defaultRaycaster instanceof Raycaster) return
+        useProps(defaultRaycaster, props.defaultRaycaster)
+      })
 
-    // Manage gl
-    createRenderEffect(() => {
-      // Set shadow-map
+      // Manage gl
       createRenderEffect(() => {
-        const _gl = gl()
-        if (_gl.shadowMap) {
-          const oldEnabled = _gl.shadowMap.enabled
-          const oldType = _gl.shadowMap.type
-          _gl.shadowMap.enabled = !!props.shadows
-
-          if (typeof props.shadows === "boolean") {
-            _gl.shadowMap.type = PCFSoftShadowMap
-          } else if (typeof props.shadows === "string") {
-            const types = {
-              basic: BasicShadowMap,
-              percentage: PCFShadowMap,
-              soft: PCFSoftShadowMap,
-              variance: VSMShadowMap,
+        // Set shadow-map
+        createRenderEffect(() => {
+          const _gl = gl()
+
+          if (_gl.shadowMap) {
+            const oldEnabled = _gl.shadowMap.enabled
+            const oldType = _gl.shadowMap.type
+            _gl.shadowMap.enabled = !!props.shadows
+
+            if (typeof props.shadows === "boolean") {
+              _gl.shadowMap.type = PCFSoftShadowMap
+            } else if (typeof props.shadows === "string") {
+              const types = {
+                basic: BasicShadowMap,
+                percentage: PCFShadowMap,
+                soft: PCFSoftShadowMap,
+                variance: VSMShadowMap,
+              }
+              _gl.shadowMap.type = types[props.shadows] ?? PCFSoftShadowMap
+            } else if (typeof props.shadows === "object") {
+              Object.assign(_gl.shadowMap, props.shadows)
             }
-            _gl.shadowMap.type = types[props.shadows] ?? PCFSoftShadowMap
-          } else if (typeof props.shadows === "object") {
-            Object.assign(_gl.shadowMap, props.shadows)
+
+            if (oldEnabled !== _gl.shadowMap.enabled || oldType !== _gl.shadowMap.type)
+              _gl.shadowMap.needsUpdate = true
           }
+        })
 
-          if (oldEnabled !== _gl.shadowMap.enabled || oldType !== _gl.shadowMap.type)
-            _gl.shadowMap.needsUpdate = true
-        }
-      })
+        createEffect(() => {
+          const renderer = gl()
+          // Connect to xr if property exists
+          if (renderer.xr) context.xr.connect()
+        })
 
-      createEffect(() => {
-        const renderer = gl()
-        // Connect to xr if property exists
-        if (renderer.xr) context.xr.connect()
-      })
+        // Set color space and tonemapping preferences
+        const LinearEncoding = 3000
+        const sRGBEncoding = 3001
+        // Color management and tone-mapping
+        useProps(gl, {
+          get outputEncoding() {
+            return props.linear ? LinearEncoding : sRGBEncoding
+          },
+          get toneMapping() {
+            return props.flat ? NoToneMapping : ACESFilmicToneMapping
+          },
+        })
 
-      // Set color space and tonemapping preferences
-      const LinearEncoding = 3000
-      const sRGBEncoding = 3001
-      // Color management and tone-mapping
-      useProps(gl, {
-        get outputEncoding() {
-          return props.linear ? LinearEncoding : sRGBEncoding
-        },
-        get toneMapping() {
-          return props.flat ? NoToneMapping : ACESFilmicToneMapping
-        },
+        // Manage props
+        const _glProp = glProp()
+        if (_glProp && !(_glProp instanceof WebGLRenderer)) {
+          useProps(gl, _glProp)
+        }
       })
-
-      // Manage props
-      if (props.gl && !(props.gl instanceof WebGLRenderer)) {
-        useProps(gl, props.gl)
-      }
-    })
-  }, [[threeContext, context]])
+    },
+    threeContext,
+    context,
+  )
 
   /**********************************************************************************/
   /*                                                                                */
@@ -408,20 +416,16 @@ export function createThree(canvas: HTMLCanvasElement, props: CanvasProps, plugi
   /*                                                                                */
   /**********************************************************************************/
 
-  const c = children(() => (
-    <pluginContext.Provider value={plugins}>
-      <frameContext.Provider value={addFrameListener}>
-        <threeContext.Provider value={context}>{canvasProps.children}</threeContext.Provider>
-      </frameContext.Provider>
-    </pluginContext.Provider>
-  ))
-
   useSceneGraph(
     context.scene,
     mergeProps(props, {
-      get children() {
-        return c()
-      },
+      children: (
+        <pluginContext.Provider value={plugins}>
+          <frameContext.Provider value={addFrameListener}>
+            <threeContext.Provider value={context}>{canvasProps.children}</threeContext.Provider>
+          </frameContext.Provider>
+        </pluginContext.Provider>
+      ),
     }),
   )