防止单击React-Fiber Three.js中的对象

Question

这是一个我可以点击的平面立方体

​

​

到目前为止，这种方式的主要问题是，当我只想单击鼠标所在的平面时，在平面上单击就会点击通过。我的Three.js飞机遗漏了什么？

我试着在three.js上搜索与collision相关的东西，但到目前为止都没有用。

经过进一步的研究，我认为这与RayCasting有关

import React, { useState, useRef } from "react";
import { OrbitControls, Plane } from "@react-three/drei";
import { Canvas, useFrame, useThree, extend } from "@react-three/fiber";
import styles from "../styles/game.module.css";
import { DoubleSide } from "three";

const Cell = (props) => {
  const [hovered, hover] = useState(false);
  const [checked, setChecked] = useState(false);

  const colorStyle = () => {
    if (hovered) return "hotpink";
    if (checked) return "lightblue";
    return "orange";
  };
  return (
    <Plane
      scale={1}
      onClick={() => setChecked(!checked)}
      onPointerEnter={() => hover(true)}
      onPointerLeave={() => hover(false)}
      position={props.position}
      rotation={props.rotation}
    >
      <meshPhongMaterial side={DoubleSide} color={colorStyle()} />
    </Plane>
  );
};

const Cube = () => {
  useFrame((state, delta) => {
  });

  return (
    <>
      {/* Back Face */}
      <Cell position={[-1, 1, -1.5]} rotation={[0, 0, 0]} />
      // other cells here

      {/* Front Face */}
      <Cell position={[-1, 1, 1.5]} rotation={[0, 0, 0]} />
      // other cells here

      {/* Left Face */}
      <Cell position={[-1.5, 1, 1]} rotation={[0, Math.PI / 2, 0]} />
      // other cells here

      {/* Right Face */}
      <Cell position={[1.5, 1, 1]} rotation={[0, Math.PI / 2, 0]} />
      // other cells here
      
      {/* Bottom Face */}
      <Cell position={[1, -1.5, 1]} rotation={[Math.PI / 2, 0, 0]} />
      // other cells here
      
      {/* Top */}
      <Cell position={[1, 1.5, 1]} rotation={[Math.PI / 2, 0, 0]} />
     // other cells here
    </>
  );
};

const SceneItems = () => {
  return (
    <>
      <OrbitControls minDistance={7.5} maxDistance={15} />
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 15, 10]} angle={0.3} />
      <Cube position={[1, 1, 1]} />
    </>
  );
};

const CompleteScene = () => {
  return (
    <div id={styles.scene}>
      <Canvas>
        <SceneItems />
      </Canvas>
    </div>
  );
};

Answer 1

看起来我需要做的就是在我的Plane事件监听器中添加event.stopPropogation()来阻止这种点击。现在我不再在Plane中单击

const Cell = (props) => {
  const [hovered, hover] = useState(false);
  const [checked, setChecked] = useState(false);

  useCursor(hovered);

  const colorStyle = () => {
    if (hovered) return "hotpink";
    if (checked) return "lightblue";
    return "orange";
  };
  return (
    <Plane
      scale={1}
      onClick={(e) => {
        e.stopPropagation();
        setChecked(!checked);
      }}
      onPointerEnter={(e) => {
        e.stopPropagation();
        hover(true);
      }}
      onPointerLeave={(e) => {
        e.stopPropagation();
        hover(false);
      }}
      position={props.position}
      rotation={props.rotation}
    >
      <meshPhongMaterial side={DoubleSide} color={colorStyle()} />
    </Plane>
  );
};