I am working on a project using React-Three-Fiber and have a use case where I want to add an object to the scene when a user clicks somewhere where there are no meshes present. I know I can use the Canvas’s onPointerMissed to get notified when a user clicks on the canvas but it doesn’t hit a mesh but the event here is a standard DomEvent so how can I determine the position within the scene to insert the object?
If the click doesn’t hit anything = there’s no position. Can’t read position of nothing 
Consider adding a ground lane to the scene (that spans wide on X and Z axes, can also follow the camera) and listen to clicks on that plane instead. That way you’ll get a position of intersection with that ground plane and will be able to place objects there (note - the plane doesn’t have to be visible, you’re free to hide it and it’ll still listen to intersections properly.)
1 Like
like mj said, nothing was clicked, how could it give you a 3d position. but you still have state.pointer.x/y which gives you the view coordinates.
other than that you can calculate a position, like in this demo https://codesandbox.io/p/sandbox/gwthnh
vec.set(pointer.x, pointer.y, 0.5).unproject(camera)
dir.copy(vec).sub(camera.position).normalize()
vec.add(dir.multiplyScalar(camera.position.length()))
im not a mathematician, it might be wrong, but there will be an unproject involved somewhere so that alone will get you the answer on stackoverflow or here.
Yeah. I guess what I am looking for is not as much an exact 3D point as effectively the vector that was calculated from the mouse event to try to determine intersection. From that I could find the right position from the camera on the vector for my use case. I’m trying to avoid putting a very large mesh behind everything as there are some complications for my use case where I could run into issues determining how big is big enough and dealing with other use case specific environment issues.