Merge remote-tracking branch 'origin/simulation-agv' into simulation
This commit is contained in:
commit
b71fdbddbb
3
app/.env
3
app/.env
|
@ -8,7 +8,8 @@ REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
|
||||||
REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
|
REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
|
||||||
|
|
||||||
# Base URL for the server marketplace API.
|
# Base URL for the server marketplace API.
|
||||||
REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011
|
# REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011
|
||||||
|
REACT_APP_SERVER_MARKETPLACE_URL=192.168.0.111:3501
|
||||||
|
|
||||||
# base url for IoT socket server
|
# base url for IoT socket server
|
||||||
REACT_APP_IOT_SOCKET_SERVER_URL =185.100.212.76:5010
|
REACT_APP_IOT_SOCKET_SERVER_URL =185.100.212.76:5010
|
||||||
|
|
|
@ -1,20 +1,39 @@
|
||||||
import React, { useState } from "react";
|
import React, { useEffect, useMemo, useState } from "react";
|
||||||
import Search from "../../ui/inputs/Search";
|
import Search from "../../ui/inputs/Search";
|
||||||
import vehicle from "../../../assets/image/vehicles.png";
|
import vehicle from "../../../assets/image/vehicles.png";
|
||||||
import workStation from "../../../assets/image/workStation.png";
|
import workStation from "../../../assets/image/workStation.png";
|
||||||
import machines from "../../../assets/image/machines.png";
|
import machines from "../../../assets/image/machines.png";
|
||||||
import feneration from "../../../assets/image/feneration.png";
|
import feneration from "../../../assets/image/feneration.png";
|
||||||
import worker from "../../../assets/image/worker.png";
|
import worker from "../../../assets/image/worker.png";
|
||||||
|
import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
|
||||||
|
import arch from "../../../assets/gltf-glb/arch.glb";
|
||||||
|
import door from "../../../assets/gltf-glb/door.glb";
|
||||||
|
import window from "../../../assets/gltf-glb/window.glb";
|
||||||
|
interface AssetProp {
|
||||||
|
filename: string;
|
||||||
|
thumbnail?: string;
|
||||||
|
category: string;
|
||||||
|
description?: string;
|
||||||
|
tags?: string;
|
||||||
|
url?: String;
|
||||||
|
uploadDate?: number;
|
||||||
|
isArchieve?: boolean;
|
||||||
|
animated?: boolean;
|
||||||
|
price?: number;
|
||||||
|
CreatedBy?: String;
|
||||||
|
}
|
||||||
const Assets: React.FC = () => {
|
const Assets: React.FC = () => {
|
||||||
const [searchValue, setSearchValue] = useState<string>("");
|
const [searchValue, setSearchValue] = useState<string>("");
|
||||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||||
|
const [filteredAsset, setFilteredAsset] = useState<AssetProp[]>([]);
|
||||||
|
|
||||||
const handleSearchChange = (value: string) => {
|
const handleSearchChange = (value: string) => {
|
||||||
setSearchValue(value);
|
setSearchValue(value);
|
||||||
setSelectedCategory(null); // Reset selected category when search changes
|
setSelectedCategory(null); // Reset selected category when search changes
|
||||||
};
|
};
|
||||||
|
|
||||||
const categoryList = [
|
const categoryList = useMemo(
|
||||||
|
() => [
|
||||||
{
|
{
|
||||||
assetName: "Doors",
|
assetName: "Doors",
|
||||||
assetImage: "",
|
assetImage: "",
|
||||||
|
@ -33,73 +52,44 @@ const Assets: React.FC = () => {
|
||||||
category: "Feneration",
|
category: "Feneration",
|
||||||
categoryImage: feneration,
|
categoryImage: feneration,
|
||||||
},
|
},
|
||||||
{
|
{ category: "Vehicles", categoryImage: vehicle },
|
||||||
assetName: "Forklift",
|
{ category: "Workstation", categoryImage: workStation },
|
||||||
assetImage: "",
|
{ category: "Machines", categoryImage: machines },
|
||||||
category: "Vehicles",
|
{ category: "Workers", categoryImage: worker },
|
||||||
categoryImage: vehicle,
|
],
|
||||||
},
|
[]
|
||||||
{
|
|
||||||
assetName: "AGV",
|
|
||||||
assetImage: "",
|
|
||||||
category: "Vehicles",
|
|
||||||
categoryImage: vehicle,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
assetName: "Pallet",
|
|
||||||
assetImage: "",
|
|
||||||
category: "Workstation",
|
|
||||||
categoryImage: workStation,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
assetName: "Controller",
|
|
||||||
assetImage: "",
|
|
||||||
category: "Workstation",
|
|
||||||
categoryImage: workStation,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
assetName: "Conveyor",
|
|
||||||
assetImage: "",
|
|
||||||
category: "Workstation",
|
|
||||||
categoryImage: workStation,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
assetName: "VMC",
|
|
||||||
assetImage: "",
|
|
||||||
category: "Machines",
|
|
||||||
categoryImage: machines,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
assetName: "CMC",
|
|
||||||
assetImage: "",
|
|
||||||
category: "Machines",
|
|
||||||
categoryImage: machines,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
assetName: "Male Worker",
|
|
||||||
assetImage: "",
|
|
||||||
category: "Workers",
|
|
||||||
categoryImage: worker,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
assetName: "Female Worker",
|
|
||||||
assetImage: "",
|
|
||||||
category: "Workers",
|
|
||||||
categoryImage: worker,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// Get unique categories
|
|
||||||
const uniqueCategories = Array.from(
|
|
||||||
new Set(categoryList.map((asset) => asset.category))
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// Filter assets based on the selected category
|
const fetchCategoryAssets = async (asset: any) => {
|
||||||
const filteredAssets =
|
setSelectedCategory(asset);
|
||||||
selectedCategory !== null
|
if (asset === "Feneration") {
|
||||||
? categoryList.filter((asset) => asset.category === selectedCategory)
|
const localAssets: AssetProp[] = [
|
||||||
: [];
|
{
|
||||||
|
filename: "arch",
|
||||||
|
category: "Feneration",
|
||||||
|
url: arch,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
filename: "door",
|
||||||
|
category: "Feneration",
|
||||||
|
url: door,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
filename: "window",
|
||||||
|
category: "Feneration",
|
||||||
|
url: window,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
setFilteredAsset(localAssets);
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
const res = await getCategoryAsset(asset);
|
||||||
|
setFilteredAsset(res || []); // Ensure it's always an array
|
||||||
|
} catch (error) {}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {}, [filteredAsset]);
|
||||||
return (
|
return (
|
||||||
<div className="assets-container">
|
<div className="assets-container">
|
||||||
<Search onChange={handleSearchChange} />
|
<Search onChange={handleSearchChange} />
|
||||||
|
@ -118,14 +108,25 @@ const Assets: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
<h2>{selectedCategory}</h2>
|
<h2>{selectedCategory}</h2>
|
||||||
<div className="assets-container">
|
<div className="assets-container">
|
||||||
{filteredAssets.map((asset, index) => (
|
{filteredAsset &&
|
||||||
|
filteredAsset?.map((asset: any, index: number) => (
|
||||||
<div key={index} className="assets">
|
<div key={index} className="assets">
|
||||||
|
{asset?.thumbnail && (
|
||||||
<img
|
<img
|
||||||
src={asset.assetImage}
|
src={asset?.thumbnail}
|
||||||
alt={asset.assetName}
|
alt={asset.filename}
|
||||||
className="asset-image"
|
className="asset-image"
|
||||||
/>
|
/>
|
||||||
<div className="asset-name">{asset.assetName}</div>
|
)}
|
||||||
|
<div className="asset-name">
|
||||||
|
{asset.filename
|
||||||
|
.split("_")
|
||||||
|
.map(
|
||||||
|
(word: any) =>
|
||||||
|
word.charAt(0).toUpperCase() + word.slice(1)
|
||||||
|
)
|
||||||
|
.join(" ")}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
@ -134,7 +135,9 @@ const Assets: React.FC = () => {
|
||||||
<div className="assets-wrapper">
|
<div className="assets-wrapper">
|
||||||
<h2>Categories</h2>
|
<h2>Categories</h2>
|
||||||
<div className="categories-container">
|
<div className="categories-container">
|
||||||
{uniqueCategories.map((category, index) => {
|
{Array.from(
|
||||||
|
new Set(categoryList.map((asset) => asset.category))
|
||||||
|
).map((category, index) => {
|
||||||
const categoryInfo = categoryList.find(
|
const categoryInfo = categoryList.find(
|
||||||
(asset) => asset.category === category
|
(asset) => asset.category === category
|
||||||
);
|
);
|
||||||
|
@ -142,7 +145,7 @@ const Assets: React.FC = () => {
|
||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
className="category"
|
className="category"
|
||||||
onClick={() => setSelectedCategory(category)}
|
onClick={() => fetchCategoryAssets(category)}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={categoryInfo?.categoryImage || ""}
|
src={categoryInfo?.categoryImage || ""}
|
||||||
|
@ -161,4 +164,3 @@ const Assets: React.FC = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Assets;
|
export default Assets;
|
||||||
|
|
||||||
|
|
|
@ -27,7 +27,14 @@ const RenderAnalysisInputs: React.FC<InputRendererProps> = ({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (preset.type === "range") {
|
if (preset.type === "range") {
|
||||||
return <InputRange key={index} label={preset.inputs.label} />;
|
return (
|
||||||
|
<InputRange
|
||||||
|
key={index}
|
||||||
|
label={preset.inputs.label}
|
||||||
|
min={0}
|
||||||
|
max={0}
|
||||||
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -17,12 +17,6 @@ const AssetProperties: React.FC = () => {
|
||||||
const [userData, setUserData] = useState<UserData[]>([]); // State to track user data
|
const [userData, setUserData] = useState<UserData[]>([]); // State to track user data
|
||||||
const [nextId, setNextId] = useState(1); // Unique ID for new entries
|
const [nextId, setNextId] = useState(1); // Unique ID for new entries
|
||||||
const { selectedFloorItem } = useselectedFloorItem();
|
const { selectedFloorItem } = useselectedFloorItem();
|
||||||
let xValue = selectedFloorItem.position.x;
|
|
||||||
let zValue = selectedFloorItem.position.z;
|
|
||||||
let rotationRad = selectedFloorItem.rotation.y;
|
|
||||||
let rotationDeg = THREE.MathUtils.radToDeg(rotationRad);
|
|
||||||
|
|
||||||
// useEffect(() => {}, [selectedFloorItem]);
|
|
||||||
// Function to handle adding new user data
|
// Function to handle adding new user data
|
||||||
const handleAddUserData = () => {
|
const handleAddUserData = () => {
|
||||||
const newUserData: UserData = {
|
const newUserData: UserData = {
|
||||||
|
@ -57,10 +51,15 @@ const AssetProperties: React.FC = () => {
|
||||||
|
|
||||||
<PositionInput
|
<PositionInput
|
||||||
onChange={() => {}}
|
onChange={() => {}}
|
||||||
value1={xValue.toFixed(5)}
|
value1={selectedFloorItem.position.x.toFixed(5)}
|
||||||
value2={zValue.toFixed(5)}
|
value2={selectedFloorItem.position.z.toFixed(5)}
|
||||||
|
/>
|
||||||
|
<RotationInput
|
||||||
|
onChange={() => {}}
|
||||||
|
value={parseFloat(
|
||||||
|
THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5)
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
<RotationInput onChange={() => {}} value={rotationDeg} />
|
|
||||||
|
|
||||||
<div className="split"></div>
|
<div className="split"></div>
|
||||||
|
|
||||||
|
|
|
@ -16,7 +16,7 @@ import {
|
||||||
useWallVisibility,
|
useWallVisibility,
|
||||||
} from "../../../../store/store";
|
} from "../../../../store/store";
|
||||||
import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
|
import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
|
||||||
|
import * as CONSTANTS from "../../../../types/world/worldConstants";
|
||||||
const GlobalProperties: React.FC = () => {
|
const GlobalProperties: React.FC = () => {
|
||||||
const { toggleView, setToggleView } = useToggleView();
|
const { toggleView, setToggleView } = useToggleView();
|
||||||
const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
|
const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
|
||||||
|
@ -29,18 +29,20 @@ const GlobalProperties: React.FC = () => {
|
||||||
const { renderDistance, setRenderDistance } = useRenderDistance();
|
const { renderDistance, setRenderDistance } = useRenderDistance();
|
||||||
const { socket } = useSocketStore();
|
const { socket } = useSocketStore();
|
||||||
const [limitDistance, setLimitDistance] = useState(false);
|
const [limitDistance, setLimitDistance] = useState(false);
|
||||||
const [distance, setDistance] = useState<number>(5);
|
const [distance, setDistance] = useState<number>(30);
|
||||||
|
|
||||||
const [limitGridDistance, setLimitGridDistance] = useState(false);
|
const [limitGridDistance, setLimitGridDistance] = useState(false);
|
||||||
const [gridDistance, setGridDistance] = useState<number>(5);
|
const [gridDistance, setGridDistance] = useState<number>(5);
|
||||||
|
|
||||||
function optimizeScene() {
|
function optimizeScene() {
|
||||||
setLimitDistance(true);
|
setLimitDistance(true);
|
||||||
setDistance(5);
|
setDistance(30);
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateDistance(value: number) {
|
function updateDistance(value: number) {
|
||||||
|
console.log("value: ", value);
|
||||||
setDistance(value);
|
setDistance(value);
|
||||||
|
setRenderDistance(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateGridDistance(value: number) {
|
function updateGridDistance(value: number) {
|
||||||
|
@ -134,6 +136,15 @@ const GlobalProperties: React.FC = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// function changeRenderDistance(e: any) {
|
||||||
|
// if (parseInt(e.target.value) < 20) {
|
||||||
|
// setRenderDistance(20);
|
||||||
|
// } else if (parseInt(e.target.value) > 75) {
|
||||||
|
// setRenderDistance(75);
|
||||||
|
// } else {
|
||||||
|
// setRenderDistance(parseInt(e.target.value));
|
||||||
|
// }
|
||||||
|
// }
|
||||||
return (
|
return (
|
||||||
<div className="global-properties-container">
|
<div className="global-properties-container">
|
||||||
<div className="header">Environment</div>
|
<div className="header">Environment</div>
|
||||||
|
@ -169,7 +180,7 @@ const GlobalProperties: React.FC = () => {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="split"></div>
|
<div className="split"></div>
|
||||||
|
{/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */}
|
||||||
<InputToggle
|
<InputToggle
|
||||||
inputKey="4"
|
inputKey="4"
|
||||||
label="Limit Render Distance"
|
label="Limit Render Distance"
|
||||||
|
@ -183,6 +194,8 @@ const GlobalProperties: React.FC = () => {
|
||||||
disabled={!limitDistance}
|
disabled={!limitDistance}
|
||||||
value={distance}
|
value={distance}
|
||||||
key={"5"}
|
key={"5"}
|
||||||
|
min={CONSTANTS.distanceConfig.minDistance}
|
||||||
|
max={CONSTANTS.distanceConfig.maxDistance}
|
||||||
onChange={(value: number) => updateDistance(value)}
|
onChange={(value: number) => updateDistance(value)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
|
@ -68,7 +68,7 @@ const Tools: React.FC = () => {
|
||||||
: true
|
: true
|
||||||
);
|
);
|
||||||
}, []);
|
}, []);
|
||||||
|
useEffect(() => {}, [activeModule]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setActiveTool(activeSubTool);
|
setActiveTool(activeSubTool);
|
||||||
setActiveSubTool(activeSubTool);
|
setActiveSubTool(activeSubTool);
|
||||||
|
@ -433,8 +433,6 @@ const Tools: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{activeModule === "builder" && (
|
|
||||||
<>
|
|
||||||
<div className="split"></div>
|
<div className="split"></div>
|
||||||
<div
|
<div
|
||||||
className={`toggle-threed-button${
|
className={`toggle-threed-button${
|
||||||
|
@ -442,19 +440,13 @@ const Tools: React.FC = () => {
|
||||||
}`}
|
}`}
|
||||||
onClick={toggleSwitch}
|
onClick={toggleSwitch}
|
||||||
>
|
>
|
||||||
<div
|
<div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
|
||||||
className={`toggle-option${!toggleThreeD ? " active" : ""}`}
|
|
||||||
>
|
|
||||||
2d
|
2d
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
|
||||||
className={`toggle-option${toggleThreeD ? " active" : ""}`}
|
|
||||||
>
|
|
||||||
3d
|
3d
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
|
import * as CONSTANTS from "../../../types/world/worldConstants";
|
||||||
interface InputToggleProps {
|
interface InputToggleProps {
|
||||||
label: string; // Represents the toggle state (on/off)
|
label: string; // Represents the toggle state (on/off)
|
||||||
min?: number;
|
min?: number;
|
||||||
|
@ -14,8 +14,8 @@ const InputRange: React.FC<InputToggleProps> = ({
|
||||||
label,
|
label,
|
||||||
onClick,
|
onClick,
|
||||||
onChange,
|
onChange,
|
||||||
min = 0,
|
min,
|
||||||
max = 10,
|
max,
|
||||||
disabled,
|
disabled,
|
||||||
value = 5,
|
value = 5,
|
||||||
}) => {
|
}) => {
|
||||||
|
@ -23,6 +23,7 @@ const InputRange: React.FC<InputToggleProps> = ({
|
||||||
|
|
||||||
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
|
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||||
const newValue = parseInt(e.target.value); // Parse the value to an integer
|
const newValue = parseInt(e.target.value); // Parse the value to an integer
|
||||||
|
|
||||||
setRangeValue(newValue); // Update the local state
|
setRangeValue(newValue); // Update the local state
|
||||||
|
|
||||||
if (onChange) {
|
if (onChange) {
|
||||||
|
|
|
@ -94,7 +94,7 @@ const AssetPreview: React.FC<AssetPreviewProps> = ({
|
||||||
<div className="asset-details">
|
<div className="asset-details">
|
||||||
<div className="asset-name">{selectedCard.assetName}</div>
|
<div className="asset-name">{selectedCard.assetName}</div>
|
||||||
<div className="asset-description">
|
<div className="asset-description">
|
||||||
{`${selectedCard.assetName} is used in factories to improve efficiency and production speed It is designed to handle heavy workloads and perform repetitive tasks with precision. Many industries rely on this machine to manufacture products quickly and accurately. It reduces human effort and minimizes errors in the production process. Regular maintenance is required to keep the machine in good working condition.With advanced technology, this machine continues to enhance industrial operations and increase productivity.`}
|
{`${selectedCard.description}`}
|
||||||
</div>
|
</div>
|
||||||
<div className="asset-review">
|
<div className="asset-review">
|
||||||
<div className="asset-rating">
|
<div className="asset-rating">
|
||||||
|
|
|
@ -14,6 +14,7 @@ interface ModelData {
|
||||||
thumbnail: string;
|
thumbnail: string;
|
||||||
uploadDate: number;
|
uploadDate: number;
|
||||||
_id: string;
|
_id: string;
|
||||||
|
price: number;
|
||||||
}
|
}
|
||||||
interface ModelsProps {
|
interface ModelsProps {
|
||||||
models: ModelData[];
|
models: ModelData[];
|
||||||
|
@ -50,7 +51,7 @@ const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
|
||||||
key={assetDetail._id}
|
key={assetDetail._id}
|
||||||
assetName={assetDetail?.filename}
|
assetName={assetDetail?.filename}
|
||||||
uploadedOn={assetDetail.uploadDate}
|
uploadedOn={assetDetail.uploadDate}
|
||||||
price={36500}
|
price={assetDetail?.price}
|
||||||
rating={4.5}
|
rating={4.5}
|
||||||
views={800}
|
views={800}
|
||||||
onSelectCard={handleCardSelect}
|
onSelectCard={handleCardSelect}
|
||||||
|
|
|
@ -17,6 +17,7 @@ interface ModelData {
|
||||||
thumbnail: string;
|
thumbnail: string;
|
||||||
uploadDate: number;
|
uploadDate: number;
|
||||||
_id: string;
|
_id: string;
|
||||||
|
price: number;
|
||||||
}
|
}
|
||||||
interface ModelsProps {
|
interface ModelsProps {
|
||||||
models: ModelData[];
|
models: ModelData[];
|
||||||
|
|
|
@ -15,6 +15,7 @@ interface ModelData {
|
||||||
thumbnail: string;
|
thumbnail: string;
|
||||||
uploadDate: number;
|
uploadDate: number;
|
||||||
_id: string;
|
_id: string;
|
||||||
|
price: number;
|
||||||
}
|
}
|
||||||
const MarketPlace = () => {
|
const MarketPlace = () => {
|
||||||
const [models, setModels] = useState<ModelData[]>([]);
|
const [models, setModels] = useState<ModelData[]>([]);
|
||||||
|
@ -24,6 +25,7 @@ const MarketPlace = () => {
|
||||||
const filteredAssets = async () => {
|
const filteredAssets = async () => {
|
||||||
try {
|
try {
|
||||||
const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6");
|
const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6");
|
||||||
|
|
||||||
setModels(filt.items);
|
setModels(filt.items);
|
||||||
setFilteredModels(filt.items);
|
setFilteredModels(filt.items);
|
||||||
} catch {}
|
} catch {}
|
||||||
|
|
|
@ -1,9 +1,16 @@
|
||||||
import * as THREE from 'three'
|
import * as THREE from "three";
|
||||||
import { EffectComposer, N8AO, Outline } from '@react-three/postprocessing'
|
import { EffectComposer, N8AO, Outline } from "@react-three/postprocessing";
|
||||||
import { BlendFunction } from 'postprocessing'
|
import { BlendFunction } from "postprocessing";
|
||||||
import { useDeletableFloorItem, useSelectedActionSphere, useSelectedPath, useSelectedWallItem, useselectedFloorItem } from '../../../store/store';
|
import {
|
||||||
import * as Types from '../../../types/world/worldTypes'
|
useDeletableFloorItem,
|
||||||
import * as CONSTANTS from '../../../types/world/worldConstants';
|
useSelectedActionSphere,
|
||||||
|
useSelectedPath,
|
||||||
|
useSelectedWallItem,
|
||||||
|
useselectedFloorItem,
|
||||||
|
} from "../../../store/store";
|
||||||
|
import * as Types from "../../../types/world/worldTypes";
|
||||||
|
import * as CONSTANTS from "../../../types/world/worldConstants";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
|
||||||
export default function PostProcessing() {
|
export default function PostProcessing() {
|
||||||
const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
|
const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
|
||||||
|
@ -14,7 +21,7 @@ export default function PostProcessing() {
|
||||||
|
|
||||||
function flattenChildren(children: any[]) {
|
function flattenChildren(children: any[]) {
|
||||||
const allChildren: any[] = [];
|
const allChildren: any[] = [];
|
||||||
children.forEach(child => {
|
children.forEach((child) => {
|
||||||
allChildren.push(child);
|
allChildren.push(child);
|
||||||
if (child.children && child.children.length > 0) {
|
if (child.children && child.children.length > 0) {
|
||||||
allChildren.push(...flattenChildren(child.children));
|
allChildren.push(...flattenChildren(child.children));
|
||||||
|
@ -26,8 +33,16 @@ export default function PostProcessing() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<EffectComposer autoClear={false}>
|
<EffectComposer autoClear={false}>
|
||||||
<N8AO color="black" aoRadius={20} intensity={7} distanceFalloff={4} aoSamples={32} denoiseRadius={6} denoiseSamples={16} />
|
<N8AO
|
||||||
{deletableFloorItem &&
|
color="black"
|
||||||
|
aoRadius={20}
|
||||||
|
intensity={7}
|
||||||
|
distanceFalloff={4}
|
||||||
|
aoSamples={32}
|
||||||
|
denoiseRadius={6}
|
||||||
|
denoiseSamples={16}
|
||||||
|
/>
|
||||||
|
{deletableFloorItem && (
|
||||||
<Outline
|
<Outline
|
||||||
selection={flattenChildren(deletableFloorItem.children)}
|
selection={flattenChildren(deletableFloorItem.children)}
|
||||||
selectionLayer={10}
|
selectionLayer={10}
|
||||||
|
@ -41,14 +56,12 @@ export default function PostProcessing() {
|
||||||
blur={true}
|
blur={true}
|
||||||
xRay={true}
|
xRay={true}
|
||||||
/>
|
/>
|
||||||
}
|
)}
|
||||||
{selectedWallItem &&
|
{selectedWallItem && (
|
||||||
<Outline
|
<Outline
|
||||||
selection={
|
selection={selectedWallItem.children[1].children[0].children.filter(
|
||||||
selectedWallItem.children[1].children[0].children.filter(
|
|
||||||
(child: Types.Mesh) => child.name !== "CSG_REF"
|
(child: Types.Mesh) => child.name !== "CSG_REF"
|
||||||
)
|
)}
|
||||||
}
|
|
||||||
selectionLayer={10}
|
selectionLayer={10}
|
||||||
width={3000}
|
width={3000}
|
||||||
blendFunction={BlendFunction.ALPHA}
|
blendFunction={BlendFunction.ALPHA}
|
||||||
|
@ -59,8 +72,9 @@ export default function PostProcessing() {
|
||||||
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
||||||
blur={true}
|
blur={true}
|
||||||
xRay={true}
|
xRay={true}
|
||||||
/>}
|
/>
|
||||||
{selectedFloorItem &&
|
)}
|
||||||
|
{selectedFloorItem && (
|
||||||
<Outline
|
<Outline
|
||||||
selection={flattenChildren(selectedFloorItem.children)}
|
selection={flattenChildren(selectedFloorItem.children)}
|
||||||
selectionLayer={10}
|
selectionLayer={10}
|
||||||
|
@ -74,8 +88,8 @@ export default function PostProcessing() {
|
||||||
blur={true}
|
blur={true}
|
||||||
xRay={true}
|
xRay={true}
|
||||||
/>
|
/>
|
||||||
}
|
)}
|
||||||
{selectedActionSphere &&
|
{selectedActionSphere && (
|
||||||
<Outline
|
<Outline
|
||||||
selection={[selectedActionSphere.point]}
|
selection={[selectedActionSphere.point]}
|
||||||
selectionLayer={10}
|
selectionLayer={10}
|
||||||
|
@ -89,8 +103,8 @@ export default function PostProcessing() {
|
||||||
blur={true}
|
blur={true}
|
||||||
xRay={true}
|
xRay={true}
|
||||||
/>
|
/>
|
||||||
}
|
)}
|
||||||
{selectedPath &&
|
{selectedPath && (
|
||||||
<Outline
|
<Outline
|
||||||
selection={flattenChildren(selectedPath.group.children)}
|
selection={flattenChildren(selectedPath.group.children)}
|
||||||
selectionLayer={10}
|
selectionLayer={10}
|
||||||
|
@ -104,8 +118,8 @@ export default function PostProcessing() {
|
||||||
blur={true}
|
blur={true}
|
||||||
xRay={true}
|
xRay={true}
|
||||||
/>
|
/>
|
||||||
}
|
)}
|
||||||
</EffectComposer>
|
</EffectComposer>
|
||||||
</>
|
</>
|
||||||
)
|
);
|
||||||
}
|
}
|
|
@ -0,0 +1,19 @@
|
||||||
|
let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
|
||||||
|
export const getCategoryAsset = async (categoryName: any) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`${BackEnd_url}/api/v2/getCatagoryAssets/${categoryName}`,
|
||||||
|
{
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
return result;
|
||||||
|
} catch (error: any) {
|
||||||
|
throw new Error(error.message);
|
||||||
|
}
|
||||||
|
};
|
|
@ -1029,10 +1029,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.asset-image {
|
.asset-image {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
// top: 50%;
|
||||||
right: 5px;
|
// right: 5px;
|
||||||
transform: translate(0, -50%);
|
// transform: translate(0, -50%);
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -56,7 +56,6 @@ export type ThreeDimension = {
|
||||||
rightMouse: number;
|
rightMouse: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export type GridConfig = {
|
export type GridConfig = {
|
||||||
size: number;
|
size: number;
|
||||||
divisions: number;
|
divisions: number;
|
||||||
|
@ -65,7 +64,7 @@ export type GridConfig = {
|
||||||
|
|
||||||
position2D: [x: number, y: number, z: number];
|
position2D: [x: number, y: number, z: number];
|
||||||
position3D: [x: number, y: number, z: number];
|
position3D: [x: number, y: number, z: number];
|
||||||
}
|
};
|
||||||
|
|
||||||
export type PlaneConfig = {
|
export type PlaneConfig = {
|
||||||
position2D: [x: number, y: number, z: number];
|
position2D: [x: number, y: number, z: number];
|
||||||
|
@ -75,27 +74,27 @@ export type PlaneConfig = {
|
||||||
width: number;
|
width: number;
|
||||||
height: number;
|
height: number;
|
||||||
color: string;
|
color: string;
|
||||||
}
|
};
|
||||||
|
|
||||||
export type ShadowConfig = {
|
export type ShadowConfig = {
|
||||||
shadowOffset: number,
|
shadowOffset: number;
|
||||||
|
|
||||||
shadowmapSizewidth: number,
|
shadowmapSizewidth: number;
|
||||||
shadowmapSizeheight: number,
|
shadowmapSizeheight: number;
|
||||||
shadowcamerafar: number,
|
shadowcamerafar: number;
|
||||||
shadowcameranear: number,
|
shadowcameranear: number;
|
||||||
shadowcameratop: number,
|
shadowcameratop: number;
|
||||||
shadowcamerabottom: number,
|
shadowcamerabottom: number;
|
||||||
shadowcameraleft: number,
|
shadowcameraleft: number;
|
||||||
shadowcameraright: number,
|
shadowcameraright: number;
|
||||||
shadowbias: number,
|
shadowbias: number;
|
||||||
shadownormalBias: number,
|
shadownormalBias: number;
|
||||||
|
|
||||||
shadowMaterialPosition: [x: number, y: number, z: number],
|
shadowMaterialPosition: [x: number, y: number, z: number];
|
||||||
shadowMaterialRotation: [x: number, y: number, z: number],
|
shadowMaterialRotation: [x: number, y: number, z: number];
|
||||||
|
|
||||||
shadowMaterialOpacity: number,
|
shadowMaterialOpacity: number;
|
||||||
}
|
};
|
||||||
|
|
||||||
export type SkyConfig = {
|
export type SkyConfig = {
|
||||||
defaultTurbidity: number;
|
defaultTurbidity: number;
|
||||||
|
@ -105,12 +104,12 @@ export type SkyConfig = {
|
||||||
mieCoefficient: number;
|
mieCoefficient: number;
|
||||||
mieDirectionalG: number;
|
mieDirectionalG: number;
|
||||||
skyDistance: number;
|
skyDistance: number;
|
||||||
}
|
};
|
||||||
|
|
||||||
export type AssetConfig = {
|
export type AssetConfig = {
|
||||||
defaultScaleBeforeGsap: [number, number, number];
|
defaultScaleBeforeGsap: [number, number, number];
|
||||||
defaultScaleAfterGsap: [number, number, number];
|
defaultScaleAfterGsap: [number, number, number];
|
||||||
}
|
};
|
||||||
|
|
||||||
export type PointConfig = {
|
export type PointConfig = {
|
||||||
defaultInnerColor: string;
|
defaultInnerColor: string;
|
||||||
|
@ -124,7 +123,7 @@ export type PointConfig = {
|
||||||
zoneOuterColor: string;
|
zoneOuterColor: string;
|
||||||
|
|
||||||
snappingThreshold: number;
|
snappingThreshold: number;
|
||||||
}
|
};
|
||||||
|
|
||||||
export type LineConfig = {
|
export type LineConfig = {
|
||||||
tubularSegments: number;
|
tubularSegments: number;
|
||||||
|
@ -146,50 +145,52 @@ export type LineConfig = {
|
||||||
aisleColor: string;
|
aisleColor: string;
|
||||||
zoneColor: string;
|
zoneColor: string;
|
||||||
helperColor: string;
|
helperColor: string;
|
||||||
}
|
};
|
||||||
|
|
||||||
export type WallConfig = {
|
export type WallConfig = {
|
||||||
defaultColor: string;
|
defaultColor: string;
|
||||||
height: number;
|
height: number;
|
||||||
width: number;
|
width: number;
|
||||||
}
|
};
|
||||||
|
|
||||||
export type FloorConfig = {
|
export type FloorConfig = {
|
||||||
defaultColor: string;
|
defaultColor: string;
|
||||||
height: number;
|
height: number;
|
||||||
|
|
||||||
textureScale: number;
|
textureScale: number;
|
||||||
}
|
};
|
||||||
|
|
||||||
export type RoofConfig = {
|
export type RoofConfig = {
|
||||||
defaultColor: string;
|
defaultColor: string;
|
||||||
height: number;
|
height: number;
|
||||||
}
|
};
|
||||||
|
|
||||||
export type AisleConfig = {
|
export type AisleConfig = {
|
||||||
width: number;
|
width: number;
|
||||||
height: number;
|
height: number;
|
||||||
|
|
||||||
defaultColor: number;
|
defaultColor: number;
|
||||||
}
|
};
|
||||||
|
|
||||||
export type ZoneConfig = {
|
export type ZoneConfig = {
|
||||||
defaultColor: string;
|
defaultColor: string;
|
||||||
|
|
||||||
color: string;
|
color: string;
|
||||||
}
|
};
|
||||||
|
|
||||||
export type ColumnConfig = {
|
export type ColumnConfig = {
|
||||||
defaultColor: string;
|
defaultColor: string;
|
||||||
}
|
};
|
||||||
|
|
||||||
export type OutlineConfig = {
|
export type OutlineConfig = {
|
||||||
assetSelectColor: number;
|
assetSelectColor: number;
|
||||||
assetDeleteColor: number;
|
assetDeleteColor: number;
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export type DistanceConfig = {
|
||||||
|
minDistance: number;
|
||||||
|
maxDistance: number;
|
||||||
|
};
|
||||||
|
|
||||||
export const firstPersonControls: Controls = {
|
export const firstPersonControls: Controls = {
|
||||||
azimuthRotateSpeed: 0.3, // Speed of rotation around the azimuth axis
|
azimuthRotateSpeed: 0.3, // Speed of rotation around the azimuth axis
|
||||||
|
@ -261,7 +262,7 @@ export const gridConfig: GridConfig = {
|
||||||
|
|
||||||
position2D: [0, 0.1, 0], // Position of the grid in 2D view
|
position2D: [0, 0.1, 0], // Position of the grid in 2D view
|
||||||
position3D: [0, -0.5, 0], // Position of the grid in 3D view
|
position3D: [0, -0.5, 0], // Position of the grid in 3D view
|
||||||
}
|
};
|
||||||
|
|
||||||
export const planeConfig: PlaneConfig = {
|
export const planeConfig: PlaneConfig = {
|
||||||
position2D: [0, -0.5, 0], // Position of the plane
|
position2D: [0, -0.5, 0], // Position of the plane
|
||||||
|
@ -270,8 +271,8 @@ export const planeConfig: PlaneConfig = {
|
||||||
|
|
||||||
width: 300, // Width of the plane
|
width: 300, // Width of the plane
|
||||||
height: 300, // Height of the plane
|
height: 300, // Height of the plane
|
||||||
color: "#f3f3f3" // Color of the plane
|
color: "#f3f3f3", // Color of the plane
|
||||||
}
|
};
|
||||||
|
|
||||||
export const shadowConfig: ShadowConfig = {
|
export const shadowConfig: ShadowConfig = {
|
||||||
shadowOffset: 50, // Offset of the shadow
|
shadowOffset: 50, // Offset of the shadow
|
||||||
|
@ -292,8 +293,8 @@ export const shadowConfig: ShadowConfig = {
|
||||||
shadowMaterialPosition: [0, 0.01, 0], // Position of the shadow material
|
shadowMaterialPosition: [0, 0.01, 0], // Position of the shadow material
|
||||||
shadowMaterialRotation: [-Math.PI / 2, 0, 0], // Rotation of the shadow material
|
shadowMaterialRotation: [-Math.PI / 2, 0, 0], // Rotation of the shadow material
|
||||||
|
|
||||||
shadowMaterialOpacity: 0.1 // Opacity of the shadow material
|
shadowMaterialOpacity: 0.1, // Opacity of the shadow material
|
||||||
}
|
};
|
||||||
|
|
||||||
export const skyConfig: SkyConfig = {
|
export const skyConfig: SkyConfig = {
|
||||||
defaultTurbidity: 10.0, // Default turbidity of the sky
|
defaultTurbidity: 10.0, // Default turbidity of the sky
|
||||||
|
@ -302,13 +303,13 @@ export const skyConfig: SkyConfig = {
|
||||||
defaultRayleigh: 1.9, // Default Rayleigh scattering coefficient
|
defaultRayleigh: 1.9, // Default Rayleigh scattering coefficient
|
||||||
mieCoefficient: 0.1, // Mie scattering coefficient
|
mieCoefficient: 0.1, // Mie scattering coefficient
|
||||||
mieDirectionalG: 1.0, // Mie directional G
|
mieDirectionalG: 1.0, // Mie directional G
|
||||||
skyDistance: 2000 // Distance of the sky
|
skyDistance: 2000, // Distance of the sky
|
||||||
}
|
};
|
||||||
|
|
||||||
export const assetConfig: AssetConfig = {
|
export const assetConfig: AssetConfig = {
|
||||||
defaultScaleBeforeGsap: [0.1, 0.1, 0.1], // Default scale of the assets
|
defaultScaleBeforeGsap: [0.1, 0.1, 0.1], // Default scale of the assets
|
||||||
defaultScaleAfterGsap: [1, 1, 1] // Default scale of the assets
|
defaultScaleAfterGsap: [1, 1, 1], // Default scale of the assets
|
||||||
}
|
};
|
||||||
|
|
||||||
export const pointConfig: PointConfig = {
|
export const pointConfig: PointConfig = {
|
||||||
defaultInnerColor: "#ffffff", // Default inner color of the points
|
defaultInnerColor: "#ffffff", // Default inner color of the points
|
||||||
|
@ -322,7 +323,7 @@ export const pointConfig: PointConfig = {
|
||||||
zoneOuterColor: "#007BFF", // Outer color of the zone points
|
zoneOuterColor: "#007BFF", // Outer color of the zone points
|
||||||
|
|
||||||
snappingThreshold: 1, // Threshold for snapping
|
snappingThreshold: 1, // Threshold for snapping
|
||||||
}
|
};
|
||||||
|
|
||||||
export const lineConfig: LineConfig = {
|
export const lineConfig: LineConfig = {
|
||||||
tubularSegments: 64, // Number of tubular segments
|
tubularSegments: 64, // Number of tubular segments
|
||||||
|
@ -343,42 +344,47 @@ export const lineConfig: LineConfig = {
|
||||||
floorColor: "#808080", // Color of the floor lines
|
floorColor: "#808080", // Color of the floor lines
|
||||||
aisleColor: "#FBBC05", // Color of the aisle lines
|
aisleColor: "#FBBC05", // Color of the aisle lines
|
||||||
zoneColor: "#007BFF", // Color of the zone lines
|
zoneColor: "#007BFF", // Color of the zone lines
|
||||||
helperColor: "#C164FF" // Color of the helper lines
|
helperColor: "#C164FF", // Color of the helper lines
|
||||||
}
|
};
|
||||||
|
|
||||||
export const wallConfig: WallConfig = {
|
export const wallConfig: WallConfig = {
|
||||||
defaultColor: "white", // Default color of the walls
|
defaultColor: "white", // Default color of the walls
|
||||||
height: 7, // Height of the walls
|
height: 7, // Height of the walls
|
||||||
width: 0.05, // Width of the walls
|
width: 0.05, // Width of the walls
|
||||||
}
|
};
|
||||||
|
|
||||||
export const floorConfig: FloorConfig = {
|
export const floorConfig: FloorConfig = {
|
||||||
defaultColor: "grey", // Default color of the floors
|
defaultColor: "grey", // Default color of the floors
|
||||||
height: 0.1, // Height of the floors
|
height: 0.1, // Height of the floors
|
||||||
textureScale: 0.1, // Scale of the floor texture
|
textureScale: 0.1, // Scale of the floor texture
|
||||||
}
|
};
|
||||||
|
|
||||||
export const roofConfig: RoofConfig = {
|
export const roofConfig: RoofConfig = {
|
||||||
defaultColor: "grey", // Default color of the roofs
|
defaultColor: "grey", // Default color of the roofs
|
||||||
height: 0.1 // Height of the roofs
|
height: 0.1, // Height of the roofs
|
||||||
}
|
};
|
||||||
|
|
||||||
export const aisleConfig: AisleConfig = {
|
export const aisleConfig: AisleConfig = {
|
||||||
width: 0.1, // Width of the aisles
|
width: 0.1, // Width of the aisles
|
||||||
height: 0.01, // Height of the aisles
|
height: 0.01, // Height of the aisles
|
||||||
defaultColor: 0xffff00 // Default color of the aisles
|
defaultColor: 0xffff00, // Default color of the aisles
|
||||||
}
|
};
|
||||||
|
|
||||||
export const zoneConfig: ZoneConfig = {
|
export const zoneConfig: ZoneConfig = {
|
||||||
defaultColor: "black", // Default color of the zones
|
defaultColor: "black", // Default color of the zones
|
||||||
color: "blue" // Color of the zones
|
color: "blue", // Color of the zones
|
||||||
}
|
};
|
||||||
|
|
||||||
export const columnConfig: ColumnConfig = {
|
export const columnConfig: ColumnConfig = {
|
||||||
defaultColor: "White", // Default color of the columns
|
defaultColor: "White", // Default color of the columns
|
||||||
}
|
};
|
||||||
|
|
||||||
export const outlineConfig: OutlineConfig = {
|
export const outlineConfig: OutlineConfig = {
|
||||||
assetSelectColor: 0x0054fE, // Color of the selected assets
|
assetSelectColor: 0x0054fe, // Color of the selected assets
|
||||||
assetDeleteColor: 0xFF0000 // Color of the deleted assets
|
assetDeleteColor: 0xff0000, // Color of the deleted assets
|
||||||
}
|
};
|
||||||
|
|
||||||
|
export const distanceConfig: DistanceConfig = {
|
||||||
|
minDistance: 20,
|
||||||
|
maxDistance: 75,
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in New Issue