box around selected objects in editor

This commit is contained in:
azykov@mail.ru 2026-06-02 18:19:55 +03:00
parent e56f92a4ac
commit f8c8c3f5b7
No known key found for this signature in database
3 changed files with 7 additions and 6 deletions

View File

@ -2,7 +2,8 @@ import { observer } from "mobx-react-lite";
import type { ObjectInstance } from "../types"; import type { ObjectInstance } from "../types";
import { useEffect, useRef, type RefObject } from "react"; import { useEffect, useRef, type RefObject } from "react";
import type { Group } from "three"; import type { Group } from "three";
import { Edges, TransformControls } from "@react-three/drei"; import { TransformControls, useHelper } from "@react-three/drei";
import { BoxHelper } from "three";
import type { ThreeEvent } from "@react-three/fiber"; import type { ThreeEvent } from "@react-three/fiber";
import { state } from "../state"; import { state } from "../state";
import { nextSelectionEditMode } from "../state/worldEditorState"; import { nextSelectionEditMode } from "../state/worldEditorState";
@ -16,11 +17,14 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
const groupRef = useRef<Group>(null); const groupRef = useRef<Group>(null);
const controlsRef = useRef<any>(null); const controlsRef = useRef<any>(null);
const isSelected = state.worldEditor.isEnabled &&
state.worldEditor.selectedObjectId === object.id;
useHelper(isSelected ? groupRef : { current: null } as any, BoxHelper, 'white');
const objectType = state.world.getObjectTypeById(object.typeId); const objectType = state.world.getObjectTypeById(object.typeId);
if (!objectType) if (!objectType)
return null; return null;
const isSelected = state.worldEditor.isEnabled &&
state.worldEditor.selectedObjectId === object.id;
const selectionMode = isSelected const selectionMode = isSelected
? state.worldEditor.selectedObjectMode ? state.worldEditor.selectedObjectMode
: undefined; : undefined;
@ -91,7 +95,6 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
opacity={opacity} opacity={opacity}
transparent={opacity < 1} transparent={opacity < 1}
/> />
{isSelected && <Edges color="white" lineWidth={3} stencilWrite={false} />}
</mesh> </mesh>
); );
}) })

View File

@ -1,7 +1,6 @@
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { state } from "../state"; import { state } from "../state";
import type { RunningGameState } from "../types";
export const Toolbar = observer(function () { export const Toolbar = observer(function () {

View File

@ -2,7 +2,6 @@ import { makeAutoObservable } from "mobx";
import type { WorldState } from "./worldState"; import type { WorldState } from "./worldState";
import type { RunningGameState, Scene } from "../types"; import type { RunningGameState, Scene } from "../types";
import { clone } from "../utils"; import { clone } from "../utils";
import { state } from "./rootState";
import type { Pos3 } from "../types/3d"; import type { Pos3 } from "../types/3d";
import type { CameraProps } from "@react-three/fiber"; import type { CameraProps } from "@react-three/fiber";