How to achieve this glass material with a rainbow-like effect?

Any advice on how to achieve a material like this? I know how to make glass but the issue is achieving a similar rainbow like effect. Would I need to play around with lighting or add a shader?


If you’re using vanilla threejs this may help: drei/venilla MeshTransmissionMaterial
If you’re using react-three-fiber, a react equivalent: drei MeshTransmissionMaterial

And approximately one hundred thousand examples by @drcmda :see_no_evil::

(You can probably find more usage examples if you scroll further on and :relieved:)

1 Like

You’re the best, thanks so much.

Okay so I’m trying to implement this MeshTransmissionMaterial and it’s just not refracting anything. This is how I’m currently creating it, is this correct?

const torusGeometry = new THREE.TorusGeometry(3, 0.4, 32, 64);

// Create a glass material using MeshTransmissionMaterial
const glassMaterial = new MeshTransmissionMaterial({

// Create a mesh using the torus geometry and the glass material
const torusMesh = new THREE.Mesh(torusGeometry, glassMaterial);

// Add the mesh to the scene

Anyone also confused, just use

const ball_mat = Object.assign(new MeshTransmissionMaterial(8), { properties }