docs: update demo

Author: bigmistqke

playground/App.tsx

@@ -1,8 +1,8 @@
 import { A, Route, Router } from "@solidjs/router"
 import type { ParentProps } from "solid-js"
 import * as THREE from "three"
-import { extend, T } from "../src/index.ts"
-import { Basic } from "./examples/Basic.tsx"
+import { Canvas, extend, T } from "../src/index.ts"
+import { SimpleSolar } from "./examples/SimpleSolar.tsx"
 import "./index.css"
 
 extend(THREE)
@@ -22,26 +22,26 @@ function Layout(props: ParentProps) {
         }}
       >
         <A
-          href="/basic"
+          href="/"
           style={{
             color: "white",
             "text-decoration": "none",
             padding: "5px 10px",
             display: "block",
           }}
         >
-          Basic Example
+          Home
         </A>
         <A
-          href="/"
+          href="/simple-solar"
           style={{
             color: "white",
             "text-decoration": "none",
             padding: "5px 10px",
             display: "block",
           }}
         >
-          Home
+          Simple Solar
         </A>
       </nav>
       {props.children}
@@ -52,14 +52,19 @@ function Layout(props: ParentProps) {
 export function App() {
   return (
     <Router root={Layout}>
-      <Route path="/basic" component={Basic} />
+      <Route path="/simple-solar" component={SimpleSolar} />
       <Route
         path="/"
         component={() => (
-          <T.Mesh>
-            <T.BoxGeometry />
-            <T.MeshBasicMaterial color="gray" />
-          </T.Mesh>
+          <Canvas
+            style={{ width: "100vw", height: "100vh" }}
+            camera={{ position: new THREE.Vector3(0, 0, 15) }}
+          >
+            <T.Mesh>
+              <T.BoxGeometry />
+              <T.MeshBasicMaterial color="gray" />
+            </T.Mesh>
+          </Canvas>
         )}
       />
     </Router>

playground/controls/OrbitControls.tsx

@@ -0,0 +1,74 @@
+import { createMemo, onCleanup, type Ref } from "solid-js"
+import type { Event } from "three"
+import { OrbitControls as ThreeOrbitControls } from "three-stdlib"
+import { useThree, type S3 } from "../../src/index.ts"
+import { manageProps } from "../../src/props.ts"
+import { every, whenEffect } from "../../src/utils/conditionals.ts"
+import { processProps } from "./process-props.ts"
+
+export type OrbitControlsProps = S3.ClassProps<typeof ThreeOrbitControls> & {
+  ref?: Ref<ThreeOrbitControls>
+  camera?: S3.CameraType
+  domElement?: HTMLElement
+  enableDamping?: boolean
+  onChange?: (e?: Event<"change", ThreeOrbitControls>) => void
+  onEnd?: (e?: Event<"end", ThreeOrbitControls>) => void
+  onStart?: (e?: Event<"start", ThreeOrbitControls>) => void
+  regress?: boolean
+  target?: S3.Vector3
+  keyEvents?: boolean | HTMLElement
+}
+
+export function OrbitControls(props: OrbitControlsProps) {
+  const [config, rest] = processProps(
+    props,
+    {
+      enableDamping: true,
+      keyEvents: false,
+    },
+    [
+      "camera",
+      "regress",
+      "domElement",
+      "keyEvents",
+      "onChange",
+      "onStart",
+      "onEnd",
+      "object",
+      "dispose",
+    ],
+  )
+  const three = useThree()
+  const controls = createMemo(() => new ThreeOrbitControls(config.camera ?? three.camera))
+
+  whenEffect(controls, controls => {
+    controls.connect(props.domElement ?? three.gl.domElement)
+    onCleanup(() => controls.dispose())
+  })
+
+  whenEffect(
+    every(controls, () => config.onStart),
+    ([controls, callback]) => {
+      controls.addEventListener("start", callback)
+      onCleanup(() => controls.removeEventListener("start", callback))
+    },
+  )
+  whenEffect(
+    every(controls, () => config.onChange),
+    ([controls, callback]) => {
+      controls.addEventListener("change", callback)
+      onCleanup(() => controls.removeEventListener("change", callback))
+    },
+  )
+  whenEffect(
+    every(controls, () => config.onEnd),
+    ([controls, callback]) => {
+      controls.addEventListener("end", callback)
+      onCleanup(() => controls.removeEventListener("end", callback))
+    },
+  )
+
+  manageProps(controls, rest)
+
+  return null!
+}

playground/controls/default-props.ts

@@ -0,0 +1,10 @@
+import type { MergeProps } from "solid-js"
+import { mergeProps } from "solid-js"
+import type { KeyOfOptionals } from "./type-utils.ts"
+
+export function defaultProps<T, K extends KeyOfOptionals<T>>(
+  props: T,
+  defaults: Required<Pick<T, K>>,
+): MergeProps<[Required<Pick<T, K>>, T]> {
+  return mergeProps(defaults, props)
+}

playground/controls/process-props.ts

@@ -0,0 +1,11 @@
+import { splitProps } from "solid-js"
+import { defaultProps } from "./default-props.ts"
+import type { KeyOfOptionals } from "./type-utils.ts"
+
+export function processProps<
+  const TProps,
+  const TKey extends KeyOfOptionals<TProps>,
+  const TSplit extends readonly (keyof TProps)[],
+>(props: TProps, defaults: Required<Pick<TProps, TKey>>, split?: TSplit) {
+  return splitProps(defaultProps(props, defaults), split ?? [])
+}

playground/controls/type-utils.ts

@@ -0,0 +1,16 @@
+export type Args<T> = T extends new (...args: any) => any ? ConstructorParameters<T> : T
+
+export type Mandatory<T, K extends keyof T> = T & { [P in K]-?: T[P] }
+
+type OmitFunctionProperties<T> = { [K in keyof T]: T[K] extends Function ? never : K }[keyof T]
+/** Overwrites the properties in `T` with the properties from `O`. */
+export type Overwrite<T, O> = Omit<T, OmitFunctionProperties<O>> & O
+
+export type KeyOfOptionals<T> = keyof {
+  [K in keyof T as T extends Record<K, T[K]> ? never : K]: T[K]
+}
+
+/** Allows using a TS v4 labeled tuple even with older typescript versions */
+export type NamedArrayTuple<T extends (...args: any) => any> = Parameters<T>
+
+export type Ref<TRef> = TRef | ((value: TRef) => void)