camera.tsx

import { useEffect, useRef, useState } from "react";
import { ThreeEvent, useFrame, useLoader, useThree } from "@react-three/fiber";
import { Billboard, useGLTF } from "@react-three/drei";
import { OrbitControls } from "three-stdlib";
import { Mesh, Vector2, Vector3 } from "three";
import { NodeData } from "../_types/node-data";
import { useStore } from "../store/store";
import { useStore as useInsertStore } from "../store/insert-thing-store";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { modelPathFromType } from "../utils/model-path-from-type";
import { GenericModel } from "./generic-model";
import { useModel } from "../hooks/useModel";

export const SetOnViewModel = (props: JSX.IntrinsicElements["mesh"]) => {
  //make mesh use same as place type

  const insertType = useInsertStore((state) => state.requiredData.type);
  const root = useModel(modelPathFromType(insertType as any));
  const threeState = useThree();
  const layoutClickIsDown = useStore((state) => state.layoutClickIsDown);

  const ref = useRef<THREE.Mesh>(null!);
  const [hovered, setHover] = useState(false);
  useFrame((state, delta) => {
    if (!isSettingOnView) return;

    let layout = threeState.scene.children.find(
      (child) => child.name === "layout"
    )?.children;

    if (!layout) return;

    const intersects = threeState.raycaster.intersectObjects(layout, true);
    if (!intersects[0]) {
      ref.current.visible = false;
      return;
    } else ref.current.visible = true;

    ref.current.position.set(
      intersects[0].point.x,
      intersects[0].point.y,
      intersects[0].point.z
    );

    if (layoutClickIsDown) {
      stopSettingPos(
        intersects[0].point.x,
        intersects[0].point.y,
        intersects[0].point.z
      );
    }
  });

  const isSettingOnView = useStore((state) => state.isSettingOnView);
  const stopSettingPos = useStore((state) => state.stopSettingPos);

  // const onClick = (e: ThreeEvent<MouseEvent>) => {
  //   stopSettingPos(
  //     ref.current.position.x,
  //     ref.current.position.y,
  //     ref.current.position.z
  //   );
  // };

  return (
    <GenericModel
      rootElement={root}
      visible={isSettingOnView}
      ref={ref}
      //onClick={(event) => setActive(!active)}
      // onClick={(e: ThreeEvent<MouseEvent>) => onClick(e)}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}
      color="orange"
    ></GenericModel>
  );
};