docs: add environment example

Author: bigmistqke

playground/App.tsx

@@ -2,8 +2,9 @@ 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 { SimplePortal } from "./examples/SimplePortal.tsx"
-import { SimpleSolarExample } from "./examples/SimpleSolar.tsx"
+import { EnvironmentExample } from "./examples/EnvironmentExample.tsx"
+import { PortalExample } from "./examples/PortalExample.tsx"
+import { SolarExample } from "./examples/SolarExample.tsx"
 import "./index.css"
 
 const T = createT(THREE)
@@ -55,6 +56,17 @@ function Layout(props: ParentProps) {
         >
           Portal
         </A>
+        <A
+          href="/environment"
+          style={{
+            color: "white",
+            "text-decoration": "none",
+            padding: "5px 10px",
+            display: "block",
+          }}
+        >
+          Environment
+        </A>
       </nav>
       {props.children}
     </>
@@ -64,8 +76,9 @@ function Layout(props: ParentProps) {
 export function App() {
   return (
     <Router root={Layout}>
-      <Route path="/simple-solar" component={SimpleSolarExample} />
-      <Route path="/portal" component={SimplePortal} />
+      <Route path="/simple-solar" component={SolarExample} />
+      <Route path="/portal" component={PortalExample} />
+      <Route path="/environment" component={EnvironmentExample} />
       <Route
         path="/"
         component={() => (

playground/examples/EnvironmentExample.tsx

@@ -0,0 +1,33 @@
+import * as THREE from "three"
+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) }}
+      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.Mesh>
+    </Canvas>
+  )
+}

playground/examples/SimplePortal.tsx playground/examples/PortalExample.tsxplayground/examples/SimplePortal.tsx renamed to playground/examples/PortalExample.tsx

@@ -3,7 +3,7 @@ import { Canvas, createT, Entity, Portal } from "../../src/index.ts"
 
 const T = createT(THREE)
 
-export function SimplePortal() {
+export function PortalExample() {
   const group = new THREE.Group()
   return (
     <Canvas

playground/examples/SimpleSolar.tsx playground/examples/SolarExample.tsxplayground/examples/SimpleSolar.tsx renamed to playground/examples/SolarExample.tsx

@@ -116,10 +116,9 @@ function CelestialBody(
   )
 }
 
-export function SimpleSolarExample() {
+export function SolarExample() {
   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)}
@@ -129,9 +128,7 @@ export function SimpleSolarExample() {
       <OrbitControls />
       <T.AmbientLight intensity={0.2} />
       <T.PointLight position={[0, 0, 0]} intensity={2} />
-
       <T.Group rotation={[0, 0, Math.PI / 2]}>
-        {/* Sun */}
         <CelestialBody name="sun" radius={1.5} color="#FDB813">
           <CelestialBody name="earth" radius={0.5} color="#1E90FF" orbit={[8, 6]}>
             <CelestialBody

playground/index.css

@@ -3,3 +3,7 @@ body {
   margin: 0px;
   font-family: arial;
 }
+
+#root {
+  height: 100vh;
+}