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

Posted 2023-02-27

【中文标题】防止点击 React-Fiber Three.js 中的对象

【英文标题】：Prevent click through objects in React-Fiber Three.js

【发布时间】：2021-12-24 12:20:42

【问题描述】：

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

到目前为止，这个问题的主要问题是，当我只想点击鼠标所在的飞机时，点击飞机就会点击。我的 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>
  );
;

【参考方案1】：

看来，为了防止这种点击发生，我只需将event.stopPropogation() 添加到我的Plane 上的事件侦听器。现在我不再点击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>
  );
;