我怎样才能实现 pointerEvent all 不影响 react-three-fiber 中的 raycaster？-解网

问：

制作时工作正常，但我需要听一些事件，例如单击我将其更改为的 html 标签raycasterpointerEventnonepointerEvnetall

然后，如果使用 pointerEvent all 鼠标后面的 boxGeometry 坐标将未对齐

我的演示代码喜欢

import React, { useRef } from 'react'
import ReactDOM from 'react-dom/client'
import { Canvas, useFrame } from '@react-three/fiber'
import './styles.css'
import { Html } from '@react-three/drei'

function Thing() {
  const ref = useRef()
  const planeMeshRef = useRef()
  useFrame(({ camera, mouse, raycaster }) => {
    raycaster.setFromCamera(mouse, camera)
    if (planeMeshRef.current) {
      const intersects = raycaster.intersectObjects([planeMeshRef.current])
      if (intersects[0]) {
        let p = intersects[0].point
        if (ref.current) {
          ref.current.position.copy(p)
        }
      }
    }
  })

  const handleClick = () => {
    console.log('clicked')
  }
  return (
    <>
      <Html wrapperClass="topWords">
        <div className="wrapper">
          <p
            style={{
              // The coordinates of boxGeometry following mouse will be misaligned if using pointerEvent all
              pointerEvents: 'all'
            }}
            onClick={handleClick}>
            hello world
          </p>
        </div>
      </Html>
      <mesh ref={ref}>
        <boxGeometry attach="geometry" args={[1, 1, 1]} />
        <meshNormalMaterial attach="material" />
      </mesh>
      <mesh ref={planeMeshRef}>
        <planeGeometry args={[1000, 1000]}></planeGeometry>

        <meshBasicMaterial transparent />
      </mesh>
    </>
  )
}

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(
  <Canvas>
    <Thing />
  </Canvas>
)

和在线演示

当鼠标悬停在“hello world”上时，您可以看到 boxGeometry 的坐标错误

三.js react-three-fiber 指针事件 react-three-drei

我怎样才能实现 pointerEvent all 不影响 react-three-fiber 中的 raycaster？

How can I achieve pointerEvent all do not affect raycaster in react-three-fiber?

评论