Hi everyone, I’m trying to reproduce siri 3D representation and i actually have no idea on how to reproduce the glass circle that reflect light :
Here’s what I’ve achieved so far :
Do you have any idea ?
Looks like you want to make the reflection like on the edge of the bubble, i never messed with cube camera before. You can search on the documentation how you can implement reflection artificially using cube camera.
It’s not exactly about the Siri logo, neither does it use Three - but here’s a tiny article that shows how to create a GLSL shader that handles this kind of reflections “inside” a glass object with an inverted cube camera (mind, while WebGL code won’t be much helpful, GLSL shaders code should be mostly compatible with Three and the ShaderMaterial.)
1 Like
I think you’re on a very good track so far. Something of note is that each color uses “additive blending” when overlapping. For example: red+green = yellow. So for each material, make sure to set blending: THREE.AdditiveBlending
https://threejs.org/docs/index.html#api/en/materials/Material.blending
2 Likes