wall item checks

2026-01-20 07:56:40 +09:00
parent a35b982b4f
commit f59e12193d
5 changed files with 60 additions and 31 deletions
@@ -267,13 +267,13 @@ const DraftSelector = () => {
  const itemSelectedAt = useRef<number>(0);
  useEffect(() => {
    emitter.on("building:enter", (event) => {
-      console.log("Entered building:", event.node.id);
+      // console.log("Entered building:", event.node.id);
      const itemMesh = sceneRegistry.nodes.get(event.node.id);
      selectedObjects.length = 0;
      selectedObjects.push(itemMesh);
    });
    emitter.on("building:leave", (event) => {
-      console.log("Leaving building:", event.node.id);
+      // console.log("Leaving building:", event.node.id);
      selectedObjects.length = 0;
    });

@@ -14,7 +14,7 @@ import { useViewer } from "@pascal-app/viewer";
 import { useFrame } from "@react-three/fiber";
 import { is } from "@react-three/fiber/dist/declarations/src/core/utils";
 import { use, useEffect, useRef } from "react";
-import { BoxGeometry, Line, Mesh, Vector3 } from "three";
+import { BoxGeometry, Line, Mesh, MeshStandardMaterial, Vector3 } from "three";
 import { randInt } from "three/src/math/MathUtils.js";

 export const ItemTool: React.FC = () => {
@@ -23,13 +23,13 @@ export const ItemTool: React.FC = () => {
  const gridPosition = useRef(new Vector3(0, 0, 0));
  const selectedItem = useEditor((state) => state.selectedItem);
  const { canPlaceOnFloor, canPlaceOnWall } = useSpatialQuery();
+  const isOnWall = useRef(false);

  useEffect(() => {
    if (!selectedItem) {
      return;
    }

-    let isOnWall = false;
    let currentWallId: string | null = null;

    const checkCanPlace = () => {
@@ -37,7 +37,7 @@ export const ItemTool: React.FC = () => {
      if (currentLevelId && draftItem.current) {
        let placeable = true;
        if (draftItem.current.asset.attachTo) {
-          if (!isOnWall || !currentWallId) {
+          if (!isOnWall.current || !currentWallId) {
            placeable = false;
          } else {
            const result = canPlaceOnWall(
@@ -60,10 +60,12 @@ export const ItemTool: React.FC = () => {
          ).valid;
        }
        if (placeable) {
-          cursorRef.current.material.color.set("green");
+          (cursorRef.current.material as MeshStandardMaterial).color.set(
+            "green",
+          );
          return true;
        } else {
-          cursorRef.current.material.color.set("red");
+          (cursorRef.current.material as MeshStandardMaterial).color.set("red");
          return false;
        }
      }
@@ -91,7 +93,7 @@ export const ItemTool: React.FC = () => {
    const onGridMove = (event: GridEvent) => {
      if (!cursorRef.current) return;

-      if (isOnWall) return;
+      if (isOnWall.current) return;

      gridPosition.current.set(
        Math.round(event.position[0] * 2) / 2,
@@ -103,18 +105,18 @@ export const ItemTool: React.FC = () => {
        0,
        gridPosition.current.z,
      );
+      checkCanPlace();
      if (draftItem.current) {
        draftItem.current.position = [
          gridPosition.current.x,
          0,
          gridPosition.current.z,
        ];
-        checkCanPlace();
      }
    };
    const onGridClick = (event: GridEvent) => {
      const { currentLevelId } = useViewer.getState();
-      if (isOnWall) return;
+      if (isOnWall.current) return;

      if (!currentLevelId || !draftItem.current || !checkCanPlace()) return;

@@ -134,7 +136,7 @@ export const ItemTool: React.FC = () => {
        draftItem.current?.asset.attachTo === "wall-side"
      ) {
        event.stopPropagation();
-        isOnWall = true;
+        isOnWall.current = true;
        currentWallId = event.node.id;
        gridPosition.current.set(
          Math.round(event.localPosition[0] * 2) / 2,
@@ -155,7 +157,7 @@ export const ItemTool: React.FC = () => {
    };

    const onWallLeave = (event: WallEvent) => {
-      isOnWall = false;
+      isOnWall.current = false;
      currentWallId = null;
      event.stopPropagation();
      if (!draftItem.current) return;
@@ -174,7 +176,7 @@ export const ItemTool: React.FC = () => {

    const onWallClick = (event: WallEvent) => {
      event.stopPropagation();
-      if (!isOnWall) return;
+      if (!isOnWall.current) return;

      const currentLevelId = useViewer.getState().currentLevelId;
      if (!currentLevelId || !draftItem.current || !checkCanPlace()) return;
@@ -197,7 +199,7 @@ export const ItemTool: React.FC = () => {
    };

    const onWallMove = (event: WallEvent) => {
-      if (isOnWall === false) return;
+      if (isOnWall.current === false) return;
      event.stopPropagation();
      if (!draftItem.current) return;
      gridPosition.current.set(
@@ -206,18 +208,32 @@ export const ItemTool: React.FC = () => {
        Math.round(event.localPosition[2] * 2) / 2,
      );
      cursorRef.current.position.set(
-        event.position[0],
-        event.position[1],
-        event.position[2],
+        Math.round(event.position[0] * 2) / 2,
+        Math.round(event.position[1] * 2) / 2,
+        Math.round(event.position[2] * 2) / 2,
      );
-      if (draftItem.current) {
+      const {
+        node: { start, end },
+      } = event;
+      const dx = end[0] - start[0];
+      const dz = end[1] - start[1];
+      const { normal } = event;
+      const wallAngle = Math.atan2(dx, dz);
+
+      cursorRef.current.rotation.y = wallAngle + Math.PI / 2;
+      const canPlace = checkCanPlace();
+      if (draftItem.current && canPlace) {
        draftItem.current.position = [
          gridPosition.current.x,
          gridPosition.current.y,
          gridPosition.current.z,
        ];
+        const draftItemMesh = sceneRegistry.nodes.get(draftItem.current.id);
+        if (draftItemMesh) {
+          draftItemMesh.position.copy(gridPosition.current);
+        }
+
        useScene.getState().dirtyNodes.add(event.node.id);
-        checkCanPlace();
      }
    };

@@ -254,7 +270,7 @@ export const ItemTool: React.FC = () => {
  }, [selectedItem]);

  useFrame((_, delta) => {
-    if (draftItem.current) {
+    if (draftItem.current && !isOnWall.current) {
      const draftItemMesh = sceneRegistry.nodes.get(draftItem.current.id);
      if (draftItemMesh) {
        draftItemMesh.position.lerp(gridPosition.current, delta * 20);
@@ -325,7 +325,7 @@ export const CATALOG_ITEMS: AssetInput[] = [
    name: "Window",
    thumbnail: "/items/window-small/thumbnail.webp",
    src: "/items/window-small/model.glb",
-    offset: [0, 0, 0],
+    offset: [0, 0.15, 0],
    scale: [1, 1, 1],
    rotation: [0, Math.PI, 0],
    dimensions: [1, 1.5, 0.1],
@@ -34,6 +34,11 @@ export class SpatialGridManager {
    return Math.sqrt(dx * dx + dy * dy);
  }

+  private getWallHeight(wallId: string): number {
+    const wall = this.walls.get(wallId);
+    return wall?.height ?? 2.5; // Default wall height
+  }
+
  // Called when nodes change
  handleNodeCreated(node: AnyNode, levelId: string) {
    if (node.type === "wall") {
@@ -52,16 +57,16 @@ export class SpatialGridManager {
          if (wallLength > 0) {
            const [width, height] = item.asset.dimensions;
            const halfW = width / wallLength / 2;
-            const halfH = height / 2;
            // Calculate t from local X position (position[0] is distance along wall)
            const t = item.position[0] / wallLength;
+            // position[1] is the bottom of the item
            this.getWallGrid(levelId).insert({
              itemId: item.id,
              wallId: wallId,
              tStart: t - halfW,
              tEnd: t + halfW,
-              yStart: item.position[1] - halfH,
-              yEnd: item.position[1] + halfH,
+              yStart: item.position[1],
+              yEnd: item.position[1] + height,
            });
          }
        }
@@ -95,16 +100,16 @@ export class SpatialGridManager {
          if (wallLength > 0) {
            const [width, height] = item.asset.dimensions;
            const halfW = width / wallLength / 2;
-            const halfH = height / 2;
            // Calculate t from local X position (position[0] is distance along wall)
            const t = item.position[0] / wallLength;
+            // position[1] is the bottom of the item
            this.getWallGrid(levelId).insert({
              itemId: item.id,
              wallId: wallId,
              tStart: t - halfW,
              tEnd: t + halfW,
-              yStart: item.position[1] - halfH,
-              yEnd: item.position[1] + halfH,
+              yStart: item.position[1],
+              yEnd: item.position[1] + height,
            });
          }
        }
@@ -165,12 +170,14 @@ export class SpatialGridManager {
    if (wallLength === 0) {
      return { valid: false, conflictIds: [] };
    }
+    const wallHeight = this.getWallHeight(wallId);
    // Convert local X position to parametric t (0-1)
    const tCenter = localX / wallLength;
    const [itemWidth, itemHeight] = dimensions;
    return this.getWallGrid(levelId).canPlaceOnWall(
      wallId,
      wallLength,
+      wallHeight,
      tCenter,
      itemWidth,
      localY,
@@ -14,18 +14,24 @@ export class WallSpatialGrid {
  canPlaceOnWall(
    wallId: string,
    wallLength: number,
+    wallHeight: number,
    tCenter: number,
    itemWidth: number,
-    yCenter: number,
+    yBottom: number,
    itemHeight: number,
    ignoreIds: string[] = [],
  ): { valid: boolean; conflictIds: string[] } {
    const halfW = itemWidth / wallLength / 2;
-    const halfH = itemHeight / 2;
    const tStart = tCenter - halfW;
    const tEnd = tCenter + halfW;
-    const yStart = yCenter - halfH;
-    const yEnd = yCenter + halfH;
+    // yBottom is the bottom of the item, so yEnd = yBottom + itemHeight
+    const yStart = yBottom;
+    const yEnd = yBottom + itemHeight;
+
+    // Check wall boundaries
+    if (tStart < 0 || tEnd > 1 || yStart < 0 || yEnd > wallHeight) {
+      return { valid: false, conflictIds: [] };
+    }

    const existing = this.wallItems.get(wallId) ?? [];
    const ignoreSet = new Set(ignoreIds);