Create a Mouse Hover effect VS RayPicking to trigger an action, and a camera follow of the target

Questions
1

New here, and I’ve followed a few tutorials but don’t seem to be getting it on this challenge…
Intent is for the camera to point at a group of thin instances, and when focused on, trigger an function eg. glow or something else perhaps, and for the camera to slowly close in on the target object/position on a plane.

I’m trying to understand whether I should be using an Action Behaviour? RayPicking/Casting? or something to do with a MouseHover?

My current PG where I’ve been trying to scrap together and understand some of the methods I’ve come across: https://playground.babylonjs.com/#J19GYK#381
**Unfortunately I’ve not yet figured out how to bring everything in from multiple files in Vscode into PG just yet either…

2

Let’s break your intention into logical blocks.

  1. Camera points to a group of thin instances. How this group is defined?
  2. When focused on - how you will check if it is focused and what does it mean ‘focused’?
  3. Trigger a function - this seems to be simple.
  4. Camera to slowly close in on the target object/position - you may use animation for this.
1 Like
3

Yeah, so the group of thin instances are a single mesh, with name “pixels” in a matrix that forms a plane XY…
When I say focusing, I mean the centre of the camera is locked to the pointer location on screen, and is aimed directly at a position somewhere on the XY plane, where there would be an instance of “pixel”.
Insert Animation on the pixel instance
Camera should receive this target on the XY plane, and move closer towards it, while maintaining an offset (perpendicular) from the XY plane, with smoothed acceleration/deceleration. For the kind of movement in describing should I be switching from universal camera to Follow or Target type camera?

4

Seems that you don’t need to switch camera.
Here is animation function example (you may tweak and tune it as you like) for Universal camera - https://www.babylonjs-playground.com/#HH1U5#240
For ArcRotateCamera - https://www.babylonjs-playground.com/#HH1U5#103

1 Like