From 64eff2272be14dca32b4179bde67d432a0355352 Mon Sep 17 00:00:00 2001 From: bhushan6 Date: Thu, 15 Jun 2023 23:28:35 +0530 Subject: [PATCH] added : undo button and selection --- package-lock.json | 146 +++++++++++++++++++++++++-------- package.json | 2 + src/App.js | 2 +- src/components/Brick.jsx | 58 ++++++++++--- src/components/BrickCursor.jsx | 2 + src/components/InfoPanel.jsx | 1 + src/components/Lights.jsx | 52 +++--------- src/components/Scene.jsx | 65 +++++++++------ src/components/Workspace.jsx | 85 +++++++++++++++++-- src/utils/helpers.js | 10 ++- 10 files changed, 304 insertions(+), 119 deletions(-) diff --git a/package-lock.json b/package-lock.json index f521db8..532f0ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@liveblocks/zustand": "^1.0.1", "@react-three/drei": "^9.57.0", "@react-three/fiber": "^8.11.6", + "@react-three/postprocessing": "^2.14.10", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -20,6 +21,7 @@ "react-dom": "^18.2.0", "react-scripts": "5.0.1", "three": "^0.150.1", + "three-stdlib": "^2.23.10", "use-keyboard-shortcut": "^1.1.6", "web-vitals": "^2.1.4", "zustand": "^4.3.6" @@ -3400,6 +3402,23 @@ } } }, + "node_modules/@react-three/postprocessing": { + "version": "2.14.10", + "resolved": "https://registry.npmjs.org/@react-three/postprocessing/-/postprocessing-2.14.10.tgz", + "integrity": "sha512-abxjotccgqJmClkpwG+18Ca8l5fc1NniJvX1te60z+P6B/g7HB9JNtlBJfDl/MABZemmZQKT9moI35Dg6s3BQA==", + "dependencies": { + "maath": "^0.5.3", + "n8ao": "^1.6.2", + "postprocessing": "^6.31.0", + "screen-space-reflections": "^2.5.0", + "three-stdlib": "^2.23.4" + }, + "peerDependencies": { + "@react-three/fiber": ">=8.0", + "react": ">=18.0", + "three": ">= 0.138.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -4103,6 +4122,11 @@ "@types/node": "*" } }, + "node_modules/@types/draco3d": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.2.tgz", + "integrity": "sha512-goh23EGr6CLV6aKPwN1p8kBD/7tT5V/bLpToSbarKrwVejqNrspVrv8DhliteYkkhZYrlq/fwKZRRUzH4XN88w==" + }, "node_modules/@types/eslint": { "version": "8.21.1", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.1.tgz", @@ -4582,10 +4606,9 @@ "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==" }, "node_modules/@types/webxr": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.1.tgz", - "integrity": "sha512-xlFXPfgJR5vIuDefhaHuUM9uUgvPaXB6GKdXy2gdEh8gBWQZ2ul24AJz3foUd8NNKlSTQuWYJpCb1/pL81m1KQ==", - "peer": true + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.2.tgz", + "integrity": "sha512-szL74BnIcok9m7QwYtVmQ+EdIKwbjPANudfuvDrAF8Cljg9MKUlIoc1w5tjj9PMpeSH3U1Xnx//czQybJ0EfSw==" }, "node_modules/@types/ws": { "version": "8.5.4", @@ -4973,11 +4996,6 @@ "@xtuc/long": "4.2.2" } }, - "node_modules/@webgpu/glslang": { - "version": "0.0.15", - "resolved": "https://registry.npmjs.org/@webgpu/glslang/-/glslang-0.0.15.tgz", - "integrity": "sha512-niT+Prh3Aff8Uf1MVBVUsaNjFj9rJAKDXuoHIKiQbB+6IUP/3J3JIhBNyZ7lDhytvXxw6ppgnwKZdDJ08UMj4Q==" - }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -12746,9 +12764,9 @@ } }, "node_modules/maath": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/maath/-/maath-0.5.2.tgz", - "integrity": "sha512-MFjfnXF5CzZaVnBuKc9y1FJh/BiPGqf19NH8Jm4o/jKTxuQ3RyPkcSIpuwdDhXrWROVKAxi3KjmHFUNMuIndbg==", + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/maath/-/maath-0.5.3.tgz", + "integrity": "sha512-ut63A4zTd9abtpi+sOHW1fPWPtAFrjK0E17eAthx1k93W/T2cWLKV5oaswyotJVDvvW1EXSdokAqhK5KOu0Qdw==", "peerDependencies": { "@types/three": ">=0.144.0", "three": ">=0.144.0" @@ -13058,6 +13076,15 @@ "multicast-dns": "cli.js" } }, + "node_modules/n8ao": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/n8ao/-/n8ao-1.6.2.tgz", + "integrity": "sha512-nmdN9jo1z97XDOts2j1sdziOSvyjdTY6jcH6Z6JTcD3Tdsl3NB5VzJiGAXyljzywm9orHvOiKlWUTRSP4HqNDg==", + "peerDependencies": { + "postprocessing": ">=6.30.0", + "three": ">=0.137" + } + }, "node_modules/nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -14883,6 +14910,17 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, + "node_modules/postprocessing": { + "version": "6.31.2", + "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.31.2.tgz", + "integrity": "sha512-wOpL3qFmleOWfk4uK377t+7BWF1MOzBTeT+yWr6l/NlgwZZb8xEW7I3j7auwhoW2jG1uuymBeCdUQK91yn8rsw==", + "engines": { + "node": ">= 0.13.2" + }, + "peerDependencies": { + "three": ">= 0.138.0 < 0.154.0" + } + }, "node_modules/potpack": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz", @@ -15992,6 +16030,15 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/screen-space-reflections": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/screen-space-reflections/-/screen-space-reflections-2.5.0.tgz", + "integrity": "sha512-fWSDMhJS0xwD3LTxRRch7Lb9NzxsR66sCmtDmAA7i+OGnghUrBBsrha85ng7StnCBaLq/BKmZ97dLxWd1XgWdQ==", + "peerDependencies": { + "postprocessing": ">=6.28.0", + "three": ">=0.141.0" + } + }, "node_modules/select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -16974,13 +17021,13 @@ } }, "node_modules/three-stdlib": { - "version": "2.21.8", - "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.21.8.tgz", - "integrity": "sha512-kqisiKvO4mSy59v5vWqBQSH8famLxp7Z51LxpMJI9GwDxqODaW02rhIwmjYDEzZWNFpjZpoDHVGbdpeHf8h3SA==", + "version": "2.23.10", + "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.23.10.tgz", + "integrity": "sha512-y0DlxaN5HZXI9hKjEtqO2xlCEt7XyDCOMvD2M3JJFBmYjwbU+PbJ1n3Z+7Hr/6BeVGE6KZYcqPMnfKrTK5WTJg==", "dependencies": { - "@babel/runtime": "^7.16.7", + "@types/draco3d": "^1.4.0", "@types/offscreencanvas": "^2019.6.4", - "@webgpu/glslang": "^0.0.15", + "@types/webxr": "^0.5.2", "chevrotain": "^10.1.2", "draco3d": "^1.4.1", "fflate": "^0.6.9", @@ -16991,7 +17038,7 @@ "zstddec": "^0.0.2" }, "peerDependencies": { - "three": ">=0.122.0" + "three": ">=0.128.0" } }, "node_modules/throat": { @@ -20734,6 +20781,18 @@ } } }, + "@react-three/postprocessing": { + "version": "2.14.10", + "resolved": "https://registry.npmjs.org/@react-three/postprocessing/-/postprocessing-2.14.10.tgz", + "integrity": "sha512-abxjotccgqJmClkpwG+18Ca8l5fc1NniJvX1te60z+P6B/g7HB9JNtlBJfDl/MABZemmZQKT9moI35Dg6s3BQA==", + "requires": { + "maath": "^0.5.3", + "n8ao": "^1.6.2", + "postprocessing": "^6.31.0", + "screen-space-reflections": "^2.5.0", + "three-stdlib": "^2.23.4" + } + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -21226,6 +21285,11 @@ "@types/node": "*" } }, + "@types/draco3d": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.2.tgz", + "integrity": "sha512-goh23EGr6CLV6aKPwN1p8kBD/7tT5V/bLpToSbarKrwVejqNrspVrv8DhliteYkkhZYrlq/fwKZRRUzH4XN88w==" + }, "@types/eslint": { "version": "8.21.1", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.1.tgz", @@ -21652,10 +21716,9 @@ "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==" }, "@types/webxr": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.1.tgz", - "integrity": "sha512-xlFXPfgJR5vIuDefhaHuUM9uUgvPaXB6GKdXy2gdEh8gBWQZ2ul24AJz3foUd8NNKlSTQuWYJpCb1/pL81m1KQ==", - "peer": true + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.2.tgz", + "integrity": "sha512-szL74BnIcok9m7QwYtVmQ+EdIKwbjPANudfuvDrAF8Cljg9MKUlIoc1w5tjj9PMpeSH3U1Xnx//czQybJ0EfSw==" }, "@types/ws": { "version": "8.5.4", @@ -21937,11 +22000,6 @@ "@xtuc/long": "4.2.2" } }, - "@webgpu/glslang": { - "version": "0.0.15", - "resolved": "https://registry.npmjs.org/@webgpu/glslang/-/glslang-0.0.15.tgz", - "integrity": "sha512-niT+Prh3Aff8Uf1MVBVUsaNjFj9rJAKDXuoHIKiQbB+6IUP/3J3JIhBNyZ7lDhytvXxw6ppgnwKZdDJ08UMj4Q==" - }, "@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -27624,9 +27682,9 @@ "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==" }, "maath": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/maath/-/maath-0.5.2.tgz", - "integrity": "sha512-MFjfnXF5CzZaVnBuKc9y1FJh/BiPGqf19NH8Jm4o/jKTxuQ3RyPkcSIpuwdDhXrWROVKAxi3KjmHFUNMuIndbg==", + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/maath/-/maath-0.5.3.tgz", + "integrity": "sha512-ut63A4zTd9abtpi+sOHW1fPWPtAFrjK0E17eAthx1k93W/T2cWLKV5oaswyotJVDvvW1EXSdokAqhK5KOu0Qdw==", "requires": {} }, "magic-string": { @@ -27851,6 +27909,12 @@ "thunky": "^1.0.2" } }, + "n8ao": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/n8ao/-/n8ao-1.6.2.tgz", + "integrity": "sha512-nmdN9jo1z97XDOts2j1sdziOSvyjdTY6jcH6Z6JTcD3Tdsl3NB5VzJiGAXyljzywm9orHvOiKlWUTRSP4HqNDg==", + "requires": {} + }, "nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -28969,6 +29033,12 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, + "postprocessing": { + "version": "6.31.2", + "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.31.2.tgz", + "integrity": "sha512-wOpL3qFmleOWfk4uK377t+7BWF1MOzBTeT+yWr6l/NlgwZZb8xEW7I3j7auwhoW2jG1uuymBeCdUQK91yn8rsw==", + "requires": {} + }, "potpack": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz", @@ -29750,6 +29820,12 @@ "ajv-keywords": "^3.5.2" } }, + "screen-space-reflections": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/screen-space-reflections/-/screen-space-reflections-2.5.0.tgz", + "integrity": "sha512-fWSDMhJS0xwD3LTxRRch7Lb9NzxsR66sCmtDmAA7i+OGnghUrBBsrha85ng7StnCBaLq/BKmZ97dLxWd1XgWdQ==", + "requires": {} + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -30516,13 +30592,13 @@ "requires": {} }, "three-stdlib": { - "version": "2.21.8", - "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.21.8.tgz", - "integrity": "sha512-kqisiKvO4mSy59v5vWqBQSH8famLxp7Z51LxpMJI9GwDxqODaW02rhIwmjYDEzZWNFpjZpoDHVGbdpeHf8h3SA==", + "version": "2.23.10", + "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.23.10.tgz", + "integrity": "sha512-y0DlxaN5HZXI9hKjEtqO2xlCEt7XyDCOMvD2M3JJFBmYjwbU+PbJ1n3Z+7Hr/6BeVGE6KZYcqPMnfKrTK5WTJg==", "requires": { - "@babel/runtime": "^7.16.7", + "@types/draco3d": "^1.4.0", "@types/offscreencanvas": "^2019.6.4", - "@webgpu/glslang": "^0.0.15", + "@types/webxr": "^0.5.2", "chevrotain": "^10.1.2", "draco3d": "^1.4.1", "fflate": "^0.6.9", diff --git a/package.json b/package.json index c05a704..5e93cde 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@liveblocks/zustand": "^1.0.1", "@react-three/drei": "^9.57.0", "@react-three/fiber": "^8.11.6", + "@react-three/postprocessing": "^2.14.10", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -15,6 +16,7 @@ "react-dom": "^18.2.0", "react-scripts": "5.0.1", "three": "^0.150.1", + "three-stdlib": "^2.23.10", "use-keyboard-shortcut": "^1.1.6", "web-vitals": "^2.1.4", "zustand": "^4.3.6" diff --git a/src/App.js b/src/App.js index 4dded16..b315286 100644 --- a/src/App.js +++ b/src/App.js @@ -20,7 +20,7 @@ const LegoRoom = () => { near: 0.1, far: 20000, }} - colorManagement + colormanagement shadows dpr={Math.min(2, window.devicePixelRatio)} > diff --git a/src/components/Brick.jsx b/src/components/Brick.jsx index f2f6a63..1adcba9 100644 --- a/src/components/Brick.jsx +++ b/src/components/Brick.jsx @@ -4,8 +4,10 @@ import { getMeasurementsFromDimensions, base, createGeometry, + knobSize, } from "../utils"; -import { Vector3, Box3 } from "three"; +import { Vector3, Box3, BackSide } from "three"; +import { useSelect } from "@react-three/drei"; export const Brick = ({ intersect, @@ -13,18 +15,35 @@ export const Brick = ({ dimensions = { x: 1, z: 1 }, rotation = 0, translation = { x: 0, z: 0 }, - onClick = () => {}, + // onClick = () => {}, bricksBoundBox = { current: [] }, uID = "", mouseMove = () => {}, }) => { + // const [{}, set] = useControls(() => ({ + // Delete: button((get) => { + // deleteSelectedBrick(); + // }), + // })); + const brickRef = useRef(); const { height, width, depth } = getMeasurementsFromDimensions(dimensions); + const brickGeometry = useMemo(() => { return createGeometry({ width, height, depth, dimensions }); }, [width, height, depth, dimensions]); + const outlineGeometry = useMemo(() => { + return createGeometry({ + width: width + 2.6, + height: height + 2.6, + depth: depth + 2.6, + dimensions, + knobDim: knobSize + 1.2, + }); + }, [width, height, depth, dimensions]); + const position = useMemo(() => { const evenWidth = rotation === 0 ? dimensions.x % 2 === 0 : dimensions.z % 2 === 0; @@ -49,16 +68,19 @@ export const Brick = ({ useEffect(() => { const brickBoundingBox = new Box3().setFromObject(brickRef.current); - const boundingBoxRef = bricksBoundBox.current; - - boundingBoxRef.push({ uID, brickBoundingBox }); + bricksBoundBox.current.push({ uID, brickBoundingBox }); return () => { - boundingBoxRef.filter((brick) => { - return brick.uID !== uID; - }); + const newA = []; + for (let i = 0; i < bricksBoundBox.current.length; i++) { + const element = bricksBoundBox.current[i]; + if (element.uID !== uID) { + newA.push(element); + } + } + bricksBoundBox.current = newA; }; - }, []); + }, [uID, bricksBoundBox]); const compansateX = dimensions.x % 2 === 0 ? dimensions.x / 2 : (dimensions.x - 1) / 2; @@ -75,6 +97,9 @@ export const Brick = ({ ? Math.max(translation.z, -compansateZ) : Math.min(translation.z, compansateZ); + const selected = useSelect().map((sel) => sel.userData.uID); + const isSelected = !!selected.find((sel) => sel === uID); + return ( <> @@ -100,6 +126,18 @@ export const Brick = ({ roughness={0.5} /> + {isSelected && ( + + + + )} ); diff --git a/src/components/BrickCursor.jsx b/src/components/BrickCursor.jsx index 12196df..7dc0175 100644 --- a/src/components/BrickCursor.jsx +++ b/src/components/BrickCursor.jsx @@ -12,6 +12,7 @@ export const BrickCursor = forwardRef( dimensions = { x: 1, z: 1 }, rotation = 0, translation = { x: 0, z: 0 }, + visible = true, }, ref ) => { @@ -57,6 +58,7 @@ export const BrickCursor = forwardRef( ref={ref} position={[position.x, Math.abs(position.y), position.z]} rotation={[0, rotation, 0]} + visible={visible} > { fontFamily: "sans-serif", padding: "10px", width: "200px", + color: "white", }} > Use panel on right top corner to customize the Lego Bricks Properties Use diff --git a/src/components/Lights.jsx b/src/components/Lights.jsx index cbbd382..020f1c6 100644 --- a/src/components/Lights.jsx +++ b/src/components/Lights.jsx @@ -1,50 +1,20 @@ import React from "react"; -// import { useControls } from "leva"; export const Lights = () => { - // const [{ left, bottom, far, near, zoom }, set] = useControls(() => ({ - // left: { - // value: 1, - // min: 1, - // max: 500, - // step: 1, - // }, - // bottom: { - // value: 1, - // min: 1, - // max: 500, - // step: 1, - // }, - // far: { - // value: 1, - // min: 1, - // max: 50000, - // step: 1, - // }, - // near: { - // value: 0.01, - // min: 0.01, - // max: 20, - // step: 0.1, - // }, - // zoom: { - // value: 0, - // min: 0, - // max: 2, - // step: 0.1, - // }, - // })); - return ( <> - + - + > + + ); }; diff --git a/src/components/Scene.jsx b/src/components/Scene.jsx index 4373bc4..af36def 100644 --- a/src/components/Scene.jsx +++ b/src/components/Scene.jsx @@ -7,7 +7,8 @@ import { base, useAnchorShorcuts, } from "../utils"; -import { useControls } from "leva"; +import { button, useControls } from "leva"; +import { Select } from "@react-three/drei"; let t; @@ -18,8 +19,8 @@ export const Scene = () => { const brickCursorRef = useRef(); - const [{ width, depth, rotate, color, anchorX, anchorZ }, set] = useControls( - () => ({ + const [{ width, depth, rotate, color, anchorX, anchorZ, Edit }, set] = + useControls(() => ({ width: { value: 1, min: 1, @@ -46,15 +47,27 @@ export const Scene = () => { max: 2, step: 1, }, - }) - ); + Undo: button((get) => { + undoAddedBrick(); + }), + Edit: false, + })); useAnchorShorcuts(anchorX, anchorZ, set); + function undoAddedBrick() { + setBricks((prevBricks) => { + prevBricks.pop(); + return [...prevBricks]; + }); + } + const addBrick = (e) => { e.stopPropagation(); - if (!e.face || !e.face.normal || !e.point) return; + if (Edit) return; + + if (!e.face?.normal || !e.point) return; if (!brickCursorRef.current) return; @@ -74,8 +87,6 @@ export const Scene = () => { const collision = boundingBoxOfBrickToBeAdded.intersectsBox(brickBoundingBox); - console.log(collision, brickBoundingBox, boundingBoxOfBrickToBeAdded); - if (collision) { const dx = Math.abs( brickBoundingBox.max.x - boundingBoxOfBrickToBeAdded.max.x @@ -115,6 +126,7 @@ export const Scene = () => { const setBrickCursorPosition = (e) => { e.stopPropagation(); + if (Edit) return; if (!brickCursorRef.current) return; const { height } = getMeasurementsFromDimensions({ @@ -175,26 +187,29 @@ export const Scene = () => { return ( <> - - {bricks.map((b, i) => { - return ( - - ); - })} + + {}, mouseMove = () => {} }) => { + const [workspaceSize, setWorkspaceSize] = useState(1500); + + const adjustWorkspaceSize = (e) => { + if ( + Math.abs(e.point.x) * 2 > workspaceSize || + Math.abs(e.point.z) * 2 > workspaceSize + ) { + setWorkspaceSize( + (workspaceSize) => workspaceSize + gridSize * extraOffset + ); + } else { + // if ( + // Math.max(Math.abs(e.point.x), Math.abs(e.point.z)) * 2 < + // workspaceSize + // ) { + // setWorkspaceSize((workspaceSize) => { + // if (workspaceSize <= 1500) { + // return workspaceSize; + // } else { + // return workspaceSize - gridSize * extraOffset; + // } + // }); + // } + } + }; + return ( <> - + { + mouseMove(e); + adjustWorkspaceSize(e); + }} > - - + + + + + + + + + + + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} {/*