Make camera point direction of mouse? With tolerance?

Questions
1

Alright, I’m trying to accomplish this - https://www.babylonjs-playground.com/#52LP1L#34

but without the need to click into the scene, and moreover with a tolerance. Like how the svgs at https://meowwolf.com/ can be rotated, but not all the way around.

This tolerance aspect is harder than the click, guessing it requires a multiplier on this line:

cameraForwardRayPositionWithoutY = new BABYLON.Vector3(cameraForwardRayPosition.x, 0, cameraForwardRayPosition.z);

but not sure.

3

Hi SkyGuy… welcome to the BabylonJS forum.

22 hours and not a welcome or a bit of help, huh? Hmm, sorry. Apparently you have the experts stumped. :slight_smile:

I love that effect. I hope we can make it happen here in Babylon JS. I will start work on this… but… I could sure use some help from others.

We need … hmm… pointer-move direction-testing (sometimes called diff)… after pointer onEnter/onOver (hover) of the mesh (perhaps using actionManager for onEnter/onOver triggers).

Let’s get started. https://www.babylonjs-playground.com/#A1210C#64

Here, I have a rather complex mesh… and I have an actionManager (lines 71-80) on the center brown box… with two triggers. One checks-for onPointerOver (turn white), and the other checks for onPointerOut (return to brown).

I also have a scene.onPointerObservable active in lines 83/84 and 91-93, which is reporting pointer moves to console, whether we are hovering the mesh, or not. We’re only interested in pointerMoves… that happen during mesh hover.

Now… how to hook it together. hmm. We need that diff thing or similar. WHEN we hover… we need to grab a current point location from SOMEWHERE, then when user moves mouse, we need to determine move direction, so we can “rock” (tilt) the mesh in THAT direction… somehow. hmm.
(intense beard-scratch of high-ponderence)

We also need to watch for onPointerOut, and return mesh back to un-rotated position, when seen.

I’ll keep thinking, but, at least we are “off and running” with a testing playground. But, there is a pretty good chance that I am making a mis-step… in how to accomplish this.

ALL help WELCOME! (thx) Reminder of wanted effect - https://meowwolf.com/

4

sigh. OUCH! https://www.babylonjs-playground.com/#A1210C#68

We’re getting closer. Currently, easing is active… can be disabled via lines 9, 15, 21, 27, 33.

Important values are at lines 69-72.

I don’t really like the way I am determining if pointer is north, south, east, or west of box center.

threshold sets HOW FAR pointer is north, south, east, or west of box center (off-centered-ness). It must be a certain amount, or else no anim-reaction.

erf. My brain hurts. Improvements/better ideas… whole-heartedly welcome. :slight_smile:

Notice… I am NOT making camera turn. I am making the mesh, turn… just like https://meowwolf.com/.

If the camera turned (orbited a bit) at that webpage… all three of the “rocker-icons” would turn… when ONE of them did.

Nope, we (I) gotta turn the mesh, not the camera.

So, this topic is mis-titled and could be adjusted. (hint hint to skyguy) :slight_smile: