removed: liveblock

src/App.js

@@ -1,21 +1,20 @@
 import "./App.css";
 import { OrbitControls } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
-import { Suspense, useEffect } from "react";
+import { Suspense } from "react";
 import { LinearToneMapping } from "three";
 import { InfoPanel, Scene } from "./components";
-import useStore from "./store";
 
 const LegoRoom = () => {
   return (
     <>
       <Canvas
-        // gl={{
+        gl={{
-        //   alpha: false,
+          alpha: false,
-        //   antialias: false,
+          antialias: false,
-        //   powerPreference: "high-performance",
+          powerPreference: "high-performance",
-        //   toneMapping: LinearToneMapping,
+          toneMapping: LinearToneMapping,
-        // }}
+        }}
         camera={{
           position: [17.43, 657.76, 943.51],
           near: 0.1,
@@ -36,25 +35,6 @@ const LegoRoom = () => {
 };
 
 function App() {
-  // const enterRoom = useStore((state) => state.liveblocks.enterRoom);
-  // const leaveRoom = useStore((state) => state.liveblocks.leaveRoom);
-  // const isLoading = useStore((state) => state.liveblocks.isStorageLoading);
-
-  // useEffect(() => {
-  //   enterRoom("lego-demo-room");
-  //   return () => {
-  //     leaveRoom("lego-demo-room");
-  //   };
-  // }, [enterRoom, leaveRoom]);
-
-  // if (isLoading) {
-  //   return (
-  //     <>
-  //       <h1>Loading.....</h1>
-  //     </>
-  //   );
-  // }
-
   return (
     <div className="App">
       <LegoRoom />

src/components/BrickCursor.jsx

@@ -64,8 +64,6 @@ export const BrickCursor = forwardRef(
               0,
               (offsetZ * width) / dimensions.z,
             ]}
-            castShadow={true}
-            receiveShadow={true}
           >
             <boxGeometry args={[width, height, depth]} />
             <meshBasicMaterial

src/components/InfoPanel.jsx

@@ -1,9 +1,6 @@
 import React from "react";
-import useStore from "../store/index";
 
 export const InfoPanel = () => {
-  const clearBricks = useStore((state) => state.clearBricks);
-
   return (
     <div
       style={{
@@ -16,8 +13,9 @@ export const InfoPanel = () => {
         width: "200px",
       }}
     >
-      {/* Use panel on right top corner to customize the Lego Bricks Properties */}
+      Use panel on right top corner to customize the Lego Bricks Properties Use
-      <button onClick={clearBricks}>Clear Scene</button>
+      <br />
+      "AWSD" to chnage the anchor points of bricks
     </div>
   );
 };

src/components/Scene.jsx

@@ -8,15 +8,10 @@ import {
   useAnchorShorcuts,
 } from "../utils";
 import { useControls } from "leva";
-import useStore from "../store";
-// import { ContactShadows } from "@react-three/drei";
 
 let t;
 
 export const Scene = () => {
-  // const bricks = useStore((state) => state.bricksState);
-  // const setBricks = useStore((state) => state.setBricks);
-
   const [bricks, setBricks] = useState([]);
 
   const bricksBoundBox = useRef([]);
@@ -111,7 +106,6 @@ export const Scene = () => {
           translation: { x: anchorX, z: anchorZ },
         };
 
-        // setBricks(brickData);
         setBricks((prevBricks) => [...prevBricks, brickData]);
       }
     } else {

src/store/index.js

@@ -1,31 +0,0 @@
-import create from "zustand";
-import { createClient } from "@liveblocks/client";
-import { liveblocks } from "@liveblocks/zustand";
-
-const client = createClient({
-  publicApiKey:
-    "pk_dev_TZ6PEVqkJbtrcNqq8bnqghwmoxDr1WuSOcxycuo-_qYBLp9jDPQ12nhRcyNU_L_o",
-});
-
-const useStore = create(
-  liveblocks(
-    (set, get) => ({
-      bricksState: [],
-      setBricks: (newBrick) => {
-        const { bricksState } = get();
-
-        set({
-          bricksState: [...bricksState, newBrick],
-        });
-      },
-      clearBricks: () => {
-        set({
-          bricksState: [],
-        });
-      },
-    }),
-    { client, storageMapping: { bricksState: true } }
-  )
-);
-
-export default useStore;