Glassmorphism Effect for Non Environment

[sweet pawn]

So i have a exported GLTF from spline.design that only have gray color. I want to make this GLTF looks transparent with glassmorphic effect in front of my video component.

I'm successfuly implemented with background texture and environment component. But, i want it to show in front of my plain HTML video tag that need dynamic sources and it will be placed in my grid area with HTML.

Currently i adjust the icon with meshPhysicalMaterial with transparent and basic glass configuration. Attached is my current implementation, expected result and the current codes

Page file with canvas code: https://pastebin.com/QsKJLQ5W
Icon code: https://pastebin.com/VumNMdvh

thankss!!

[topaz rock]

try adjusting thickness / ior of mesh physical material

[sweet pawn]

yeah already did that. but i feel it still doesnt looks like glass and have gray color like previous result

[lone flame]

To display a glass-like 3D model over a video in React Three Fiber, use MeshPhysicalMaterial for transparency and reflections, stack the canvas over the video with CSS, and add HDRI lighting for realism. Ensure responsiveness, interactivity, and smooth performance with lightweight assets.

[sweet pawn]

well. already did that currently 🤷‍♂️