assets added based on categoryin builder
This commit is contained in:
parent
988d7c92db
commit
e1200f52d0
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
|
||||
|
||||
# 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
|
||||
REACT_APP_IOT_SOCKET_SERVER_URL =185.100.212.76:5010
|
||||
|
|
|
|||
|
|
@ -1,13 +1,29 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Search from "../../ui/inputs/Search";
|
||||
import vehicle from "../../../assets/image/vehicles.png";
|
||||
import workStation from "../../../assets/image/workStation.png";
|
||||
import machines from "../../../assets/image/machines.png";
|
||||
import feneration from "../../../assets/image/feneration.png";
|
||||
import worker from "../../../assets/image/worker.png";
|
||||
import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
|
||||
|
||||
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 [searchValue, setSearchValue] = useState<string>("");
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||
const [filteredAsset, setFilteredAsset] = useState<AssetProp[]>([]);
|
||||
|
||||
const handleSearchChange = (value: string) => {
|
||||
setSearchValue(value);
|
||||
|
|
@ -34,56 +50,18 @@ const Assets: React.FC = () => {
|
|||
categoryImage: feneration,
|
||||
},
|
||||
{
|
||||
assetName: "Forklift",
|
||||
assetImage: "",
|
||||
category: "Vehicles",
|
||||
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,
|
||||
},
|
||||
|
|
@ -94,12 +72,13 @@ const Assets: React.FC = () => {
|
|||
new Set(categoryList.map((asset) => asset.category))
|
||||
);
|
||||
|
||||
// Filter assets based on the selected category
|
||||
const filteredAssets =
|
||||
selectedCategory !== null
|
||||
? categoryList.filter((asset) => asset.category === selectedCategory)
|
||||
: [];
|
||||
|
||||
const fetchCategoryAssets = async (asset: any) => {
|
||||
try {
|
||||
setSelectedCategory(asset);
|
||||
const res = await getCategoryAsset(asset);
|
||||
setFilteredAsset(res);
|
||||
} catch (error) {}
|
||||
};
|
||||
return (
|
||||
<div className="assets-container">
|
||||
<Search onChange={handleSearchChange} />
|
||||
|
|
@ -118,16 +97,17 @@ const Assets: React.FC = () => {
|
|||
</div>
|
||||
<h2>{selectedCategory}</h2>
|
||||
<div className="assets-container">
|
||||
{filteredAssets.map((asset, index) => (
|
||||
<div key={index} className="assets">
|
||||
<img
|
||||
src={asset.assetImage}
|
||||
alt={asset.assetName}
|
||||
className="asset-image"
|
||||
/>
|
||||
<div className="asset-name">{asset.assetName}</div>
|
||||
</div>
|
||||
))}
|
||||
{filteredAsset &&
|
||||
filteredAsset?.map((asset: any, index: number) => (
|
||||
<div key={index} className="assets">
|
||||
<img
|
||||
src={asset.thumbnail}
|
||||
alt={asset.filename}
|
||||
className="asset-image"
|
||||
/>
|
||||
<div className="asset-name">{asset.filename}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -142,7 +122,7 @@ const Assets: React.FC = () => {
|
|||
<div
|
||||
key={index}
|
||||
className="category"
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
onClick={() => fetchCategoryAssets(category)}
|
||||
>
|
||||
<img
|
||||
src={categoryInfo?.categoryImage || ""}
|
||||
|
|
@ -161,4 +141,3 @@ const Assets: React.FC = () => {
|
|||
};
|
||||
|
||||
export default Assets;
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,14 @@ const RenderAnalysisInputs: React.FC<InputRendererProps> = ({
|
|||
);
|
||||
}
|
||||
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;
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -17,12 +17,6 @@ const AssetProperties: React.FC = () => {
|
|||
const [userData, setUserData] = useState<UserData[]>([]); // State to track user data
|
||||
const [nextId, setNextId] = useState(1); // Unique ID for new entries
|
||||
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
|
||||
const handleAddUserData = () => {
|
||||
const newUserData: UserData = {
|
||||
|
|
@ -59,10 +53,15 @@ const AssetProperties: React.FC = () => {
|
|||
|
||||
<PositionInput
|
||||
onChange={() => {}}
|
||||
value1={xValue.toFixed(5)}
|
||||
value2={zValue.toFixed(5)}
|
||||
value1={selectedFloorItem.position.x.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>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import {
|
|||
useWallVisibility,
|
||||
} from "../../../../store/store";
|
||||
import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
|
||||
|
||||
import * as CONSTANTS from "../../../../types/world/worldConstants";
|
||||
const GlobalProperties: React.FC = () => {
|
||||
const { toggleView, setToggleView } = useToggleView();
|
||||
const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
|
||||
|
|
@ -29,18 +29,20 @@ const GlobalProperties: React.FC = () => {
|
|||
const { renderDistance, setRenderDistance } = useRenderDistance();
|
||||
const { socket } = useSocketStore();
|
||||
const [limitDistance, setLimitDistance] = useState(false);
|
||||
const [distance, setDistance] = useState<number>(5);
|
||||
const [distance, setDistance] = useState<number>(30);
|
||||
|
||||
const [limitGridDistance, setLimitGridDistance] = useState(false);
|
||||
const [gridDistance, setGridDistance] = useState<number>(5);
|
||||
|
||||
function optimizeScene() {
|
||||
setLimitDistance(true);
|
||||
setDistance(5);
|
||||
setDistance(30);
|
||||
}
|
||||
|
||||
function updateDistance(value: number) {
|
||||
console.log("value: ", value);
|
||||
setDistance(value);
|
||||
setRenderDistance(value);
|
||||
}
|
||||
|
||||
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 (
|
||||
<div className="global-properties-container">
|
||||
<div className="header">Environment</div>
|
||||
|
|
@ -169,7 +180,7 @@ const GlobalProperties: React.FC = () => {
|
|||
/>
|
||||
|
||||
<div className="split"></div>
|
||||
|
||||
{/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */}
|
||||
<InputToggle
|
||||
inputKey="4"
|
||||
label="Limit Render Distance"
|
||||
|
|
@ -183,6 +194,8 @@ const GlobalProperties: React.FC = () => {
|
|||
disabled={!limitDistance}
|
||||
value={distance}
|
||||
key={"5"}
|
||||
min={CONSTANTS.distanceConfig.minDistance}
|
||||
max={CONSTANTS.distanceConfig.maxDistance}
|
||||
onChange={(value: number) => updateDistance(value)}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -62,9 +62,15 @@ const Tools: React.FC = () => {
|
|||
|
||||
// Reset activeTool whenever activeModule changes
|
||||
useEffect(() => {
|
||||
setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
|
||||
setToggleUI(
|
||||
localStorage.getItem("navBarUi")
|
||||
? localStorage.getItem("navBarUi") === "true"
|
||||
: true
|
||||
);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
console.log("activeModule", activeModule);
|
||||
}, [activeModule]);
|
||||
useEffect(() => {
|
||||
setActiveTool(activeSubTool);
|
||||
setActiveSubTool(activeSubTool);
|
||||
|
|
@ -80,7 +86,11 @@ const Tools: React.FC = () => {
|
|||
} else {
|
||||
setToggleView(false);
|
||||
}
|
||||
setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
|
||||
setToggleUI(
|
||||
localStorage.getItem("navBarUi")
|
||||
? localStorage.getItem("navBarUi") === "true"
|
||||
: true
|
||||
);
|
||||
setToggleThreeD(!toggleThreeD);
|
||||
setActiveSubTool("cursor");
|
||||
setActiveTool("cursor");
|
||||
|
|
@ -202,8 +212,9 @@ const Tools: React.FC = () => {
|
|||
<div className="activeDropicon">
|
||||
{activeSubTool == "cursor" && (
|
||||
<div
|
||||
className={`tool-button ${activeTool === "cursor" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "cursor" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("cursor");
|
||||
}}
|
||||
|
|
@ -213,8 +224,9 @@ const Tools: React.FC = () => {
|
|||
)}
|
||||
{activeSubTool == "free-hand" && (
|
||||
<div
|
||||
className={`tool-button ${activeTool === "free-hand" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "free-hand" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("free-hand");
|
||||
}}
|
||||
|
|
@ -224,8 +236,9 @@ const Tools: React.FC = () => {
|
|||
)}
|
||||
{activeSubTool == "delete" && (
|
||||
<div
|
||||
className={`tool-button ${activeTool === "delete" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "delete" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("delete");
|
||||
}}
|
||||
|
|
@ -297,8 +310,9 @@ const Tools: React.FC = () => {
|
|||
<div className="split"></div>
|
||||
<div className="draw-tools">
|
||||
<div
|
||||
className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "draw-wall" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("draw-wall");
|
||||
}}
|
||||
|
|
@ -307,8 +321,9 @@ const Tools: React.FC = () => {
|
|||
<WallIcon isActive={activeTool === "draw-wall"} />
|
||||
</div>
|
||||
<div
|
||||
className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "draw-zone" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("draw-zone");
|
||||
}}
|
||||
|
|
@ -317,8 +332,9 @@ const Tools: React.FC = () => {
|
|||
<ZoneIcon isActive={activeTool === "draw-zone"} />
|
||||
</div>
|
||||
<div
|
||||
className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "draw-aisle" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("draw-aisle");
|
||||
}}
|
||||
|
|
@ -327,8 +343,9 @@ const Tools: React.FC = () => {
|
|||
<AsileIcon isActive={activeTool === "draw-aisle"} />
|
||||
</div>
|
||||
<div
|
||||
className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "draw-floor" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("draw-floor");
|
||||
}}
|
||||
|
|
@ -344,8 +361,9 @@ const Tools: React.FC = () => {
|
|||
<div className="split"></div>
|
||||
<div className="draw-tools">
|
||||
<div
|
||||
className={`tool-button ${activeTool === "measure" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "measure" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("measure");
|
||||
}}
|
||||
|
|
@ -361,8 +379,9 @@ const Tools: React.FC = () => {
|
|||
<div className="split"></div>
|
||||
<div className="draw-tools">
|
||||
<div
|
||||
className={`tool-button ${activeTool === "pen" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "pen" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("pen");
|
||||
}}
|
||||
|
|
@ -394,8 +413,9 @@ const Tools: React.FC = () => {
|
|||
<div className="split"></div>
|
||||
<div className="general-options">
|
||||
<div
|
||||
className={`tool-button ${activeTool === "comment" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "comment" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("comment");
|
||||
}}
|
||||
|
|
@ -404,8 +424,9 @@ const Tools: React.FC = () => {
|
|||
</div>
|
||||
{toggleThreeD && (
|
||||
<div
|
||||
className={`tool-button ${activeTool === "play" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "play" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setIsPlaying(!isPlaying);
|
||||
}}
|
||||
|
|
@ -416,8 +437,9 @@ const Tools: React.FC = () => {
|
|||
</div>
|
||||
<div className="split"></div>
|
||||
<div
|
||||
className={`toggle-threed-button${toggleThreeD ? " toggled" : ""
|
||||
}`}
|
||||
className={`toggle-threed-button${
|
||||
toggleThreeD ? " toggled" : ""
|
||||
}`}
|
||||
onClick={toggleSwitch}
|
||||
>
|
||||
<div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import * as CONSTANTS from "../../../types/world/worldConstants";
|
||||
interface InputToggleProps {
|
||||
label: string; // Represents the toggle state (on/off)
|
||||
min?: number;
|
||||
|
|
@ -14,8 +14,8 @@ const InputRange: React.FC<InputToggleProps> = ({
|
|||
label,
|
||||
onClick,
|
||||
onChange,
|
||||
min = 0,
|
||||
max = 10,
|
||||
min,
|
||||
max,
|
||||
disabled,
|
||||
value = 5,
|
||||
}) => {
|
||||
|
|
@ -23,6 +23,7 @@ const InputRange: React.FC<InputToggleProps> = ({
|
|||
|
||||
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const newValue = parseInt(e.target.value); // Parse the value to an integer
|
||||
|
||||
setRangeValue(newValue); // Update the local state
|
||||
|
||||
if (onChange) {
|
||||
|
|
|
|||
|
|
@ -1,111 +1,125 @@
|
|||
import * as THREE from 'three'
|
||||
import { EffectComposer, N8AO, Outline } from '@react-three/postprocessing'
|
||||
import { BlendFunction } from 'postprocessing'
|
||||
import { useDeletableFloorItem, useSelectedActionSphere, useSelectedPath, useSelectedWallItem, useselectedFloorItem } from '../../../store/store';
|
||||
import * as Types from '../../../types/world/worldTypes'
|
||||
import * as CONSTANTS from '../../../types/world/worldConstants';
|
||||
import * as THREE from "three";
|
||||
import { EffectComposer, N8AO, Outline } from "@react-three/postprocessing";
|
||||
import { BlendFunction } from "postprocessing";
|
||||
import {
|
||||
useDeletableFloorItem,
|
||||
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() {
|
||||
const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
|
||||
const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
|
||||
const { selectedFloorItem, setselectedFloorItem } = useselectedFloorItem();
|
||||
const { selectedActionSphere } = useSelectedActionSphere();
|
||||
const { selectedPath } = useSelectedPath();
|
||||
const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
|
||||
const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
|
||||
const { selectedFloorItem, setselectedFloorItem } = useselectedFloorItem();
|
||||
const { selectedActionSphere } = useSelectedActionSphere();
|
||||
const { selectedPath } = useSelectedPath();
|
||||
|
||||
function flattenChildren(children: any[]) {
|
||||
const allChildren: any[] = [];
|
||||
children.forEach(child => {
|
||||
allChildren.push(child);
|
||||
if (child.children && child.children.length > 0) {
|
||||
allChildren.push(...flattenChildren(child.children));
|
||||
}
|
||||
});
|
||||
return allChildren;
|
||||
}
|
||||
function flattenChildren(children: any[]) {
|
||||
const allChildren: any[] = [];
|
||||
children.forEach((child) => {
|
||||
allChildren.push(child);
|
||||
if (child.children && child.children.length > 0) {
|
||||
allChildren.push(...flattenChildren(child.children));
|
||||
}
|
||||
});
|
||||
return allChildren;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<EffectComposer autoClear={false}>
|
||||
<N8AO color="black" aoRadius={20} intensity={7} distanceFalloff={4} aoSamples={32} denoiseRadius={6} denoiseSamples={16} />
|
||||
{deletableFloorItem &&
|
||||
<Outline
|
||||
selection={flattenChildren(deletableFloorItem.children)}
|
||||
selectionLayer={10}
|
||||
width={3000}
|
||||
blendFunction={BlendFunction.ALPHA}
|
||||
edgeStrength={5}
|
||||
resolutionScale={2}
|
||||
pulseSpeed={0}
|
||||
visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
|
||||
hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
|
||||
blur={true}
|
||||
xRay={true}
|
||||
/>
|
||||
}
|
||||
{selectedWallItem &&
|
||||
<Outline
|
||||
selection={
|
||||
selectedWallItem.children[1].children[0].children.filter(
|
||||
(child: Types.Mesh) => child.name !== "CSG_REF"
|
||||
)
|
||||
}
|
||||
selectionLayer={10}
|
||||
width={3000}
|
||||
blendFunction={BlendFunction.ALPHA}
|
||||
edgeStrength={5}
|
||||
resolutionScale={2}
|
||||
pulseSpeed={0}
|
||||
visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
||||
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
||||
blur={true}
|
||||
xRay={true}
|
||||
/>}
|
||||
{selectedFloorItem &&
|
||||
<Outline
|
||||
selection={flattenChildren(selectedFloorItem.children)}
|
||||
selectionLayer={10}
|
||||
width={3000}
|
||||
blendFunction={BlendFunction.ALPHA}
|
||||
edgeStrength={5}
|
||||
resolutionScale={2}
|
||||
pulseSpeed={0}
|
||||
visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
||||
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
||||
blur={true}
|
||||
xRay={true}
|
||||
/>
|
||||
}
|
||||
{selectedActionSphere &&
|
||||
<Outline
|
||||
selection={[selectedActionSphere.point]}
|
||||
selectionLayer={10}
|
||||
width={750}
|
||||
blendFunction={BlendFunction.ALPHA}
|
||||
edgeStrength={15}
|
||||
resolutionScale={2}
|
||||
pulseSpeed={0}
|
||||
visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
||||
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
||||
blur={true}
|
||||
xRay={true}
|
||||
/>
|
||||
}
|
||||
{selectedPath &&
|
||||
<Outline
|
||||
selection={flattenChildren(selectedPath.group.children)}
|
||||
selectionLayer={10}
|
||||
width={750}
|
||||
blendFunction={BlendFunction.ALPHA}
|
||||
edgeStrength={15}
|
||||
resolutionScale={2}
|
||||
pulseSpeed={0}
|
||||
visibleEdgeColor={0x6f42c1}
|
||||
hiddenEdgeColor={0x6f42c1}
|
||||
blur={true}
|
||||
xRay={true}
|
||||
/>
|
||||
}
|
||||
</EffectComposer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<EffectComposer autoClear={false}>
|
||||
<N8AO
|
||||
color="black"
|
||||
aoRadius={20}
|
||||
intensity={7}
|
||||
distanceFalloff={4}
|
||||
aoSamples={32}
|
||||
denoiseRadius={6}
|
||||
denoiseSamples={16}
|
||||
/>
|
||||
{deletableFloorItem && (
|
||||
<Outline
|
||||
selection={flattenChildren(deletableFloorItem.children)}
|
||||
selectionLayer={10}
|
||||
width={3000}
|
||||
blendFunction={BlendFunction.ALPHA}
|
||||
edgeStrength={5}
|
||||
resolutionScale={2}
|
||||
pulseSpeed={0}
|
||||
visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
|
||||
hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
|
||||
blur={true}
|
||||
xRay={true}
|
||||
/>
|
||||
)}
|
||||
{selectedWallItem && (
|
||||
<Outline
|
||||
selection={selectedWallItem.children[1].children[0].children.filter(
|
||||
(child: Types.Mesh) => child.name !== "CSG_REF"
|
||||
)}
|
||||
selectionLayer={10}
|
||||
width={3000}
|
||||
blendFunction={BlendFunction.ALPHA}
|
||||
edgeStrength={5}
|
||||
resolutionScale={2}
|
||||
pulseSpeed={0}
|
||||
visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
||||
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
||||
blur={true}
|
||||
xRay={true}
|
||||
/>
|
||||
)}
|
||||
{selectedFloorItem && (
|
||||
<Outline
|
||||
selection={flattenChildren(selectedFloorItem.children)}
|
||||
selectionLayer={10}
|
||||
width={3000}
|
||||
blendFunction={BlendFunction.ALPHA}
|
||||
edgeStrength={5}
|
||||
resolutionScale={2}
|
||||
pulseSpeed={0}
|
||||
visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
||||
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
||||
blur={true}
|
||||
xRay={true}
|
||||
/>
|
||||
)}
|
||||
{selectedActionSphere && (
|
||||
<Outline
|
||||
selection={[selectedActionSphere.point]}
|
||||
selectionLayer={10}
|
||||
width={750}
|
||||
blendFunction={BlendFunction.ALPHA}
|
||||
edgeStrength={15}
|
||||
resolutionScale={2}
|
||||
pulseSpeed={0}
|
||||
visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
||||
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
|
||||
blur={true}
|
||||
xRay={true}
|
||||
/>
|
||||
)}
|
||||
{selectedPath && (
|
||||
<Outline
|
||||
selection={flattenChildren(selectedPath.group.children)}
|
||||
selectionLayer={10}
|
||||
width={750}
|
||||
blendFunction={BlendFunction.ALPHA}
|
||||
edgeStrength={15}
|
||||
resolutionScale={2}
|
||||
pulseSpeed={0}
|
||||
visibleEdgeColor={0x6f42c1}
|
||||
hiddenEdgeColor={0x6f42c1}
|
||||
blur={true}
|
||||
xRay={true}
|
||||
/>
|
||||
)}
|
||||
</EffectComposer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
|
||||
export const getCategoryAsset = async (categoryName: any) => {
|
||||
console.log("categoryName:api ", categoryName);
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${BackEnd_url}/api/v2/getCatagoryAssets/${categoryName}`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
// body: JSON.stringify({ filename }),
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
console.log("result: ", result);
|
||||
return result;
|
||||
} catch (error: any) {
|
||||
// console.error("Error fetching category:", error.message);
|
||||
throw new Error(error.message);
|
||||
}
|
||||
};
|
||||
|
|
@ -1,384 +1,390 @@
|
|||
export type Controls = {
|
||||
azimuthRotateSpeed: number;
|
||||
polarRotateSpeed: number;
|
||||
truckSpeed: number;
|
||||
minDistance: number;
|
||||
maxDistance: number;
|
||||
maxPolarAngle: number;
|
||||
leftMouse: number;
|
||||
forwardSpeed: number;
|
||||
backwardSpeed: number;
|
||||
leftSpeed: number;
|
||||
rightSpeed: number;
|
||||
azimuthRotateSpeed: number;
|
||||
polarRotateSpeed: number;
|
||||
truckSpeed: number;
|
||||
minDistance: number;
|
||||
maxDistance: number;
|
||||
maxPolarAngle: number;
|
||||
leftMouse: number;
|
||||
forwardSpeed: number;
|
||||
backwardSpeed: number;
|
||||
leftSpeed: number;
|
||||
rightSpeed: number;
|
||||
};
|
||||
|
||||
export type ThirdPersonControls = {
|
||||
azimuthRotateSpeed: number;
|
||||
polarRotateSpeed: number;
|
||||
truckSpeed: number;
|
||||
maxDistance: number;
|
||||
maxPolarAngle: number;
|
||||
minZoom: number;
|
||||
maxZoom: number;
|
||||
targetOffset: number;
|
||||
cameraHeight: number;
|
||||
leftMouse: number;
|
||||
rightMouse: number;
|
||||
wheelMouse: number;
|
||||
middleMouse: number;
|
||||
azimuthRotateSpeed: number;
|
||||
polarRotateSpeed: number;
|
||||
truckSpeed: number;
|
||||
maxDistance: number;
|
||||
maxPolarAngle: number;
|
||||
minZoom: number;
|
||||
maxZoom: number;
|
||||
targetOffset: number;
|
||||
cameraHeight: number;
|
||||
leftMouse: number;
|
||||
rightMouse: number;
|
||||
wheelMouse: number;
|
||||
middleMouse: number;
|
||||
};
|
||||
|
||||
export type ControlsTransition = {
|
||||
leftMouse: number;
|
||||
rightMouse: number;
|
||||
wheelMouse: number;
|
||||
middleMouse: number;
|
||||
leftMouse: number;
|
||||
rightMouse: number;
|
||||
wheelMouse: number;
|
||||
middleMouse: number;
|
||||
};
|
||||
|
||||
export type TwoDimension = {
|
||||
defaultPosition: [x: number, y: number, z: number];
|
||||
defaultTarget: [x: number, y: number, z: number];
|
||||
defaultAzimuth: number;
|
||||
minDistance: number;
|
||||
leftMouse: number;
|
||||
rightMouse: number;
|
||||
defaultPosition: [x: number, y: number, z: number];
|
||||
defaultTarget: [x: number, y: number, z: number];
|
||||
defaultAzimuth: number;
|
||||
minDistance: number;
|
||||
leftMouse: number;
|
||||
rightMouse: number;
|
||||
};
|
||||
|
||||
export type ThreeDimension = {
|
||||
defaultPosition: [x: number, y: number, z: number];
|
||||
defaultTarget: [x: number, y: number, z: number];
|
||||
defaultRotation: [x: number, y: number, z: number];
|
||||
defaultAzimuth: number;
|
||||
boundaryBottom: [x: number, y: number, z: number];
|
||||
boundaryTop: [x: number, y: number, z: number];
|
||||
minDistance: number;
|
||||
leftMouse: number;
|
||||
rightMouse: number;
|
||||
defaultPosition: [x: number, y: number, z: number];
|
||||
defaultTarget: [x: number, y: number, z: number];
|
||||
defaultRotation: [x: number, y: number, z: number];
|
||||
defaultAzimuth: number;
|
||||
boundaryBottom: [x: number, y: number, z: number];
|
||||
boundaryTop: [x: number, y: number, z: number];
|
||||
minDistance: number;
|
||||
leftMouse: number;
|
||||
rightMouse: number;
|
||||
};
|
||||
|
||||
|
||||
export type GridConfig = {
|
||||
size: number;
|
||||
divisions: number;
|
||||
primaryColor: string;
|
||||
secondaryColor: string;
|
||||
size: number;
|
||||
divisions: number;
|
||||
primaryColor: string;
|
||||
secondaryColor: string;
|
||||
|
||||
position2D: [x: number, y: number, z: number];
|
||||
position3D: [x: number, y: number, z: number];
|
||||
}
|
||||
position2D: [x: number, y: number, z: number];
|
||||
position3D: [x: number, y: number, z: number];
|
||||
};
|
||||
|
||||
export type PlaneConfig = {
|
||||
position2D: [x: number, y: number, z: number];
|
||||
position3D: [x: number, y: number, z: number];
|
||||
rotation: number;
|
||||
position2D: [x: number, y: number, z: number];
|
||||
position3D: [x: number, y: number, z: number];
|
||||
rotation: number;
|
||||
|
||||
width: number;
|
||||
height: number;
|
||||
color: string;
|
||||
}
|
||||
width: number;
|
||||
height: number;
|
||||
color: string;
|
||||
};
|
||||
|
||||
export type ShadowConfig = {
|
||||
shadowOffset: number,
|
||||
shadowOffset: number;
|
||||
|
||||
shadowmapSizewidth: number,
|
||||
shadowmapSizeheight: number,
|
||||
shadowcamerafar: number,
|
||||
shadowcameranear: number,
|
||||
shadowcameratop: number,
|
||||
shadowcamerabottom: number,
|
||||
shadowcameraleft: number,
|
||||
shadowcameraright: number,
|
||||
shadowbias: number,
|
||||
shadownormalBias: number,
|
||||
shadowmapSizewidth: number;
|
||||
shadowmapSizeheight: number;
|
||||
shadowcamerafar: number;
|
||||
shadowcameranear: number;
|
||||
shadowcameratop: number;
|
||||
shadowcamerabottom: number;
|
||||
shadowcameraleft: number;
|
||||
shadowcameraright: number;
|
||||
shadowbias: number;
|
||||
shadownormalBias: number;
|
||||
|
||||
shadowMaterialPosition: [x: number, y: number, z: number],
|
||||
shadowMaterialRotation: [x: number, y: number, z: number],
|
||||
shadowMaterialPosition: [x: number, y: number, z: number];
|
||||
shadowMaterialRotation: [x: number, y: number, z: number];
|
||||
|
||||
shadowMaterialOpacity: number,
|
||||
}
|
||||
shadowMaterialOpacity: number;
|
||||
};
|
||||
|
||||
export type SkyConfig = {
|
||||
defaultTurbidity: number;
|
||||
maxTurbidity: number;
|
||||
minTurbidity: number;
|
||||
defaultRayleigh: number;
|
||||
mieCoefficient: number;
|
||||
mieDirectionalG: number;
|
||||
skyDistance: number;
|
||||
}
|
||||
defaultTurbidity: number;
|
||||
maxTurbidity: number;
|
||||
minTurbidity: number;
|
||||
defaultRayleigh: number;
|
||||
mieCoefficient: number;
|
||||
mieDirectionalG: number;
|
||||
skyDistance: number;
|
||||
};
|
||||
|
||||
export type AssetConfig = {
|
||||
defaultScaleBeforeGsap: [number, number, number];
|
||||
defaultScaleAfterGsap: [number, number, number];
|
||||
}
|
||||
defaultScaleBeforeGsap: [number, number, number];
|
||||
defaultScaleAfterGsap: [number, number, number];
|
||||
};
|
||||
|
||||
export type PointConfig = {
|
||||
defaultInnerColor: string;
|
||||
defaultOuterColor: string;
|
||||
deleteColor: string;
|
||||
boxScale: [number, number, number];
|
||||
defaultInnerColor: string;
|
||||
defaultOuterColor: string;
|
||||
deleteColor: string;
|
||||
boxScale: [number, number, number];
|
||||
|
||||
wallOuterColor: string;
|
||||
floorOuterColor: string;
|
||||
aisleOuterColor: string;
|
||||
zoneOuterColor: string;
|
||||
wallOuterColor: string;
|
||||
floorOuterColor: string;
|
||||
aisleOuterColor: string;
|
||||
zoneOuterColor: string;
|
||||
|
||||
snappingThreshold: number;
|
||||
}
|
||||
snappingThreshold: number;
|
||||
};
|
||||
|
||||
export type LineConfig = {
|
||||
tubularSegments: number;
|
||||
radius: number;
|
||||
radialSegments: number;
|
||||
tubularSegments: number;
|
||||
radius: number;
|
||||
radialSegments: number;
|
||||
|
||||
wallName: string;
|
||||
floorName: string;
|
||||
aisleName: string;
|
||||
zoneName: string;
|
||||
referenceName: string;
|
||||
wallName: string;
|
||||
floorName: string;
|
||||
aisleName: string;
|
||||
zoneName: string;
|
||||
referenceName: string;
|
||||
|
||||
lineIntersectionPoints: number;
|
||||
lineIntersectionPoints: number;
|
||||
|
||||
defaultColor: string;
|
||||
defaultColor: string;
|
||||
|
||||
wallColor: string;
|
||||
floorColor: string;
|
||||
aisleColor: string;
|
||||
zoneColor: string;
|
||||
helperColor: string;
|
||||
}
|
||||
wallColor: string;
|
||||
floorColor: string;
|
||||
aisleColor: string;
|
||||
zoneColor: string;
|
||||
helperColor: string;
|
||||
};
|
||||
|
||||
export type WallConfig = {
|
||||
defaultColor: string;
|
||||
height: number;
|
||||
width: number;
|
||||
}
|
||||
defaultColor: string;
|
||||
height: number;
|
||||
width: number;
|
||||
};
|
||||
|
||||
export type FloorConfig = {
|
||||
defaultColor: string;
|
||||
height: number;
|
||||
defaultColor: string;
|
||||
height: number;
|
||||
|
||||
textureScale: number;
|
||||
}
|
||||
textureScale: number;
|
||||
};
|
||||
|
||||
export type RoofConfig = {
|
||||
defaultColor: string;
|
||||
height: number;
|
||||
}
|
||||
defaultColor: string;
|
||||
height: number;
|
||||
};
|
||||
|
||||
export type AisleConfig = {
|
||||
width: number;
|
||||
height: number;
|
||||
width: number;
|
||||
height: number;
|
||||
|
||||
defaultColor: number;
|
||||
}
|
||||
defaultColor: number;
|
||||
};
|
||||
|
||||
export type ZoneConfig = {
|
||||
defaultColor: string;
|
||||
defaultColor: string;
|
||||
|
||||
color: string;
|
||||
}
|
||||
color: string;
|
||||
};
|
||||
|
||||
export type ColumnConfig = {
|
||||
defaultColor: string;
|
||||
}
|
||||
defaultColor: string;
|
||||
};
|
||||
|
||||
export type OutlineConfig = {
|
||||
assetSelectColor: number;
|
||||
assetDeleteColor: number;
|
||||
}
|
||||
|
||||
|
||||
assetSelectColor: number;
|
||||
assetDeleteColor: number;
|
||||
};
|
||||
|
||||
export type DistanceConfig = {
|
||||
minDistance: number;
|
||||
maxDistance: number;
|
||||
};
|
||||
|
||||
export const firstPersonControls: Controls = {
|
||||
azimuthRotateSpeed: 0.3, // Speed of rotation around the azimuth axis
|
||||
polarRotateSpeed: 0.3, // Speed of rotation around the polar axis
|
||||
truckSpeed: 10, // Speed of truck movement
|
||||
minDistance: 0, // Minimum distance from the target
|
||||
maxDistance: 0, // Maximum distance from the target
|
||||
maxPolarAngle: Math.PI, // Maximum polar angle
|
||||
azimuthRotateSpeed: 0.3, // Speed of rotation around the azimuth axis
|
||||
polarRotateSpeed: 0.3, // Speed of rotation around the polar axis
|
||||
truckSpeed: 10, // Speed of truck movement
|
||||
minDistance: 0, // Minimum distance from the target
|
||||
maxDistance: 0, // Maximum distance from the target
|
||||
maxPolarAngle: Math.PI, // Maximum polar angle
|
||||
|
||||
leftMouse: 1, // Mouse button for rotation (ROTATE)
|
||||
leftMouse: 1, // Mouse button for rotation (ROTATE)
|
||||
|
||||
forwardSpeed: 0.3, // Speed of forward movement
|
||||
backwardSpeed: -0.3, // Speed of backward movement
|
||||
leftSpeed: -0.3, // Speed of left movement
|
||||
rightSpeed: 0.3, // Speed of right movement
|
||||
forwardSpeed: 0.3, // Speed of forward movement
|
||||
backwardSpeed: -0.3, // Speed of backward movement
|
||||
leftSpeed: -0.3, // Speed of left movement
|
||||
rightSpeed: 0.3, // Speed of right movement
|
||||
};
|
||||
|
||||
export const thirdPersonControls: ThirdPersonControls = {
|
||||
azimuthRotateSpeed: 1, // Speed of rotation around the azimuth axis
|
||||
polarRotateSpeed: 1, // Speed of rotation around the polar axis
|
||||
truckSpeed: 2, // Speed of truck movement
|
||||
maxDistance: 100, // Maximum distance from the target
|
||||
maxPolarAngle: Math.PI / 2 - 0.05, // Maximum polar angle
|
||||
minZoom: 6, // Minimum zoom level
|
||||
maxZoom: 21, // Maximum zoom level
|
||||
targetOffset: 20, // Offset of the target from the camera
|
||||
cameraHeight: 30, // Height of the camera
|
||||
leftMouse: 2, // Mouse button for panning
|
||||
rightMouse: 1, // Mouse button for rotation
|
||||
wheelMouse: 8, // Mouse button for zooming
|
||||
middleMouse: 8, // Mouse button for zooming
|
||||
azimuthRotateSpeed: 1, // Speed of rotation around the azimuth axis
|
||||
polarRotateSpeed: 1, // Speed of rotation around the polar axis
|
||||
truckSpeed: 2, // Speed of truck movement
|
||||
maxDistance: 100, // Maximum distance from the target
|
||||
maxPolarAngle: Math.PI / 2 - 0.05, // Maximum polar angle
|
||||
minZoom: 6, // Minimum zoom level
|
||||
maxZoom: 21, // Maximum zoom level
|
||||
targetOffset: 20, // Offset of the target from the camera
|
||||
cameraHeight: 30, // Height of the camera
|
||||
leftMouse: 2, // Mouse button for panning
|
||||
rightMouse: 1, // Mouse button for rotation
|
||||
wheelMouse: 8, // Mouse button for zooming
|
||||
middleMouse: 8, // Mouse button for zooming
|
||||
};
|
||||
|
||||
export const controlsTransition: ControlsTransition = {
|
||||
leftMouse: 0, // Mouse button for no action
|
||||
rightMouse: 0, // Mouse button for no action
|
||||
wheelMouse: 0, // Mouse button for no action
|
||||
middleMouse: 0, // Mouse button for no action
|
||||
leftMouse: 0, // Mouse button for no action
|
||||
rightMouse: 0, // Mouse button for no action
|
||||
wheelMouse: 0, // Mouse button for no action
|
||||
middleMouse: 0, // Mouse button for no action
|
||||
};
|
||||
|
||||
export const twoDimension: TwoDimension = {
|
||||
defaultPosition: [0, 100, 0], // Default position of the camera
|
||||
defaultTarget: [0, 0, 0], // Default target of the camera
|
||||
defaultAzimuth: 0, // Default azimuth of the camera
|
||||
minDistance: 25, // Minimum distance from the target
|
||||
leftMouse: 2, // Mouse button for panning
|
||||
rightMouse: 0, // Mouse button for no action
|
||||
defaultPosition: [0, 100, 0], // Default position of the camera
|
||||
defaultTarget: [0, 0, 0], // Default target of the camera
|
||||
defaultAzimuth: 0, // Default azimuth of the camera
|
||||
minDistance: 25, // Minimum distance from the target
|
||||
leftMouse: 2, // Mouse button for panning
|
||||
rightMouse: 0, // Mouse button for no action
|
||||
};
|
||||
|
||||
export const threeDimension: ThreeDimension = {
|
||||
defaultPosition: [0, 40, 30], // Default position of the camera
|
||||
defaultTarget: [0, 0, 0], // Default target of the camera
|
||||
defaultRotation: [0, 0, 0], // Default rotation of the camera
|
||||
defaultAzimuth: 0, // Default azimuth of the camera
|
||||
boundaryBottom: [-150, 0, -150], // Bottom boundary of the camera movement
|
||||
boundaryTop: [150, 100, 150], // Top boundary of the camera movement
|
||||
minDistance: 1, // Minimum distance from the target
|
||||
leftMouse: 2, // Mouse button for panning
|
||||
rightMouse: 1, // Mouse button for rotation
|
||||
defaultPosition: [0, 40, 30], // Default position of the camera
|
||||
defaultTarget: [0, 0, 0], // Default target of the camera
|
||||
defaultRotation: [0, 0, 0], // Default rotation of the camera
|
||||
defaultAzimuth: 0, // Default azimuth of the camera
|
||||
boundaryBottom: [-150, 0, -150], // Bottom boundary of the camera movement
|
||||
boundaryTop: [150, 100, 150], // Top boundary of the camera movement
|
||||
minDistance: 1, // Minimum distance from the target
|
||||
leftMouse: 2, // Mouse button for panning
|
||||
rightMouse: 1, // Mouse button for rotation
|
||||
};
|
||||
|
||||
export const camPositionUpdateInterval: number = 200; // Interval for updating the camera position
|
||||
|
||||
export const gridConfig: GridConfig = {
|
||||
size: 300, // Size of the grid
|
||||
divisions: 75, // Number of divisions in the grid
|
||||
primaryColor: "#d5d5d5", // Primary color of the grid
|
||||
secondaryColor: "#e3e3e3", // Secondary color of the grid
|
||||
size: 300, // Size of the grid
|
||||
divisions: 75, // Number of divisions in the grid
|
||||
primaryColor: "#d5d5d5", // Primary color of the grid
|
||||
secondaryColor: "#e3e3e3", // Secondary color of the grid
|
||||
|
||||
position2D: [0, 0.1, 0], // Position of the grid in 2D view
|
||||
position3D: [0, -0.5, 0], // Position of the grid in 3D 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
|
||||
};
|
||||
|
||||
export const planeConfig: PlaneConfig = {
|
||||
position2D: [0, -0.5, 0], // Position of the plane
|
||||
position3D: [0, -0.65, 0], // Position of the plane
|
||||
rotation: -Math.PI / 2, // Rotation of the plane
|
||||
position2D: [0, -0.5, 0], // Position of the plane
|
||||
position3D: [0, -0.65, 0], // Position of the plane
|
||||
rotation: -Math.PI / 2, // Rotation of the plane
|
||||
|
||||
width: 300, // Width of the plane
|
||||
height: 300, // Height of the plane
|
||||
color: "#f3f3f3" // Color of the plane
|
||||
}
|
||||
width: 300, // Width of the plane
|
||||
height: 300, // Height of the plane
|
||||
color: "#f3f3f3", // Color of the plane
|
||||
};
|
||||
|
||||
export const shadowConfig: ShadowConfig = {
|
||||
shadowOffset: 50, // Offset of the shadow
|
||||
shadowOffset: 50, // Offset of the shadow
|
||||
|
||||
shadowmapSizewidth: 1024, // Width of the shadow map
|
||||
shadowmapSizeheight: 1024, // Height of the shadow map
|
||||
// shadowmapSizewidth: 8192, // Width of the shadow map
|
||||
// shadowmapSizeheight: 8192, // Height of the shadow map
|
||||
shadowcamerafar: 70, // Far plane of the shadow camera
|
||||
shadowcameranear: 0.1, // Near plane of the shadow camera
|
||||
shadowcameratop: 30, // Top plane of the shadow camera
|
||||
shadowcamerabottom: -30, // Bottom plane of the shadow camera
|
||||
shadowcameraleft: -30, // Left plane of the shadow camera
|
||||
shadowcameraright: 30, // Right plane of the shadow camera
|
||||
shadowbias: -0.001, // Bias of the shadow
|
||||
shadownormalBias: 0.02, // Normal bias of the shadow
|
||||
shadowmapSizewidth: 1024, // Width of the shadow map
|
||||
shadowmapSizeheight: 1024, // Height of the shadow map
|
||||
// shadowmapSizewidth: 8192, // Width of the shadow map
|
||||
// shadowmapSizeheight: 8192, // Height of the shadow map
|
||||
shadowcamerafar: 70, // Far plane of the shadow camera
|
||||
shadowcameranear: 0.1, // Near plane of the shadow camera
|
||||
shadowcameratop: 30, // Top plane of the shadow camera
|
||||
shadowcamerabottom: -30, // Bottom plane of the shadow camera
|
||||
shadowcameraleft: -30, // Left plane of the shadow camera
|
||||
shadowcameraright: 30, // Right plane of the shadow camera
|
||||
shadowbias: -0.001, // Bias of the shadow
|
||||
shadownormalBias: 0.02, // Normal bias of the shadow
|
||||
|
||||
shadowMaterialPosition: [0, 0.01, 0], // Position of the shadow material
|
||||
shadowMaterialRotation: [-Math.PI / 2, 0, 0], // Rotation 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
|
||||
|
||||
shadowMaterialOpacity: 0.1 // Opacity of the shadow material
|
||||
}
|
||||
shadowMaterialOpacity: 0.1, // Opacity of the shadow material
|
||||
};
|
||||
|
||||
export const skyConfig: SkyConfig = {
|
||||
defaultTurbidity: 10.0, // Default turbidity of the sky
|
||||
maxTurbidity: 20.0, // Maximum turbidity of the sky
|
||||
minTurbidity: 0.0, // Minimum turbidity of the sky
|
||||
defaultRayleigh: 1.9, // Default Rayleigh scattering coefficient
|
||||
mieCoefficient: 0.1, // Mie scattering coefficient
|
||||
mieDirectionalG: 1.0, // Mie directional G
|
||||
skyDistance: 2000 // Distance of the sky
|
||||
}
|
||||
defaultTurbidity: 10.0, // Default turbidity of the sky
|
||||
maxTurbidity: 20.0, // Maximum turbidity of the sky
|
||||
minTurbidity: 0.0, // Minimum turbidity of the sky
|
||||
defaultRayleigh: 1.9, // Default Rayleigh scattering coefficient
|
||||
mieCoefficient: 0.1, // Mie scattering coefficient
|
||||
mieDirectionalG: 1.0, // Mie directional G
|
||||
skyDistance: 2000, // Distance of the sky
|
||||
};
|
||||
|
||||
export const assetConfig: AssetConfig = {
|
||||
defaultScaleBeforeGsap: [0.1, 0.1, 0.1], // Default scale of the assets
|
||||
defaultScaleAfterGsap: [1, 1, 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
|
||||
};
|
||||
|
||||
export const pointConfig: PointConfig = {
|
||||
defaultInnerColor: "#ffffff", // Default inner color of the points
|
||||
defaultOuterColor: "#ffffff", // Default outer color of the points
|
||||
deleteColor: "#ff0000", // Color of the points when deleting
|
||||
boxScale: [0.5, 0.5, 0.5], // Scale of the points
|
||||
defaultInnerColor: "#ffffff", // Default inner color of the points
|
||||
defaultOuterColor: "#ffffff", // Default outer color of the points
|
||||
deleteColor: "#ff0000", // Color of the points when deleting
|
||||
boxScale: [0.5, 0.5, 0.5], // Scale of the points
|
||||
|
||||
wallOuterColor: "#C7C7C7", // Outer color of the wall points
|
||||
floorOuterColor: "#808080", // Outer color of the floor points
|
||||
aisleOuterColor: "#FBBC05", // Outer color of the aisle points
|
||||
zoneOuterColor: "#007BFF", // Outer color of the zone points
|
||||
wallOuterColor: "#C7C7C7", // Outer color of the wall points
|
||||
floorOuterColor: "#808080", // Outer color of the floor points
|
||||
aisleOuterColor: "#FBBC05", // Outer color of the aisle points
|
||||
zoneOuterColor: "#007BFF", // Outer color of the zone points
|
||||
|
||||
snappingThreshold: 1, // Threshold for snapping
|
||||
}
|
||||
snappingThreshold: 1, // Threshold for snapping
|
||||
};
|
||||
|
||||
export const lineConfig: LineConfig = {
|
||||
tubularSegments: 64, // Number of tubular segments
|
||||
radius: 0.15, // Radius of the lines
|
||||
radialSegments: 8, // Number of radial segments
|
||||
tubularSegments: 64, // Number of tubular segments
|
||||
radius: 0.15, // Radius of the lines
|
||||
radialSegments: 8, // Number of radial segments
|
||||
|
||||
wallName: "WallLine", // Name of the wall lines
|
||||
floorName: "FloorLine", // Name of the floor lines
|
||||
aisleName: "AisleLine", // Name of the aisle lines
|
||||
zoneName: "ZoneLine", // Name of the zone lines
|
||||
referenceName: "ReferenceLine", // Name of the reference lines
|
||||
wallName: "WallLine", // Name of the wall lines
|
||||
floorName: "FloorLine", // Name of the floor lines
|
||||
aisleName: "AisleLine", // Name of the aisle lines
|
||||
zoneName: "ZoneLine", // Name of the zone lines
|
||||
referenceName: "ReferenceLine", // Name of the reference lines
|
||||
|
||||
lineIntersectionPoints: 300, // Number of intersection points
|
||||
lineIntersectionPoints: 300, // Number of intersection points
|
||||
|
||||
defaultColor: "#000000", // Default color of the lines
|
||||
defaultColor: "#000000", // Default color of the lines
|
||||
|
||||
wallColor: "#C7C7C7", // Color of the wall lines
|
||||
floorColor: "#808080", // Color of the floor lines
|
||||
aisleColor: "#FBBC05", // Color of the aisle lines
|
||||
zoneColor: "#007BFF", // Color of the zone lines
|
||||
helperColor: "#C164FF" // Color of the helper lines
|
||||
}
|
||||
wallColor: "#C7C7C7", // Color of the wall lines
|
||||
floorColor: "#808080", // Color of the floor lines
|
||||
aisleColor: "#FBBC05", // Color of the aisle lines
|
||||
zoneColor: "#007BFF", // Color of the zone lines
|
||||
helperColor: "#C164FF", // Color of the helper lines
|
||||
};
|
||||
|
||||
export const wallConfig: WallConfig = {
|
||||
defaultColor: "white", // Default color of the walls
|
||||
height: 7, // Height of the walls
|
||||
width: 0.05, // Width of the walls
|
||||
}
|
||||
defaultColor: "white", // Default color of the walls
|
||||
height: 7, // Height of the walls
|
||||
width: 0.05, // Width of the walls
|
||||
};
|
||||
|
||||
export const floorConfig: FloorConfig = {
|
||||
defaultColor: "grey", // Default color of the floors
|
||||
height: 0.1, // Height of the floors
|
||||
textureScale: 0.1, // Scale of the floor texture
|
||||
}
|
||||
defaultColor: "grey", // Default color of the floors
|
||||
height: 0.1, // Height of the floors
|
||||
textureScale: 0.1, // Scale of the floor texture
|
||||
};
|
||||
|
||||
export const roofConfig: RoofConfig = {
|
||||
defaultColor: "grey", // Default color of the roofs
|
||||
height: 0.1 // Height of the roofs
|
||||
}
|
||||
defaultColor: "grey", // Default color of the roofs
|
||||
height: 0.1, // Height of the roofs
|
||||
};
|
||||
|
||||
export const aisleConfig: AisleConfig = {
|
||||
width: 0.1, // Width of the aisles
|
||||
height: 0.01, // Height of the aisles
|
||||
defaultColor: 0xffff00 // Default color of the aisles
|
||||
}
|
||||
width: 0.1, // Width of the aisles
|
||||
height: 0.01, // Height of the aisles
|
||||
defaultColor: 0xffff00, // Default color of the aisles
|
||||
};
|
||||
|
||||
export const zoneConfig: ZoneConfig = {
|
||||
defaultColor: "black", // Default color of the zones
|
||||
color: "blue" // Color of the zones
|
||||
}
|
||||
defaultColor: "black", // Default color of the zones
|
||||
color: "blue", // Color of the zones
|
||||
};
|
||||
|
||||
export const columnConfig: ColumnConfig = {
|
||||
defaultColor: "White", // Default color of the columns
|
||||
}
|
||||
defaultColor: "White", // Default color of the columns
|
||||
};
|
||||
|
||||
export const outlineConfig: OutlineConfig = {
|
||||
assetSelectColor: 0x0054fE, // Color of the selected assets
|
||||
assetDeleteColor: 0xFF0000 // Color of the deleted assets
|
||||
}
|
||||
assetSelectColor: 0x0054fe, // Color of the selected assets
|
||||
assetDeleteColor: 0xff0000, // Color of the deleted assets
|
||||
};
|
||||
|
||||
export const distanceConfig: DistanceConfig = {
|
||||
minDistance: 20,
|
||||
maxDistance: 75,
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue