diff --git a/server/package.json b/server/package.json index 881880b..45cb42d 100644 --- a/server/package.json +++ b/server/package.json @@ -24,13 +24,13 @@ "chai": "latest", "eslint": "^8.47.0", "mocha": "latest", - "node-watch": "^0.7.4", - "nodemon": "^3.0.1", "nyc": "latest", "source-map-support": "latest", "ts-node": "^10.9.1", "tslint": "latest", - "typescript": "^5.1.6" + "typescript": "^5.1.6", + "node-watch": "^0.7.4", + "nodemon": "^3.0.1" }, "dependencies": { "@grpc/grpc-js": "^1.9.0", diff --git a/ui/src/core/extensions/extensions.ts b/ui/src/core/extensions/extensions.ts index 3f6f7dd..b77c8b0 100644 --- a/ui/src/core/extensions/extensions.ts +++ b/ui/src/core/extensions/extensions.ts @@ -44,6 +44,7 @@ declare global { toArray(): V[]; getPredicateValue(callBack: (value: V) => boolean): K[]; } + interface Vector3 {} } export const extensions = () => { StringExtensions(); diff --git a/ui/src/core/repository/core_three_repository.ts b/ui/src/core/repository/core_three_repository.ts index ea22b31..531c0c2 100644 --- a/ui/src/core/repository/core_three_repository.ts +++ b/ui/src/core/repository/core_three_repository.ts @@ -21,9 +21,7 @@ import { Quaternion, MeshBasicMaterial, PlaneGeometry, - BoxGeometry, - BufferGeometry, - Line, + BoxGeometry } from "three"; import { TypedEvent } from "../helper/typed_event"; import { Result } from "../helper/result"; @@ -36,8 +34,7 @@ import { import { SceneMode } from "../../features/scene_manager/model/scene_view"; import { throttle } from "../helper/throttle"; import { Asset, InstanceRgbCamera, RobossemblerAssets, SceneSimpleObject } from "../model/robossembler_assets"; -import { CoreVector3 } from "../model/core_vector3"; - + export enum UserData { selectedObject = "selected_object", cameraInitialization = "camera_initialization", @@ -288,6 +285,18 @@ export class CoreThreeRepository extends TypedEvent { floor.userData = {}; floor.userData[UserData.cameraInitialization] = true; this.scene.add(floor); + + const planeMesh = new Mesh( + new PlaneGeometry(10, 10, 10, 10), + new MeshBasicMaterial({ color: 0x808080, wireframe: true }) + ); + planeMesh.userData[UserData.selectedObject] = true; + planeMesh.userData[UserData.objectForMagnetism] = true; + planeMesh.rotation.x = -Math.PI / 2; + this.makeCube(1); + this.makeCube(2, new Vector3(20, 0, 10), "yellow"); + + this.scene.add(planeMesh); } render() { diff --git a/ui/src/features/behavior_tree_builder/presentation/behavior_tree_builder_store.tsx b/ui/src/features/behavior_tree_builder/presentation/behavior_tree_builder_store.tsx index 5b3946e..a67032a 100644 --- a/ui/src/features/behavior_tree_builder/presentation/behavior_tree_builder_store.tsx +++ b/ui/src/features/behavior_tree_builder/presentation/behavior_tree_builder_store.tsx @@ -1,6 +1,5 @@ import makeAutoObservable from "mobx-store-inheritance"; import xmlFormat from "xml-formatter"; - import { HttpError } from "../../../core/repository/http_repository"; import { UiErrorState } from "../../../core/store/base_store"; import { BtBuilderModel, BtNodeView, ReteObserver } from "../model/editor_view"; diff --git a/ui/src/features/behavior_tree_builder/presentation/ui/editor/background.css b/ui/src/features/behavior_tree_builder/presentation/ui/editor/background.css new file mode 100644 index 0000000..6db054b --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/ui/editor/background.css @@ -0,0 +1,19 @@ +.fill-area { + display: table; + z-index: -1; + position: absolute; + top: -320000px; + left: -320000px; + width: 640000px; + height: 640000px; +} + +.background { + background-color: #ffffff; + opacity: 1; + background-image: linear-gradient(#f1f1f1 3.2px, transparent 3.2px), + linear-gradient(90deg, #f1f1f1 3.2px, transparent 3.2px), linear-gradient(#f1f1f1 1.6px, transparent 1.6px), + linear-gradient(90deg, #f1f1f1 1.6px, #ffffff 1.6px); + background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; + background-position: -3.2px -3.2px, -3.2px -3.2px, -1.6px -1.6px, -1.6px -1.6px; +} diff --git a/ui/src/features/behavior_tree_builder/presentation/ui/editor/custom_node.tsx b/ui/src/features/behavior_tree_builder/presentation/ui/editor/custom_node.tsx new file mode 100644 index 0000000..b651623 --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/ui/editor/custom_node.tsx @@ -0,0 +1,164 @@ +import * as React from "react"; +import { ClassicScheme, RenderEmit, Presets } from "rete-react-plugin"; +import styled, { css } from "styled-components"; +import { $nodewidth, $socketmargin, $socketsize } from "./vars"; + +const { RefSocket, RefControl } = Presets.classic; + +type NodeExtraData = { width?: number; height?: number }; + +export const NodeStyles = styled.div any }>` + background: black; + border: 2px solid grey; + border-radius: 10px; + cursor: pointer; + box-sizing: border-box; + width: ${(props) => (Number.isFinite(props.width) ? `${props.width}px` : `${$nodewidth}px`)}; + height: ${(props) => (Number.isFinite(props.height) ? `${props.height}px` : "auto")}; + padding-bottom: 6px; + position: relative; + user-select: none; + &:hover { + background: #333; + } + ${(props) => + props.selected && + css` + border-color: red; + `} + .title { + color: white; + font-family: sans-serif; + font-size: 18px; + padding: 8px; + } + .output { + text-align: right; + } + .input { + text-align: left; + } + .output-socket { + text-align: right; + margin-right: -1px; + display: inline-block; + } + .input-socket { + text-align: left; + margin-left: -1px; + display: inline-block; + } + .input-title, + .output-title { + vertical-align: middle; + color: white; + display: inline-block; + font-family: sans-serif; + font-size: 14px; + margin: ${$socketmargin}px; + line-height: ${$socketsize}px; + } + .input-control { + z-index: 1; + width: calc(100% - ${$socketsize + 2 * $socketmargin}px); + vertical-align: middle; + display: inline-block; + } + .control { + display: block; + padding: ${$socketmargin}px ${$socketsize / 2 + $socketmargin}px; + } + ${(props) => props.styles && props.styles(props)} +`; + +function sortByIndex(entries: T) { + entries.sort((a, b) => { + const ai = a[1]?.index || 0; + const bi = b[1]?.index || 0; + + return ai - bi; + }); +} + +type Props = { + data: S["Node"] & NodeExtraData; + styles?: () => any; + emit: RenderEmit; +}; +export type NodeComponent = (props: Props) => JSX.Element; + +export function CustomNode(props: Props) { + const inputs = Object.entries(props.data.inputs); + const outputs = Object.entries(props.data.outputs); + const controls = Object.entries(props.data.controls); + const selected = props.data.selected || false; + const { id, label, width, height } = props.data; + + sortByIndex(inputs); + sortByIndex(outputs); + sortByIndex(controls); + + return ( + +
{ + e.stopPropagation(); + console.log(">>>"); + }} + className="title" + data-testid="title" + > + {label} +
+ + {outputs.map( + ([key, output]) => + output && ( +
+
BODY
+
+ {output?.label} +
+ +
+ ) + )} + + {controls.map(([key, control]) => { + return control ? : null; + })} + {inputs.map( + ([key, input]) => + input && ( +
+ + {input && (!input.control || !input.showControl) && ( +
+ {input?.label} +
+ )} + {input?.control && input?.showControl && ( + + + + )} +
+ ) + )} + + ); +} diff --git a/ui/src/features/behavior_tree_builder/presentation/ui/editor/editor_view.ts b/ui/src/features/behavior_tree_builder/presentation/ui/editor/editor_view.ts new file mode 100644 index 0000000..027105b --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/ui/editor/editor_view.ts @@ -0,0 +1,7 @@ +import { TypedEvent } from "../../../../../core/helper/typed_event"; +export interface BtDrawView { + x: number; + y: number; + name: string; +} +export class BtNodeView extends TypedEvent {} diff --git a/ui/src/features/behavior_tree_builder/presentation/ui/editor/style_node.tsx b/ui/src/features/behavior_tree_builder/presentation/ui/editor/style_node.tsx new file mode 100644 index 0000000..f0cb56b --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/ui/editor/style_node.tsx @@ -0,0 +1,30 @@ +import { Presets } from "rete-react-plugin"; +import { css } from "styled-components"; +import "./background.css"; + +const styles = css<{ selected?: boolean }>` + background: #ebebeb; + border-color: #646464; + .title { + color: #646464; + } + &:hover { + background: #f2f2f2; + } + .output-socket { + margin-right: -1px; + } + .input-socket { + margin-left: -1px; + } + ${(props) => + props.selected && + css` + border-color: red; + `} +`; + +export function StyledNode(props: any) { + // eslint-disable-next-line react/jsx-pascal-case + return styles} {...props} />; +} diff --git a/ui/src/features/behavior_tree_builder/presentation/ui/editor/vars.tsx b/ui/src/features/behavior_tree_builder/presentation/ui/editor/vars.tsx new file mode 100644 index 0000000..c79b882 --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/ui/editor/vars.tsx @@ -0,0 +1,3 @@ +export const $nodewidth = 200; +export const $socketmargin = 6; +export const $socketsize = 16; diff --git a/ui/src/features/scene_manager/presentation/scene_manager.tsx b/ui/src/features/scene_manager/presentation/scene_manager.tsx index 62267a4..c08ebcb 100644 --- a/ui/src/features/scene_manager/presentation/scene_manager.tsx +++ b/ui/src/features/scene_manager/presentation/scene_manager.tsx @@ -1,13 +1,8 @@ import * as React from "react"; import { SceneMangerStore } from "./scene_manager_store"; import { observer } from "mobx-react-lite"; -import { StaticAssetModelView } from "./components/static_asset_item_view"; import { useParams } from "react-router-dom"; import { SceneManagerView, SceneMode } from "../model/scene_view"; -import { Button } from "antd"; -import { Form, Input, ResetButton, SubmitButton } from "formik-antd"; -import { Formik } from "formik"; -import { CameraViewModel } from "../model/scene_assets"; import { MainPage } from "../../../core/ui/pages/main_page"; export const SceneManagerPath = "/scene/manager/"; diff --git a/ui/src/features/scene_manager/presentation/scene_manager_store.ts b/ui/src/features/scene_manager/presentation/scene_manager_store.ts index 7e38487..a2f0be2 100644 --- a/ui/src/features/scene_manager/presentation/scene_manager_store.ts +++ b/ui/src/features/scene_manager/presentation/scene_manager_store.ts @@ -1,6 +1,6 @@ import makeAutoObservable from "mobx-store-inheritance"; -import { CoreThreeRepository } from "../../../core/repository/core_three_repository"; -import { Object3D, Vector2 } from "three"; +import { CoreThreeRepository, UserData } from "../../../core/repository/core_three_repository"; +import { Object3D, Vector2, Vector3 } from "three"; import { HttpError } from "../../../core/repository/http_repository"; import { UiErrorState } from "../../../core/store/base_store"; import { UiBaseError } from "../../../core/model/ui_base_error"; diff --git a/ui/src/features/stick_objects_marking/stick_objects_marking_screen.tsx b/ui/src/features/stick_objects_marking/stick_objects_marking_screen.tsx new file mode 100644 index 0000000..74d0056 --- /dev/null +++ b/ui/src/features/stick_objects_marking/stick_objects_marking_screen.tsx @@ -0,0 +1,133 @@ +import * as React from "react"; +import { observer } from "mobx-react-lite"; +import { useParams } from "react-router-dom"; +import { Button } from "antd"; +import { StickObjectsMarkingStore, StickObjectsMarkingStoreMode } from "./stick_objects_marking_store"; +import { Vector3 } from "three"; + +export const StickObjectsMarking = "/stick/objects/marking"; +interface StickButtonsProps { + isVisible: boolean; + name: string; + groupMode: StickObjectsMarkingStoreMode; + storeMode: StickObjectsMarkingStoreMode; + storeModePoints: StickObjectsMarkingStoreMode; + setMode: Function; + setPointMode: Function; + points: Vector3[]; + body: string; +} + +export const StickButtons: React.FunctionComponent = observer((props) => { + return ( + <> + {props.isVisible ? ( + <> + {props.name} + + {props.points.map((el) => { + return ( + <> + {el.x} {el.y} {el.z} + + ); + })} + + ) : ( + + )} + + ); +}); + +export const StickObjectsMarkingScreen = observer(() => { + const canvasRef = React.useRef(null); + const [store] = React.useState(() => new StickObjectsMarkingStore()); + const id = useParams().id as string; + + React.useEffect(() => { + store.init(); + store.loadScene(canvasRef.current!); + document.body.style.overflow = "hidden"; + return () => { + document.body.style.overflow = "scroll"; + store.dispose(); + }; + }, [id, store]); + + return ( +
+ +
+
+ {Object.keys(store.points).map((el) => { + // @ts-expect-error + const v = store.points[el]; + return ( + <> +
+ {el as string}:{v} +
+ + ); + })} +
Marking objects for sticking
+
+ store.setMode(StickObjectsMarkingStoreMode.objectThatSticks)} + groupMode={StickObjectsMarkingStoreMode.objectThatSticks} + name={store.objectThatSticksName} + storeModePoints={StickObjectsMarkingStoreMode.addPointsObjectThatSticks} + isVisible={store.objectThatSticksName !== undefined} + setPointMode={() => store.setMode(StickObjectsMarkingStoreMode.addPointsObjectThatSticks)} + points={store.objectThatSticksNamePoints} + body="objectThatSticksName" + /> + store.setMode(StickObjectsMarkingStoreMode.objectsToWhichItSticks)} + groupMode={StickObjectsMarkingStoreMode.objectsToWhichItSticks} + name={store.objectsToWhichItSticksName} + storeModePoints={StickObjectsMarkingStoreMode.addPointsObjectsToWhichItSticks} + isVisible={store.objectsToWhichItSticksName !== undefined} + setPointMode={() => store.setMode(StickObjectsMarkingStoreMode.addPointsObjectsToWhichItSticks)} + /> + + +
+
+
+
+ ); +}); diff --git a/ui/src/features/stick_objects_marking/stick_objects_marking_store.tsx b/ui/src/features/stick_objects_marking/stick_objects_marking_store.tsx new file mode 100644 index 0000000..644f9f1 --- /dev/null +++ b/ui/src/features/stick_objects_marking/stick_objects_marking_store.tsx @@ -0,0 +1,164 @@ +import makeAutoObservable from "mobx-store-inheritance"; +import { Box3, Vector2, Vector3 } from "three"; +import { UiErrorState } from "../../core/store/base_store"; +import { HttpError } from "../../core/repository/http_repository"; +import { UiBaseError } from "../../core/model/ui_base_error"; +import { RobossemblerFiles } from "../scene_manager/model/scene_assets"; +import { StickObjectsMarkingThreeRepository } from "./stick_objects_marking_three_repository"; +import { UserData } from "../../core/repository/core_three_repository"; +import { ObjectExtensionsIsKeyExists } from "../../core/extensions/object"; + +export enum StickObjectsMarkingStoreMode { + objectsToWhichItSticks = "objectsToWhichItSticks", + objectThatSticks = "objectThatSticks", + addPointsObjectsToWhichItSticks = "addPointsObjectsToWhichItSticks", + addPointsObjectThatSticks = "addPointsObjectThatSticks", + move = "move", +} + +export class StickyHelper { + objectThatSticksName: string; + objectThatSticksNamePoints: Vector3[] = []; + objectsToWhichItSticksName: string; + objectsToWhichItSticksPoints: Vector3[] = []; + + constructor( + objectThatSticksName: string, + objectThatSticksNamePoints: Vector3[], + objectsToWhichItSticksName: string, + objectsToWhichItSticksPoints: Vector3[] + ) { + this.objectThatSticksName = objectThatSticksName; + this.objectThatSticksNamePoints = objectThatSticksNamePoints; + this.objectsToWhichItSticksName = objectsToWhichItSticksName; + this.objectsToWhichItSticksPoints = objectsToWhichItSticksPoints; + } +} + +export class StickObjectsMarkingStore extends UiErrorState { + mode: StickObjectsMarkingStoreMode; + stickObjectsMarkingThreeRepository: null | StickObjectsMarkingThreeRepository = null; + objectThatSticksName: string; + objectThatSticksNamePoints: Vector3[] = []; + objectsToWhichItSticksName: string; + objectsToWhichItSticksPoints: Vector3[] = []; + points = {}; + constructor() { + super(); + makeAutoObservable(this); + this.points = {}; + this.mode = StickObjectsMarkingStoreMode.move; + this.loadStickyJSON( + '{"objectThatSticksName":"cube2","objectThatSticksNamePoints":[{"x":5,"y":-0.5419443937360455,"z":0.041458499858311626}],"objectsToWhichItSticksName":"cube1","objectsToWhichItSticksPoints":[{"x":-5,"y":-2.2134708060033113,"z":1.1937718220731925}]}' + ); + } + updatePoint = (key: string, value: any) => { + // @ts-expect-error + this.points[key] = value; + }; + onSaveSticky(): void { + window.prompt( + "Copy to clipboard: Ctrl+C, Enter", + JSON.stringify( + new StickyHelper( + this.objectThatSticksName, + this.objectThatSticksNamePoints, + this.objectsToWhichItSticksName, + this.objectsToWhichItSticksPoints + ) + ) + ); + } + setMode(stickObjectsMarkingStoreMode: StickObjectsMarkingStoreMode): void { + this.mode = stickObjectsMarkingStoreMode; + } + + loaderWatcher() {} + + async init(): Promise {} + + errorHandingStrategy = (error: HttpError) => { + if (error.status === 404) { + this.errors.push(new UiBaseError(`${RobossemblerFiles.robossemblerAssets} not found to project`)); + } + }; + + async loadScene(canvasRef: HTMLCanvasElement) { + this.loadWebGl(canvasRef); + } + watcherSceneEditorObject() {} + loadWebGl(canvasRef: HTMLCanvasElement): void { + this.stickObjectsMarkingThreeRepository = new StickObjectsMarkingThreeRepository( + canvasRef as HTMLCanvasElement, + this.watcherSceneEditorObject, + this.updatePoint + ); + this.stickObjectsMarkingThreeRepository.stickyHelperLoader([ + new StickyHelper( + this.objectThatSticksName, + this.objectThatSticksNamePoints, + this.objectsToWhichItSticksName, + this.objectsToWhichItSticksPoints + ), + ]); + this.stickObjectsMarkingThreeRepository.render(); + window.addEventListener("click", (event) => this.clickLister(event)); + } + + clickLister(event: MouseEvent) { + const vector = new Vector2(); + vector.x = (event.clientX / window.innerWidth) * 2 - 1; + vector.y = -(event.clientY / window.innerHeight) * 2 + 1; + if (this.mode) { + if (this.mode === StickObjectsMarkingStoreMode.move) { + this.stickObjectsMarkingThreeRepository?.setRayCastAndGetFirstObject(vector).fold( + (success) => this.stickObjectsMarkingThreeRepository?.setTransformControlsAttach(success), + (_error) => this.stickObjectsMarkingThreeRepository?.disposeTransformControlsMode() + ); + } + this.stickObjectsMarkingThreeRepository?.setRayCast(vector).map((touch) => { + const objectMagnetism = touch.filter((el) => el.object.userData[UserData.objectForMagnetism] === true); + const BoundBoxVector = new Box3().setFromObject(objectMagnetism[0].object).getCenter(new Vector3()); + const centerRelativeVector = new Vector3().subVectors(BoundBoxVector, objectMagnetism[0].point); + if (objectMagnetism.isNotEmpty()) { + if (this.mode === StickObjectsMarkingStoreMode.objectsToWhichItSticks) { + this.objectsToWhichItSticksName = objectMagnetism[0].object.name; + } + if (this.mode === StickObjectsMarkingStoreMode.objectThatSticks) { + this.objectThatSticksName = objectMagnetism[0].object.name; + } + if (this.mode === StickObjectsMarkingStoreMode.addPointsObjectThatSticks) { + this.objectThatSticksNamePoints.push(centerRelativeVector); + } + if (this.mode === StickObjectsMarkingStoreMode.addPointsObjectsToWhichItSticks) { + this.objectsToWhichItSticksPoints.push(centerRelativeVector); + } + } + }); + } + } + + dispose() { + window.removeEventListener("click", this.clickLister); + } + loadStickyJSON(value: string): void { + const object = JSON.parse(value) as Object; + if ( + ObjectExtensionsIsKeyExists(object, [ + "objectThatSticksName", + "objectThatSticksNamePoints", + "objectsToWhichItSticksName", + "objectsToWhichItSticksPoints", + ]) + ) { + // @ts-expect-error + this.objectThatSticksName = object["objectThatSticksName"]; + // @ts-expect-error + this.objectThatSticksNamePoints = object["objectThatSticksNamePoints"]; + // @ts-expect-error + this.objectsToWhichItSticksName = object["objectsToWhichItSticksName"]; + // @ts-expect-error + this.objectsToWhichItSticksPoints = object["objectsToWhichItSticksPoints"]; + } + } +} diff --git a/ui/src/features/stick_objects_marking/stick_objects_marking_three_repository.ts b/ui/src/features/stick_objects_marking/stick_objects_marking_three_repository.ts new file mode 100644 index 0000000..b9f136d --- /dev/null +++ b/ui/src/features/stick_objects_marking/stick_objects_marking_three_repository.ts @@ -0,0 +1,101 @@ +import { Box3, BoxGeometry, Mesh, MeshBasicMaterial, Object3D, Vector3 } from "three"; +import { CoreThreeRepository } from "../../core/repository/core_three_repository"; +import { StickyHelper } from "./stick_objects_marking_store"; +import { CoreVector3 } from "../../core/model/core_vector3"; + +export class StickObjectsMarkingThreeRepository extends CoreThreeRepository { + stickyObjects: StickyHelper[]; + drawUiPoint: Function; + constructor(htmlCanvasRef: HTMLCanvasElement, watcherSceneEditorObject: Function, updatePoint: Function) { + super(htmlCanvasRef, watcherSceneEditorObject); + this.drawUiPoint = updatePoint; + this.sceneWatcher(); + } + + getStickyObject(name: string, pointNameHelper: string, index: number) { + const objectThatSticksNameMesh = this.scene.getObjectByName(name); + const pointName = objectThatSticksNameMesh!.name + ":point:" + index + pointNameHelper; + return this.scene.getObjectByName(pointName); + } + + mapperStickyObject(point: Vector3, index: number, name: string, pointNameHelper: string) { + const objectThatSticksNameMesh = this.scene.getObjectByName(name); + const pointName = objectThatSticksNameMesh!.name + ":point:" + index + pointNameHelper; + const sceneObject = this.scene.getObjectByName(pointName); + let pointMesh: Object3D; + if (sceneObject) { + pointMesh = sceneObject; + } else { + pointMesh = new Mesh(new BoxGeometry(1.1, 1.1, 1.1), new MeshBasicMaterial({ color: "#8BC34A" })); + } + pointMesh.position.copy(new Box3().setFromObject(objectThatSticksNameMesh!).getCenter(new Vector3()).add(point)); + pointMesh.name = pointName; + if (sceneObject === undefined) this.scene.add(pointMesh); + } + + stickyHelperLoader(stickyObjects: StickyHelper[]) { + this.stickyObjects = stickyObjects; + + stickyObjects.forEach((el) => { + el.objectThatSticksNamePoints.forEach((point, index) => + this.mapperStickyObject(point, index, el.objectThatSticksName, "objectThatSticksNamePoints") + ); + el.objectsToWhichItSticksPoints.forEach((point, index) => + this.mapperStickyObject(point, index, el.objectsToWhichItSticksName, "objectsToWhichItSticksPoints") + ); + }); + } + getCenter(obj: Object3D) { + return new Box3().setFromObject(obj).getCenter(new Vector3()); + } + sceneWatcher() { + this.transformControls.addEventListener("objectChange", (event) => { + //@ts-expect-error + const sceneActiveObject = event.target.object as Mesh; + + this.stickyObjects.forEach((stickyHelper) => { + if (sceneActiveObject.name === stickyHelper.objectThatSticksName) { + //локальные векторы точек + const objectThatSticksNameLocalVector = stickyHelper.objectThatSticksNamePoints[0]; + const objectsToWhichItSticksPointLocalVector = stickyHelper.objectsToWhichItSticksPoints[0]; + + //глобальные векторы обьектов + const globalVectorObjStickyName = this.scene.getObjectByName(stickyHelper.objectThatSticksName); + + const globalVectorObjToWhichSticks = this.scene.getObjectByName(stickyHelper.objectsToWhichItSticksName); + + const objectsToWhichItSticksNamePosition = new CoreVector3(globalVectorObjToWhichSticks!.position).add( + objectsToWhichItSticksPointLocalVector + ).vector; + + this.scene + .getObjectByName("cube2:point:0objectThatSticksNamePoints") + ?.position.copy(objectsToWhichItSticksNamePosition); + + // this.scene.getObjectByName("cube2:point:0objectThatSticksNamePoints")?.position; + + globalVectorObjStickyName?.position.copy( + this.scene + .getObjectByName("cube2:point:0objectThatSticksNamePoints")! + .position.add(objectsToWhichItSticksPointLocalVector) + ); + + // console.log(this.scene.children.map((e) => console.log(e.name))); + // cube2:point:0objectThatSticksNamePoints + // cube1:point:0objectsToWhichItSticksPoints + + // this.makePoint(objectThatSticksNamePosition, "red", 1.1); + // this.makePoint(objectsToWhichItSticksNamePosition, "red", 1.1); + + // const movePosition = objectThatSticksNamePosition.sub(objectsToWhichItSticksNamePosition); + // const movePosition = new Vector3().subVectors( + // objectThatSticksNamePosition, + // objectsToWhichItSticksNamePosition + // ); + + // this.scene.getObjectByName(stickyHelper.objectsToWhichItSticksName)?.position.copy(movePosition); + } + }); + }); + } +} diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 69c84c6..d952371 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -1,9 +1,7 @@ import React from "react"; import ReactDOM from "react-dom/client"; import "reflect-metadata"; - import "antd/dist/antd.min.css"; - import { extensions } from "./core/extensions/extensions"; import { SocketLister } from "./features/socket_lister/socket_lister"; import { RouterProvider } from "react-router-dom";