Arc Rotate Camera Opposite

Questions
1

Does anyone know of an example of something like an arcrotate camera, except the user is the point in the middle looking out at the sphere (universe) instead of being the satellite looking in to the point. I messed around with a crude version with a follow camera but I would like to offer something as nice as the arc camera works and maybe be able to switch back and forth. Thanks

2

Hi GD. Wouldnā€™t a freeCameraā€¦ positioned at 0,0,0ā€¦ do what you describe?

https://www.babylonjs-playground.com/#HH1U5#90

1 Like
3

Yes, I think soā€¦ I had dismissed it earlier because it required extra touch controls, I can use buttons if need be. Do you know if any examples of a free camera with a touch control attached? I couldnā€™t find a working example to test on a mobile device.

4

Hi again.

On my iPAD with Safari browser, that #90 demo pans and tilts with touch-swipesā€¦ a-ok.

But, no way to use arrow keys.

If you add to #90 pgā€¦

    scene.onBeforeRenderObservable.add(function(){
        console.log(camera.getTarget());  // or camera._currentTarget
    })

ā€¦you can see that the arrows keys actually change position of the freeCamera._currentTarget.

I tried to add 4 buttonsā€¦ to our test playground. https://www.babylonjs-playground.com/#HH1U5#94

GUI is failing and puking warnings: Control (Name:butt1, UniqueId:145) is using height in percentage mode inside a vertical StackPanel to console, for all 4 buttons, even though no heights/widths are set on the stackPanel buttons. sigh.

I was going to turn-on left/right/forward/backward buttons that moved camera._currentTargetā€¦ but failed.

Four months ago, I asked WHY buttons inside a stackPanelā€¦ needed widths and heights. :smiley: (but I didnā€™t ask very loudly, or nobody had an answer).

Anyway, staying on-subjectā€¦ letā€™s listen to more comments, and learn IF/HOW others have used touch-gestures to do FreeCamera arrow keys.

I THINK we only need one buttonā€¦ to toggle between ā€œpan modeā€ and ā€œmove modeā€.

In ā€˜move modeā€™, perhaps we disable camera panning/tilting (lock-up camera.rotation)ā€¦ and thenā€¦ ummā€¦ I guessā€¦ build a custom drag/swipe-event handlerā€¦ bound to camera._currentTarget X/Z position. (erf!)

Not sure. Just thinkinā€™ here. :slight_smile: Does PG #90 pan/tilt work ok on YOUR touch device, GD? If not, can you tell us a bunch of info about the device/browser? (thx)

As a shot in the dark, does YOUR project include ā€˜pepā€™?

<script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>

Make it be the FIRST script in the list of scripts. Iā€™m just guessing, but worth a try, if your touch-panning/tilting is failing. Not sure if applicable.

Also, in playgrounds gotten via zip, there is a CSS styleā€¦

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }

Does yours look like that? Iā€™m not sure if important. I have SO LITTLE experience with touch devicesā€¦ sorry.

5

Thanks for the examples and the the thoughts. The free camera does work on my ipad and most importantly it works the same on my desktop, as in the cursor rotates the view. I thought the universal camera was the same thing but I can get it to move forward on desktop with a cursor gesture upwards.

So with a bunch of buttons (forward, backward, left, right, up and down) The user can rotate their view like turning their head with the cursor and use the buttons to change position and it has the FPS feel Iā€™m looking for with the nice inertia of the free camera.

I use this to move forward:
var local_pos = new BABYLON.Vector3(0, 0, camera_speed);
var matrix = BABYLON.Matrix.Invert(camera.getViewMatrix());
camera.position = BABYLON.Vector3.TransformCoordinates(local_pos, matrix);

I like your idea of selecting if the cursor movement is rotation or position movement, instead of all the buttonsā€¦up and down would be left out though.

I may disable the key input to keep things consistent on the free camera between desktop and mobile.

1 Like
7

Looks good. Here is another way to move forward and to see what is directly in front of you (ie: ray picking):
Babylon.js Playground (hit space to move forward)

You will still want to go with what you have instead, so you can go left/right. Just wanted to show you how to connect keys and scale, so you could use:
var local_pos = BABYLON.Vector3.Forward().scale(camera_speed)