Click on mesh trough rendered

Questions
,
1

Hello guys,
As you can see here I achieved to got two cameras rendering their textures, and apply these two textures on planes.
I a trying to click on the mesh ( cube) on these 2 planes and their rendered-textures to retieve onClick event, but it doesn’t work, anybody has some ideas how to achieve that ?
Thanks !

2

Why do you need to do this?

3

I got 2 different scenes, each one with one perspective camera, I retrieve these 2 textures to create some transitions between these two scenes.
To display the final render, I have one plane facing one Ortho camera , on this plane i want to do some “fancy” shaders etc .
At the end of the day, my main camera is the ortho, and the only “thing” this camera is watching is the final plane… and so cannot click on meshes from the two other scenes…

4

Hmm. If you need this just to do transitions between 2 different scenes, I think r3f/drei has existing mechanisms for that.

perhaps something like this? https://www.youtube.com/watch?v=DiKV1qkVZmw

for non r3f: three.js examples

Is any of this helpful?

5

I did almost the same thing. :slight_smile:
Did a test with The repo of Wawa sensei’s project ( from the youtube video you send), tried to add ono onClick event to the red sphere on his project:

<mesh
	position-x={1}
	onClick={() => {
	alert("ok");
	}}
	>
		<sphereGeometry args={[1, 32, 32]} />
		<meshStandardMaterial color="red" />
	</mesh>

it doesn’t work with his example either

6

Sorry, did another test with wawa sensei example, and depending of the OrbitControl angle, it works.
I need these clicks only with one of my both Perspective cameras, is it a way to change the standard r3f raycast camera to push my own perspective camera, and so on to be able to track the clicks from with one custom cam ?

1 Like
7

No idea. I’m more of a vanilla threejs person.

1 Like
8

Hello guys, found the solution to rayscast one mesh by a custom camera with r3f:

const customCameraRef = useRef()
...
<PerspectiveCamera ref={customCameraRef} />
....
// this mesh will be rayscasted only by this camera
<mesh raycast={useCamera(customCameraRef)} />
1 Like