prevent plant icons from intersecting raycasting when adding objects

Author: roryaronson

frontend/three_d_garden/garden/__tests__/plant_instances_test.tsx

@@ -22,7 +22,12 @@ import { fireEvent, render } from "@testing-library/react";
 import { clone } from "lodash";
 import { useFrame } from "@react-three/fiber";
 import { useTexture } from "@react-three/drei";
-import { Quaternion } from "three";
+import {
+  InstancedMesh as ThreeInstancedMesh,
+  Quaternion,
+  type Intersection,
+  type Raycaster,
+} from "three";
 import { fakePlant } from "../../../__test_support__/fake_state/resources";
 import { INITIAL } from "../../config";
 import {
@@ -202,6 +207,50 @@ describe("<PlantInstances />", () => {
     expect(mockNavigate).not.toHaveBeenCalled();
   });
 
+  const iconRaycast = (p = fakeProps()) => {
+    const wrapper = createRenderer(<PlantInstances {...p} />);
+    const mesh = wrapper.root.findAll(node =>
+      (node.type as string) == "instancedMesh")[0];
+    const raycast = mesh.props.raycast as (
+      this: ThreeInstancedMesh,
+      raycaster: Raycaster,
+      intersects: Intersection[],
+    ) => void;
+    unmountRenderer(wrapper);
+    return raycast;
+  };
+
+  it.each([
+    Mode.clickToAdd,
+    Mode.createPoint,
+    Mode.createWeed,
+  ])("allows %s raycasts through plant icons", mode => {
+    getModeSpy.mockReturnValue(mode);
+    const defaultRaycast = jest.spyOn(
+      ThreeInstancedMesh.prototype,
+      "raycast",
+    );
+    const intersects: Intersection[] = [];
+    const raycaster = {} as Raycaster;
+    iconRaycast().call({} as ThreeInstancedMesh, raycaster, intersects);
+    expect(defaultRaycast).not.toHaveBeenCalled();
+    expect(intersects).toEqual([]);
+    defaultRaycast.mockRestore();
+  });
+
+  it("keeps plant icon raycasts outside placement modes", () => {
+    getModeSpy.mockReturnValue(Mode.none);
+    const defaultRaycast = jest.spyOn(
+      ThreeInstancedMesh.prototype,
+      "raycast",
+    ).mockImplementation(() => undefined);
+    const intersects: Intersection[] = [];
+    const raycaster = {} as Raycaster;
+    iconRaycast().call({} as ThreeInstancedMesh, raycaster, intersects);
+    expect(defaultRaycast).toHaveBeenCalledWith(raycaster, intersects);
+    defaultRaycast.mockRestore();
+  });
+
   it("doesn't navigate with missing instanceId", () => {
     setMockInstanceId(undefined);
     const p = fakeProps();

frontend/three_d_garden/garden/plant_instances.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import {
-  InstancedMesh as InstancedMeshType,
+  InstancedMesh as ThreeInstancedMesh,
   Matrix4,
   Quaternion,
   Vector3,
   MeshBasicMaterial as ThreeMeshBasicMaterial,
+  type Intersection,
+  type Raycaster,
 } from "three";
 import { ThreeEvent, useFrame } from "@react-three/fiber";
 import { useNavigate } from "react-router";
@@ -60,6 +62,15 @@ const newPlantIconUpdateState = (): PlantIconUpdateState => ({
 export const plantIconBrightness = (sunFactor?: number) =>
   Math.max(0.25, sunFactor ?? 1);
 
+const plantIconRaycast = function (
+  this: ThreeInstancedMesh,
+  raycaster: Raycaster,
+  intersects: Intersection[],
+) {
+  if (HOVER_OBJECT_MODES.includes(getMode())) { return; }
+  ThreeInstancedMesh.prototype.raycast.call(this, raycaster, intersects);
+};
+
 const PlantIconInstances = (props: PlantIconInstancesProps) => {
   const {
     config, plants, icon, visible, startTimeRef, dispatch, getZ, plantIndexes,
@@ -71,7 +82,7 @@ const PlantIconInstances = (props: PlantIconInstancesProps) => {
     () => getPlantIconTexture(baseTexture, icon),
     [baseTexture, icon]);
   // eslint-disable-next-line no-null/no-null
-  const instancedRef = React.useRef<InstancedMeshType>(null);
+  const instancedRef = React.useRef<ThreeInstancedMesh>(null);
   // eslint-disable-next-line no-null/no-null
   const materialRef = React.useRef<ThreeMeshBasicMaterial>(null);
   const lastBrightness = React.useRef<number | undefined>(undefined);
@@ -168,6 +179,7 @@ const PlantIconInstances = (props: PlantIconInstancesProps) => {
     frustumCulled={false}
     userData={{ plantIndexes }}
     visible={visible}
+    raycast={plantIconRaycast}
     onClick={onClick}
     renderOrder={RenderOrder.plants}>
     <PlaneGeometry args={[1, 1]} />