How to anchor a model on the selected space on the floor?

Hi,

I’m trying to achieve something like in this example: Babylon.js Playground
But without the planes showing. and only one model/mesh needs to spawn at the selected location, I do have some experience with Babylon and Three.js but this is my first time working on AR.
If i did understand correctly, anchoring allows the ability of inspecting the model in 360 degrees?

This is the link to my playground: Babylon.js Playground
So far it’s not much and it’s based on the code from the example, any help is more than appreciated.

Edit: a word

cc @RaananW our XR expert

1 Like

nope, that’s not what anchors do.

Anchors are points that keep track of a fixed point in space, based on the real world and the underlying system’s understanding of the real world. It means that it will always stay “in place”, even if the entry point might drift a bit.

Removing the plane detection (or not showing them) will get you what you wanted. What, in the example that you pasted, doesn’t work as you expect?

1 Like

Ah, thank you for clarification, what does not work is that the model spawns below me, and i want it to spawn on the location i clicked on the screen, also i noticed some models, like “skull.babylon” spawn behind me, can you please also help with inspecting the model in 360 degrees?

You might want to take a look at the WebXR demos to get inspiration? WebXR Demos and Examples | Babylon.js Documentation (babylonjs.com)

1 Like

Thak you for suggestion,
I did look around, i got to understand babylon js better, as well as try helpful examples.
I have managed to come up with this code: Babylon.js Playground
It’s not all originally mine, but it works mostly , the issue i now have is that not all models/meshes are placed on the correct position. In the playground i provided, cube spawns where it should, as well as dummy3.babylon model, when i click on the button the model is spawned in the position of the marker, but if i try another models like skull.babylon, all two of those models are standard .babylon models not modified, it’s not spawned on the position of the marker, it’s always in the same location and they stack on top of each other. Also, i have some pistol.obj model and the spawn direct in front of me and the apear large, also stack on top of each other. I look trough documentation and other forum posts these 3 days but I don’t understand what causes that behaviour.

I could try to create url for models if that would help, I’m really stuck for now

i have a mistake in the playground, the last function should not be there also returning the scene from the loadXRScene() function is a typo

The issue you are describing is a general issue with models - where is their center point. To explain simply - when you create a box, its center point is right in the middle of the box. If you place the box in the scene’s 0,0,0 (or in a point you want to place it), its center will be placed in this point, not its bottom. You will need to compensate for that. The naive approach would be to move the box half of its height on the y-axis.
Now with models it’s different. Models are sometimes centered. Sometimes their zero is at the bottom, sometimes they are not centered at all. What you can do to get that to work is use the object’s bounding box.

You can read about it here - Centered on Created Origin | Babylon.js Documentation (babylonjs.com)

What i usually prefer doing is to transform the object before using it, and bake its transformation so that the origin is at the bottom. This way I don’t need to compensate when placing the object on a selected point.

Baking Transformations | Babylon.js Documentation (babylonjs.com)

An example of how to make a mesh “sit” on the ground - glTF Loader Demo | Babylon.js Playground (babylonjs.com)

2 Likes

Sorry for the late reply, i did try baking transformations and it did help, while I’m not finished with my project yet, this looks like just what i need, thank you very much.

1 Like