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

Questions
, ,
1

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?

https://www.pinterest.com/pin/756534437424620228/

Thanks.

2

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 https://twitter.com/0xca0a and https://twitter.com/N8Programs :relieved:)

1 Like
3

You’re the best, thanks so much.

4

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({
params…
});

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

// Add the mesh to the scene
scene.add(torusMesh);

5

Anyone also confused, just use

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