Is it possible to apply the reflection in Babylon to the .GLB file?

Hi, so there’s a 3D animation in Blender so I was thinking of merging the BabylonJS reflection(basically a mirror) on the mirror in the 3D model. My objective is to display the 3D model on a webpage. Any help would be appreciated. Please note that there are actions in the 3D model and the in the later actions, the mirror is in the move.

Hello,

I’m not sure what you exactly mean by “merging” or “apply”, but if it’s what you want, here is an example of an animated .GLB character in front of a mirror : Playground

++
Tricotou

1 Like

Ok, this is good, many thanks but can this mirror(in the example you’ve given) can applied to the mirror in the GLB file?

Yes, in my example I created the mirror mesh line 26 :
var glass = BABYLON.MeshBuilder.CreatePlane("glass", {width: 3, height: 3}, scene);

In you case your would just replace glass by the mirror mesh from the .GLB file

I did that but another Plane is being created. Is there any way to use the Babylon.JS reflection into the mirror in the GLB file? So that even if the mirror is moved in the animation, the reflection is also moved with it.

What I mean is that you don’t use the BABYLON.MeshBuilder.CreatePlane which creates a plane. You just select the right mesh from your GLB (mirror) and apply mirror material the same whay I did with the glass var :slight_smile:

Best would be that you share a Playground so we can help further

Here is the example with moving mirror :slight_smile: - https://playground.babylonjs.com/#4U4QH9#23

In the attached image, the large object is the simple object made in Blender, the smaller plane is the mirror I’ve made in the Playground with the disableLightning = true as I wanted a crystal-clear reflection. Now my objective is that without creating the plane for the mirror itself, how can I apply the mirror properties to the back object(3D object). Also, if the object is converted into a circle or any other shapes, it retains its reflection and well as the shape accordingly to the mirror and also if it moves, properties move with the object.
Screenshot 2024-05-31 165756

I have shared the image of the model but it is temporarily hidden by Akismet.

Actually you need to find the right mesh or meshes and apply mirror material to those mesh or meshes.
Example - https://playground.babylonjs.com/#4U4QH9#24

2 Likes

Is that monitor is .glb file? If so, many thanks!!

Yes, this monitor is GLB file :slight_smile:

1 Like

Thank you for the help, there’s just one thing more. In the playground, there is reflection on the stand of the monitor. How can I make the reflection to stay only on the monitor screen???

In this case you need to change only screen mesh material.

Example - https://playground.babylonjs.com/#4U4QH9#25

Thank you so much. Just one more thing, if the model has several actions, how can I select the actions as some of the actions doesn’t include the mirror.

Not sure if I understand the meaning of “model action” but if you need to find some specific mesh in GLB file you may use scene.getMeshByName(‘meshname’), for example.

1 Like

Hi, so applied the reflective mesh into the mesh of the glb file using scene.getMeshByName as well as scene.getNodeByName but the reflective mesh is not getting applied in the glb. Also, the light source I’ve created into the playground is getting reflected in to the mesh in the glb file. How can I remove the light source in the reflection in the mesh of the glb file?

Could you make a Playground example?

1 Like

Well, since it is not my personal work, so I cannot share. But, the prototype I created is working well. But when implemented the same into the bigger model(glb), the mirrors in those are behaving differently. Out of three mirrors, one is only reflecting the light source I created in the Babylon.js. Other one is distorting when moving the camera, (I think it is trying to reflect something). Note that in each mirror, there are 3 meshes(all reflecting ones). As stated, I used the scene.getMeshByName but its not working at all.