onMouseDown 在 Spline-react 中不起作用

Question

    import Spline from '@splinetool/react-spline';
    import { useRef } from 'react';
export default function App() {

  function onLoad(spline) {
    const obj = spline.findObjectByName('Clink');
    // console.log(spline.style)
    spline.style = {width:"100vw"}

    // spline.camera.position.z = 0
    // spline.canvas.width = "1920px"
    // let can = Object.keys(spline.canvas)
    // console.log(Object.keys(spline.canvas[can[0]]),can)
    // console.log(obj)
    console.log(Object.keys(spline),spline._camera)
  }

  function onMouseDown(e) {
    console.log("clicked",e.target)
    
    if (e.target.name === 'Clink') {
      console.log('I have been clicked!');
    }
  }

  return (
    <div >
    <Spline onLoad={onLoad} onMouseDown={()=>{console.log("hello there")}} onMouseHover=   {onMouseDown}   scene="https://prod.spline.design/sO9tS9c4paV1HRId/scene.splinecode" />

    </div>
  );
}

我正在尝试运行上面的代码，但 onMouseDown 和 onMouseHover 似乎都没有响应 有没有办法解决这个问题

我尝试阅读文档但找不到任何内容 我也在官方样条中提出了这个问题 我需要在在线样条编辑器中更改任何设置吗？

Answer 1

您可以采取以下几个步骤来排查和纠正问题：

1. 验证事件名称：确保正确指定事件名称。根据

   @splinetool/react-spline

   包文档，正确的事件名称是

   onMouseDown

   和

   onMouseMove

   。没有

   onMouseHover

   事件，因此您应该使用

   onMouseMove

   代替。

2. 确保传播：有时，如果场景中的对象是非交互式的，或者事件正在被另一个元素/界面使用，则事件可能不会传播到您的处理程序。确保名称为“Clink”的对象设置为在样条线编辑器中可交互。

3. 绑定处理程序：最好将实际函数传递给事件属性，而不是箭头函数包装器，除非您需要传递额外的参数。

以下是如何修改代码的示例：

import Spline from '@splinetool/react-spline';

export default function App() {

  function onLoad(spline) {
    const obj = spline.findObjectByName('Clink');
    spline.style = {width: "100vw"};
    console.log(Object.keys(spline), spline._camera);
  }

  function onMouseDown(e, spline) {
    if (e.target.name === 'Clink') {
      console.log('Clink object has been clicked!');
    } else {
      console.log('Clicked an object: ', e.target.name);
    }
  }

  function onMouseMove(e) {
    // handle mouse move events here
    console.log("Mouse is moving over", e.target.name);
  }

  return (
    <div>
      <Spline 
        onLoad={onLoad}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        scene="https://prod.spline.design/sO9tS9c4paV1HRId/scene.splinecode"
      />
    </div>
  );
}

4. 样条线设置：在样条线编辑器中，确保启用了您想要交互的元素进行交互。检查特定对象的设置，确保没有任何因素阻止检测到事件。

5. 更新和检查文档：由于像

   @splinetool/react-spline

   这样的库可以经常更新，因此请确保您使用的是最新版本并检查文档以了解事件处理的任何更改。

希望对你有帮助

Answer 2

问题已解决，伙计们 在样条编辑器中导出时，我必须将 mouseEvents 从本地容器更改为全局容器