added : undo button and selection
This commit is contained in:
bhushan6
Generated
+111
-35
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
+1
-1
@@ -20,7 +20,7 @@ const LegoRoom = () => {
|
||||
near: 0.1,
|
||||
far: 20000,
|
||||
}}
|
||||
colorManagement
|
||||
colormanagement
|
||||
shadows
|
||||
dpr={Math.min(2, window.devicePixelRatio)}
|
||||
>
|
||||
|
||||
+48
-10
@@ -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 (
|
||||
<>
|
||||
<group
|
||||
@@ -85,12 +110,13 @@ export const Brick = ({
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
userData={{ uID }}
|
||||
position={[
|
||||
(offsetX * width) / dimensions.x,
|
||||
0.5,
|
||||
(offsetZ * depth) / dimensions.z,
|
||||
]}
|
||||
onClick={onClick}
|
||||
// onClick={onClick}
|
||||
geometry={brickGeometry}
|
||||
onPointerMove={mouseMove}
|
||||
>
|
||||
@@ -100,6 +126,18 @@ export const Brick = ({
|
||||
roughness={0.5}
|
||||
/>
|
||||
</mesh>
|
||||
{isSelected && (
|
||||
<mesh
|
||||
position={[
|
||||
(offsetX * width) / dimensions.x,
|
||||
0.5,
|
||||
(offsetZ * depth) / dimensions.z,
|
||||
]}
|
||||
geometry={outlineGeometry}
|
||||
>
|
||||
<meshBasicMaterial color={"white"} side={BackSide} />
|
||||
</mesh>
|
||||
)}
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -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}
|
||||
>
|
||||
<mesh
|
||||
position={[
|
||||
|
||||
@@ -11,6 +11,7 @@ export const InfoPanel = () => {
|
||||
fontFamily: "sans-serif",
|
||||
padding: "10px",
|
||||
width: "200px",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
Use panel on right top corner to customize the Lego Bricks Properties Use
|
||||
|
||||
+11
-41
@@ -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 (
|
||||
<>
|
||||
<spotLight
|
||||
position={[-1000, 1500, -500]}
|
||||
intensity={0.9}
|
||||
penumbra={1}
|
||||
shadow-mapSize={[512, 512]}
|
||||
<hemisphereLight intensity={0.2} />
|
||||
<directionalLight
|
||||
position={[20, 30, 10]}
|
||||
shadow-mapSize={2048}
|
||||
shadow-bias={-0.001}
|
||||
castShadow
|
||||
/>
|
||||
<ambientLight intensity={0.4} />
|
||||
>
|
||||
<orthographicCamera
|
||||
attach="shadow-camera"
|
||||
args={[-50, 50, 50, -50, 10, 1000]}
|
||||
/>
|
||||
</directionalLight>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
+40
-25
@@ -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 (
|
||||
<>
|
||||
<color attach="background" args={["#ffffff"]} />
|
||||
{bricks.map((b, i) => {
|
||||
return (
|
||||
<Brick
|
||||
key={b.uID}
|
||||
dimensions={b.dimensions}
|
||||
intersect={b.intersect}
|
||||
onClick={onClick}
|
||||
rotation={b.rotation}
|
||||
bricksBoundBox={bricksBoundBox}
|
||||
uID={b.uID}
|
||||
mouseMove={mouseMove}
|
||||
color={b.color}
|
||||
translation={b.translation}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<color attach="background" args={["#202025"]} />
|
||||
<Select box multiple onChange={console.log}>
|
||||
{bricks.map((b, i) => {
|
||||
return (
|
||||
<Brick
|
||||
key={b.uID}
|
||||
dimensions={b.dimensions}
|
||||
intersect={b.intersect}
|
||||
onClick={onClick}
|
||||
rotation={b.rotation}
|
||||
bricksBoundBox={bricksBoundBox}
|
||||
uID={b.uID}
|
||||
mouseMove={mouseMove}
|
||||
color={b.color}
|
||||
translation={b.translation}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
<Lights />
|
||||
<Workspace onClick={onClick} mouseMove={mouseMove} />
|
||||
<BrickCursor
|
||||
visible={Edit ? false : true}
|
||||
ref={brickCursorRef}
|
||||
rotation={rotate ? Math.PI / 2 : 0}
|
||||
dimensions={{ x: width, z: depth }}
|
||||
|
||||
@@ -1,17 +1,92 @@
|
||||
import React from "react";
|
||||
import { Environment, Lightformer } from "@react-three/drei";
|
||||
import React, { useState } from "react";
|
||||
|
||||
const gridSize = 60;
|
||||
const extraOffset = 4;
|
||||
|
||||
export const Workspace = ({ onClick = () => {}, 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 (
|
||||
<>
|
||||
<gridHelper args={[1500, 60]} />
|
||||
<gridHelper args={[workspaceSize, gridSize]} />
|
||||
<mesh
|
||||
rotation={[-Math.PI / 2, 0, 0]}
|
||||
onClick={onClick}
|
||||
onPointerMove={mouseMove}
|
||||
onPointerMove={(e) => {
|
||||
mouseMove(e);
|
||||
adjustWorkspaceSize(e);
|
||||
}}
|
||||
>
|
||||
<planeGeometry args={[1500, 1500]} />
|
||||
<meshBasicMaterial visible={false} />
|
||||
<planeGeometry args={[workspaceSize, workspaceSize]} />
|
||||
<meshBasicMaterial
|
||||
visible={false}
|
||||
color={"red"}
|
||||
opacity={0.4}
|
||||
transparent
|
||||
/>
|
||||
</mesh>
|
||||
<Environment resolution={256}>
|
||||
<group rotation={[-Math.PI / 4, 0, 0]}>
|
||||
<Lightformer
|
||||
form="ring"
|
||||
intensity={1}
|
||||
rotation-x={Math.PI / 2}
|
||||
position={[0, 5, -9]}
|
||||
scale={[2, 100, 1]}
|
||||
/>
|
||||
<Lightformer
|
||||
form="ring"
|
||||
intensity={1}
|
||||
rotation-y={Math.PI / 2}
|
||||
position={[-5, 1, -1]}
|
||||
scale={[100, 2, 1]}
|
||||
/>
|
||||
<Lightformer
|
||||
form="ring"
|
||||
intensity={0.5}
|
||||
rotation-y={Math.PI / 2}
|
||||
position={[-5, -1, -1]}
|
||||
scale={[10, 2, 1]}
|
||||
/>
|
||||
<Lightformer
|
||||
form="rect"
|
||||
intensity={0.5}
|
||||
rotation-y={-Math.PI / 2}
|
||||
position={[10, 1, 0]}
|
||||
scale={[100, 10, 1]}
|
||||
/>
|
||||
</group>
|
||||
</Environment>
|
||||
{/* <EffectComposer disableNormalPass multisampling={0}> */}
|
||||
{/* <N8AO color="red" aoRadius={2} intensity={1} /> */}
|
||||
{/* <SSAO /> */}
|
||||
{/* </EffectComposer> */}
|
||||
{/* <BakeShadows /> */}
|
||||
{/* <mesh
|
||||
rotation={[-0.5 * Math.PI, 0, 0]}
|
||||
position={[0, -1, 0]}
|
||||
|
||||
@@ -18,7 +18,13 @@ export function mergeMeshes(geometries) {
|
||||
return mergeBufferGeometries(geometries);
|
||||
}
|
||||
|
||||
export function createGeometry({ width, height, depth, dimensions }) {
|
||||
export function createGeometry({
|
||||
width,
|
||||
height,
|
||||
depth,
|
||||
dimensions,
|
||||
knobDim = knobSize,
|
||||
}) {
|
||||
let geometries = [];
|
||||
const cubeGeo = new BoxGeometry(width - 0.1, height - 0.1, depth - 0.1);
|
||||
|
||||
@@ -26,7 +32,7 @@ export function createGeometry({ width, height, depth, dimensions }) {
|
||||
|
||||
for (let i = 0; i < dimensions.x; i++) {
|
||||
for (let j = 0; j < dimensions.z; j++) {
|
||||
const cylinder = new CylinderGeometry(knobSize, knobSize, knobSize, 20);
|
||||
const cylinder = new CylinderGeometry(knobDim, knobDim, knobDim, 20);
|
||||
const x = base * i - ((dimensions.x - 1) * base) / 2;
|
||||
const y = base / 1.5;
|
||||
const z = base * j - ((dimensions.z - 1) * base) / 2;
|
||||
|
||||
Reference in New Issue
Block a user