事件在具有反应三纤维的 shapeGeometry 网格上抛出错误

Question

我正在用 react-three-fiber 做一些实验，我从 react-three-fiber 中获取了示例代码并添加了一些代码来创建一个具有圆边的平面。当我向带有圆端边缘的平面添加事件并尝试触发事件时，浏览器会抛出错误： error ，是否有我没有发现的错误？

import ReactDOM from 'react-dom'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * as THREE from 'three';

function RoundedRect(width,height,radius){
  const roundedRectShape = new THREE.Shape();

  roundedRectShape.moveTo( -(width/2), -(height/2) + radius );
    roundedRectShape.lineTo( -(width/2), (height/2) - radius );
    roundedRectShape.quadraticCurveTo( -(width/2), (height/2), -(width/2) + radius, (height/2) );
    roundedRectShape.lineTo( (width/2) - radius, (height/2) );
    roundedRectShape.quadraticCurveTo( (width/2), (height/2), (width/2), (height/2) - radius );
    roundedRectShape.lineTo( (width/2), -(height/2) + radius );
    roundedRectShape.quadraticCurveTo( (width/2), -(height/2), (width/2) - radius, -(height/2) );
    roundedRectShape.lineTo( -(width/2) + radius, -(height/2) );
    roundedRectShape.quadraticCurveTo( -(width/2), -(height/2), -(width/2) , -(height/2) + radius );

  return roundedRectShape
}

function Temp(props){
  // This reference will give us direct access to the mesh
  const mesh = useRef()
  // Set up state for the hovered and active state
  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(1)
  // Subscribe this component to the render-loop, rotate the mesh every frame
  useFrame((state, delta) => (mesh.current.rotation.y += delta))
  // Return view, these are regular three.js elements expressed in JSX

  return (
    <mesh
      {...props}
      ref={mesh}
      scale={active}
      onClick={(event) => setActive(active+0.1)}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}
    >
      <shapeGeometry args={RoundedRect(1,1,0.2)}/>
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

function Box(props) {
  // This reference will give us direct access to the mesh
  const mesh = useRef()
  // Set up state for the hovered and active state
  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(1)
  // Subscribe this component to the render-loop, rotate the mesh every frame
  useFrame((state, delta) => (mesh.current.rotation.y += delta))
  // Return view, these are regular three.js elements expressed in JSX

  return (
    <mesh
      {...props}
      ref={mesh}
      scale={active}
      onClick={(event) => setActive(active+0.1)}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}
    >
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

ReactDOM.render(
  <Canvas style={{height:'100%',width:'100%'}}>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Temp position={[1.2, 0, 0]} />
  </Canvas>,
  document.getElementById('root')
)

Answer 1

我找到了解决方案：在 shapeGeometry 的 'args' 中我使用 args={RoundedRect(1,1,0.2)} 并且我需要使用 args={[RoundedRect(1,1,0.2)]} （见方括号），奇怪的是代码没有事件也能正常工作。

事件在具有反应三纤维的 shapeGeometry 网格上抛出错误

Event throws errors on shapeGeometry mesh with react-three-fiber

react-three-fiber