Add room jsx

adeira-source-id: 3241d496988cf4b590aabfc44db433946fbfaf42
trytriplex · Jun 2, 2023 · a1ec24a · a1ec24a
1 parent b4e5a92
commit a1ec24a
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 14 deletions.
diff --git a/apps/docs/components/landing.tsx b/apps/docs/components/landing.tsx
@@ -2,22 +2,24 @@ import Link from "next/link";
 
 export function Landing() {
   return (
-    <div className="mx-auto max-w-[80rem] px-12 py-32">
-      <div className="flex flex-col items-center gap-8 md:items-start lg:gap-10">
-        <h1 className="max-w-4xl text-center text-6xl font-bold text-blue-400 md:text-left md:text-7xl lg:text-8xl">
-          Visually Edit React Three Fiber Components
-        </h1>
+    <div className="relative">
+      <div className="mx-auto max-w-[80rem] px-12 py-32">
+        <div className="flex flex-col items-center gap-8 md:items-start lg:gap-10">
+          <h1 className="max-w-4xl text-center text-6xl font-bold text-blue-400 md:text-left md:text-7xl lg:text-8xl">
+            Visually Edit React Three Fiber Components
+          </h1>
 
-        <span className="text-center text-xl text-neutral-300">
-          Save your changes straight back to source code.
-        </span>
+          <span className="text-center text-xl text-neutral-300">
+            Save your changes straight back to source code.
+          </span>
 
-        <Link
-          href="/docs/overview"
-          className="rounded-full border-[3px] border-blue-400 px-10 py-4 text-xl font-semibold text-blue-400 shadow-2xl shadow-blue-400/20 hover:bg-blue-400 hover:text-neutral-900 md:ml-auto lg:text-2xl xl:mr-28"
-        >
-          Get Started →
-        </Link>
+          <Link
+            href="/docs/overview"
+            className="rounded-full border-[3px] border-blue-400 px-10 py-4 text-xl font-semibold text-blue-400 hover:bg-blue-400 hover:text-neutral-900 md:ml-auto lg:text-2xl xl:mr-28"
+          >
+            Get Started →
+          </Link>
+        </div>
       </div>
     </div>
   );

diff --git a/examples/room/src/scene.tsx b/examples/room/src/scene.tsx
@@ -1,10 +1,101 @@
+import { Sphere } from "./components/sphere";
+import { Light } from "./components/light";
+import {
+  Seat,
+  WallpaperAndLights,
+  FloorPlanks,
+  Lamps,
+  CollectionOfCans,
+  TableBox,
+  SeatMats,
+  Table,
+  BackWall,
+  Wall,
+  Floor,
+} from "./components/room";
 import { SoftShadows, Sky } from "@react-three/drei";
 
 export function Room() {
   return (
     <>
       <SoftShadows samples={16} size={undefined} />
       <Sky inclination={0.52} />
+
+      <Floor position={[0, 0.9197456200141876, 0]} />
+
+      <Wall position={[-6.601040957040237, 5.340027659688785, 0]} />
+
+      <Wall
+        scale={[-1, 1, 1]}
+        position={[6.794563016511148, 5.341597526161233, 0]}
+      />
+
+      <BackWall position={[0, 5.373038841701562, -5.8977116179888345]} />
+
+      <Light />
+
+      <ambientLight intensity={0.4} />
+
+      <Table
+        position={[0.3776542351716331, 1.9337453168442043, -0.8684501762730286]}
+      />
+
+      <SeatMats
+        position={[0.3312534583635297, 1.6513814010488033, -0.5724636304669097]}
+      />
+
+      <TableBox
+        position={[
+          0.40380776544596353, 2.7579603988524712, -0.8629871620655027,
+        ]}
+      />
+
+      <CollectionOfCans
+        position={[0.3327560274034522, 2.9851818896570927, -0.9068275261053336]}
+      />
+
+      <Lamps position={[0, 2.370600692653582, -0.7970636205394404]} />
+
+      <FloorPlanks position={[0, 1.2424206964695401, 0]} />
+
+      <WallpaperAndLights
+        position={[0, 5.416529827741108, -3.1595838529380442]}
+      />
+
+      <Seat
+        position={[
+          -2.4059812914398093, 2.5360328283639326, -0.8726110046607222,
+        ]}
+      />
+
+      <Seat
+        position={[0.32878971568198057, 2.4357472414788752, 2.1066219523407232]}
+        rotation={[-3.1415926535897927, 1.563143060010577, 3.141592653589793]}
+      />
+
+      <Sphere
+        position={[-1.3455905956608063, 1.4915180019145353, -8.116668133155024]}
+        speed={3}
+      />
+
+      <Sphere
+        position={[2.882027173731192, 2.251990123907609, -13.340406808224275]}
+        speed={1}
+      />
+      <Sphere
+        position={[3.032222532462284, 0.22587518019089914, -10.816753601686415]}
+        speed={3}
+      />
+
+      <Seat
+        position={[3.0680714646480087, 2.4673855354929586, -0.9873375195629082]}
+        rotation={[-3.141592653589793, 0.0566176595316571, -3.141592653589793]}
+      />
+
+      <Seat
+        position={[0.2638413630154228, 2.4356649559057097, -3.27932483580052]}
+        rotation={[0, -1.5579011304445005, 0]}
+      />
     </>
   );
 }