docs: update demos

Author: bigmistqke

playground/App.tsx

@@ -1,7 +1,7 @@
 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 { Canvas, createT, Entity } from "../src/index.ts"
 import { EnvironmentExample } from "./examples/EnvironmentExample.tsx"
 import { PortalExample } from "./examples/PortalExample.tsx"
 import { SolarExample } from "./examples/SolarExample.tsx"
@@ -83,13 +83,16 @@ export function App() {
         path="/"
         component={() => (
           <Canvas
+            defaultCamera={{ position: new THREE.Vector3(0, 0, 15) }}
+            scene={{ background: [1, 0, 0] }}
             style={{ width: "100vw", height: "100vh" }}
-            camera={{ position: new THREE.Vector3(0, 0, 15) }}
           >
-            <T.Mesh>
-              <T.BoxGeometry />
-              <T.MeshBasicMaterial color="gray" />
-            </T.Mesh>
+            <Entity from={THREE.Group}>
+              <T.Mesh>
+                <T.BoxGeometry />
+                <T.MeshBasicMaterial color="gray" />
+              </T.Mesh>
+            </Entity>
           </Canvas>
         )}
       />

playground/controls/OrbitControls.tsx

@@ -8,7 +8,7 @@ import { processProps } from "./process-props.ts"
 
 export interface OrbitControlsProps extends S3.Props<typeof ThreeOrbitControls> {
   ref?: Ref<ThreeOrbitControls>
-  camera?: S3.CameraType
+  camera?: S3.CameraKind
   domElement?: HTMLElement
   enableDamping?: boolean
   onChange?: (e?: Event<"change", ThreeOrbitControls>) => void
@@ -41,7 +41,7 @@ export function OrbitControls(props: OrbitControlsProps) {
   const three = useThree()
   const controls = createMemo<ThreeOrbitControls>(previous => {
     previous?.dispose()
-    return new ThreeOrbitControls(config.camera ?? three.camera)
+    return new ThreeOrbitControls(config.camera ?? three.currentCamera)
   })
 
   useFrame(() => controls().update())

playground/examples/EnvironmentExample.tsx

@@ -1,32 +1,31 @@
 import * as THREE from "three"
+import { Resource } from "../../src/components.tsx"
 import { Canvas, createT } from "../../src/index.ts"
 import { OrbitControls } from "../controls/OrbitControls.tsx"
 
 const T = createT(THREE)
 
 export function EnvironmentExample() {
-  const texture = new THREE.CubeTextureLoader()
-    .setPath(
-      "https://rawcdn.githack.com/mrdoob/three.js/54ac263593c81b669ca9a089491ddd9e240427d2/examples/textures/cube/Bridge2/",
-    )
-    .load(["posx.jpg", "negx.jpg", "posy.jpg", "negy.jpg", "posz.jpg", "negz.jpg"])
-
   return (
     <Canvas
       style={{ width: "100vw", height: "100vh" }}
-      camera={{ position: new THREE.Vector3(0, 0, 30) }}
+      defaultCamera={{ 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)}
-      scene={{
-        environment: texture,
-      }}
     >
       <OrbitControls />
       <T.Mesh>
         <T.TorusKnotGeometry args={[1, 0.5, 128, 32]} />
-        <T.MeshStandardMaterial metalness={1} roughness={0} color="white" />
+        <T.MeshStandardMaterial metalness={1} roughness={0} color="white">
+          <Resource
+            loader={THREE.CubeTextureLoader}
+            attach="envMap"
+            path="https://rawcdn.githack.com/mrdoob/three.js/54ac263593c81b669ca9a089491ddd9e240427d2/examples/textures/cube/Bridge2/"
+            url={["posx.jpg", "negx.jpg", "posy.jpg", "negy.jpg", "posz.jpg", "negz.jpg"]}
+          />
+        </T.MeshStandardMaterial>
       </T.Mesh>
     </Canvas>
   )

playground/examples/Gltf.tsx

@@ -8,7 +8,7 @@ export function PortalExample() {
   return (
     <Canvas
       style={{ width: "100vw", height: "100vh" }}
-      camera={{ position: new THREE.Vector3(0, 0, 30) }}
+      defaultCamera={{ 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)}

playground/examples/PortalExample.tsx

@@ -119,7 +119,7 @@ function CelestialBody(
 export function SolarExample() {
   return (
     <Canvas
-      camera={{ position: new THREE.Vector3(0, 0, 30) }}
+      defaultCamera={{ 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)}