- need to raycast con model

Questions
, ,
1

HI!

I have a project where import some models as .jsx

import { Model as ball1} from './models/ball.jsx'
import { Model as table1} from './models/table.jsx'

I need to make an action when i click on each diferrent model. I guess raycasting, clicklabe function, but coming from three.js background not sure how to it in react three fiber.

Whats the best option to perfom this?

2

ball.jsx

function Ball1(props) {
  ...
  return (
    <mesh material={foo} geometry={bar} {...props} />

app.jsx

import { Model as Ball1 } from './models/ball'

function App() {
  return (
    <Ball1 onClick={(e) => console.log(e)} />

fiber has pointer events inbuilt, all of them, clicks, over/out, up/down, move, scroll, contextmenu, dlbclick and so on. anything can receive them, even groups.

also keep in mind that components (<Ball1>) are uppercase and native threejs elements (<mesh>, <group>,…) are lowercase.