Photo dome - instantiated sprite offset problem on mouse click

Hi,
I am trying out 360degree photo dome in babylon js. I am able to instantiate a sprite inside the photo dome on mouse click, but the x,y position is offset. Need some guidance.

Attachment :
sample.zip (3.1 MB)

Hi Z_J,

Would it be possible for you to reframe your example as a Playground? That might be a bit more comfortable for people trying to help you than having to download a file. For example, could you copy-paste your sprite instantiation code into this Playground, save a new version (ideally with a new title), then post a link to that here?

360 Photo Demo | Babylon.js Playground (babylonjs.com)

Hi @syntheticmagus ,

Sharing the playground - https://playground.babylonjs.com/#14KRGG#476

1 Like

Awesome, thanks! I think what’s going on here is that your sprite’s “anchor” or “pivot” (I’m not sure if there’s another term that’s more common in Babylon) is on the bottom-right corner of the sprite, but you want the placement to appear centered elsewhere on the sprite. I’m not super familiar with the sprite system in Babylon.js (@PirateJC might know more), but I couldn’t find any information on if there’s a way to change the pivot of a sprite (again, I may just not know the right term), so I worked around the issue a different way.

Instantiated Sprite placement problem on Mouse click- 360 Photo Demo | Babylon.js Playground (babylonjs.com)

I added lines 27-41 and 49-50. the added code basically just extracts the camera’s “right” and “up” vectors, scales those by the distance times a hand-tuned factor, then adds an offset to the sprite so that it shows up in the intended location. Not the cleanest of approaches, and there’s likely something you can do with the asset to make workarounds like this unnecessary; but if you just need something quick and straightforward, I think this’ll work. Hope this helps, and best of luck!

2 Likes

Great! and Thanks a lot! :slight_smile: