Arc Rotate Camera Opposite

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

Hi GD. Wouldn’t a freeCamera… positioned at 0,0,0… do what you describe?

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

1 Like

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.

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.

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

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)