Both onMouseDown
and onMouseHover
seem unresponsive.
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>
);
}
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 the official spline as well. Is there any setting I have to change in the spline editor online?
The issue is fixed guys In spline editor while exporting I had to change mouseEvents from local container to Global container Settings Image