Question 306874 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – onMouseDown is not working in Spline-react


    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>
  );
}

I’m trying to run the above code and both onMouseDown and onMouseHover seem unresponsive
Is there any solution to this problem

I’ve tried reading the docs but wasn’t able to find anything
I’ve raised the issue in official spline as-well
Is there any setting I have to change in the spline editor online?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The issue is fixed guys In spline editor while exporting I had to change mouseEvents from local container to Global container Settings Image


  2. 0

    Here are a few steps you can take to troubleshoot and correct the issue:

    1. Verify Event Names: Ensure that the event names are correctly specified. As per the @splinetool/react-spline package documentation, the correct event names are onMouseDown and onMouseMove. There is no onMouseHover event, so you should use onMouseMove instead.

    2. Ensure Propagation: Sometimes, if an object in your scene is non-interactive, or the event is being consumed by another element/interface, the event may not propagate to your handler. Make sure the object with the name ‘Clink’ is set up to be interactive within the Spline editor.

    3. Binding Handlers: It’s better to pass the actual function to the event prop rather than an arrow function wrapper unless you need to pass extra arguments.

    Here’s an example of how you can revise your code:

    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>
  );
}

    1. Spline Settings: Inside the Spline editor, ensure that the elements you wish to interact with are enabled for interaction. Check the settings for the specific object to make sure nothing is preventing the events from being detected.

    2. Update and Check Documentation: Since libraries like @splinetool/react-spline can update frequently, make sure you’re working with the latest version and check the documentation for any changes to event handling.

    I hope it helps you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search