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);
+ }}
>
-
-
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* */}
{/*