Swapable Meshes

[steF_fus]

Hallo Community,
i am still absolutly babylon beginner. Thank you for helping me.
I cant provide a Playground Link because i import meshes and this doesnt work in playground.

https://steffenwuenscher.de/babylonjs/index_0112.html

The Goal is to have this Viewer implemented in a website.
This works for me but i have still some things i would like to enhance:

A)
I am not fully Satisfied with the Radio buttons. How can i give it more space between circle and the
font? And I dont get it to change the color on hover.

B)
mesh.position.y = 2; doesn`t work. I would like to have the object a bit more upwards (in WorldSpace) on the Y Achses. Neither myMeshOne.position nor MyMesh.position work for me.

C)
Is it Possible to controll the switch function outside of the render canvas?
Radio Buttons in a div right side from the RenderView… would be awesome.!

May there is a better way to reach my goal. I would love to import a scene with 4 meshes and swap them on and off. I am looking forward to your reply and thank you from heart.

[carolhmj]

Hello!

It’s possible to use external meshes on the Playground, take a look at this: Using External Assets In the Playground | Babylon.js Documentation (babylonjs.com)

For changing color on hover, you can use onPointerEnterObservable and onPointerOutObservable: Control | Babylon.js Documentation (babylonjs.com)

Using GUI slider | Babylon.js Playground (babylonjs.com)

Can you explain a bit more of what do you mean by “switch function”? Do you want your GUI elements to be outside of the rendering canvas? If so, you can use standard HTML GUI.

[JohnK]

@steF_fus

I cant provide a Playground Link because i import meshes

See Using External Assets In the Playground | Babylon.js Documentation

@steF_fus

A)
I am not fully Satisfied with the Radio buttons. How can i give it more space between circle and the
font?

Simplest (and I believe the only) way is to add spaces at front of text

[quote=“steF_fus, post:1, topic:26873”]

@steF_fus

B)
mesh.position.y = 2; doesn`t work. I would like to have the object a bit more upwards (in WorldSpace) on the Y Achses. Neither myMeshOne.position nor MyMesh.position work for me.

From a quick look at your code it seems that you are expecting

BABYLON.SceneLoader.ImportMesh(.............

to return the named mesh. This is not so. You have to wait until the meshes are loaded before you can change them. You may find this page and the playgrounds on it useful Getting Started - Chapter 1 - Working with Models | Babylon.js Documentation

@steF_fus

C)
Is it Possible to controll the switch function outside of the render canvas?
Radio Buttons in a div right side from the RenderView… would be awesome.!

This is entirely possible, other forms of GUI can be used GUI | Babylon.js Documentation

@carolhmj beat me to it.

[steF_fus]

thank you for taking the time to help me.
Next time i will try to rebuild it for the playground with your hint using external assets.

i dont get it, using the onPointerEnterObservable.
where do i place this command? // selectbox.onPointerEnterObservable.add(function () {selectBox.buttonBackground = "blue";}); ??

@carolhmj

If so, you can use standard HTML GUI.

I tried… but it wont work. when i place it in another div it has no effect. at least there is no playground for help. or i missunderstand it.

https://steffenwuenscher.de/babylonjs/index_0118.html

[steF_fus]

thank you for taking the time to help me.

space in front of text work! Great! I used the asyn import and it worked also. Thank you.

But i think i do not understand how the HTML GUI work,- or i missunderstand.

https://steffenwuenscher.de/babylonjs/index_0118.html

[labris]

The HTML GUI is just usual HTML outside the canvas.

In the simplest form it may look like

HTML Part
<div class="your-css-class" onclick="your_function()"></div>

JS Part - put this function to the appropriate place of you Babylon code (where all needed variables are defined)

		this.your_function = function() {
		kappeMittel.setEnabled(true);
		kappeGross.setEnabled(false);
		}

For radiobuttons it will be similar, just a bit different code. I hope you’ve got the idea
Here is the example, just look at the source code, everything is there in one file - Mu-so 2nd Generation 3D (changing textures onclick)

I would also recommend to add to the CSS for your canvas
outline: none;

to get rid from the black canvas border which appears when you interact with canvas.

[steF_fus]

Glorius. thank you.

last problem (only in chrome- not in firefox): when i click onto the modell to rotate my GUI disappers.
I tried touch-action=“none”. without success.

https://steffenwuenscher.de/babylonjs/index_0119.html

[labris]

This relates to CSS.
Try to remove canvas height parameter.

[labris]

Hello again,

Here is the example how it could be done with CSS (file attached). There could be other CSS solutions too.
Seems it works now

index.zip (2.4 KB)

[steF_fus]

hello thank you very much. your first description showed me that i misinterpreted the HTML GUI for the time being. With a hint to the solution I could then implement my Wüsnchen accordingly.

It’s really great that you took the time to help me. Thanks for that!

[labris]

You are welcome!

One more thing to further optimize your page.
There are a lot of scripts in the head (full Babylon set) which you just don’t need for your purpose.

Actually you can remove all of them except babylon.js itself:

<script src="https://preview.babylonjs.com/babylon.js"></script>

Since you use .babylon files you don’t need loaders but if you will use GLB or other files you also will need

<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>

And, finally, if you need to debug your scene, use Inspector (at least at the development stage):

<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

Call it with

scene.debugLayer.show();