Need Help with Custom ArcRotateCamera in 3D Scene

Hi everyone,

I’m currently working on a 3D project and facing a bit of a challenge with the camera setup. I’m trying to create an ArcRotateCamera, but I want it to behave differently than usual. Instead of having it rotate around the scene’s central axis, I’d like it to orbit around a specific mesh which is not centered in the scene.

To elaborate, I have an off-center mesh in my scene, and I want the camera to focus on and rotate around this mesh, giving a unique perspective as opposed to the standard centered rotation.

Has anyone implemented something similar or knows how to modify the ArcRotateCamera to achieve this effect? Any tips or code snippets would be greatly appreciated!

Thanks in advance for your help!

Hi binflo13 !

There is a native method of ArcRotateCamerafor that :
see ArcRotateCamera | Babylon.js Documentation

First (and only one mandatory) parameter of the function can be an instance of Vector3 or a TransformNode. So you can just do

camera.setTarget(yourMesh)

to make the camera rotate around your mesh !

Hi Amarth!

Thanks for your answer! I know that function, but in that case you still see the object in the center of the canvas. I would like to see it displaced with respect to the center, but that the camera still rotates around it. I also tried to translate the camera without success.

let me add @PolygonalSun to the thread

There’s a demo with this idea: ArcRotateCamera Offset Demo | Babylon.js Playground (babylonjs.com) :slight_smile:

2 Likes

The demo that @carolhmj provided should be a good source of information/inspiration, particularly the setCameraOffset function (line 171). You can use the getPositionInCameraSpace function from the TransformNode class to get a specific location of a desired mesh, with respect to your camera. Then you just need to change your camera’s target to the desired mesh/location while updating the camera’s targetScreenOffset and radius using the values from getPositionInCameraSpace.

1 Like

Thank you for your help, @carolhmj and @PolygonalSun. I will give it a try.