I am totally new to three js and wanted to know is there a jewelry websites that is created with three js that displays some 3d models , i would like to see some jewelry websites to get some ideas from but i cannot find any yet.
2 Likes
Do you know this?
Three-gpu-pathtracer: A modular shader-based path tracing extension for three.js! - #5 by gkjohnson
How to create sine-wave groove in ring geometry with extrudegeometry?
How to engrave words(name) into a ring in three js
Give Curve Text
How can I create a hole in a geometry with text?
4 Likes
thank you for reply but i am searching for something like this one but for jewelry
Hey. I created a bunch of jewelry websites using threejs.
webgi-jewelry.vercel.app
You can find others on my twitter profile and here: https://showcase.webgi.xyz
2 Likes
wow this is amazing Anderson , can you please tell me how do you make the model so beautiful , is it an effect or lightning can you tell me what do you do to make the model looks this beautiful ? thank you in advnace. 
I came up with this one day. I don’t remember how, but you can cross section the geometry and look inside.
it could get better : https://sbcode.net/extra_html/section.html
2 Likes
Hey Diana.
The react three fiber link that I’ve sent is using MeshTransmissionMaterial with some settings to make the diamond more realistic. It is pretty simple to use.
But those others are using WebGI, a proprietary renderer created by some friends that is threejs based but it is unique. Basically, they created an exclusive version of threejs and extended it with their deep knowledge of very advanced computational techniques. With that, they were able to create a post-processing pipeline that is much better on performance than anything that I’ve ever seen. We can add more than 40 post-processing passes without losing any performance. Specifically talking about the diamond, it is a custom material that calculates the internal refractions 9x more accurately than the other diamond shaders and yet is capable of getting a very good performance. Not to mention that SSR, SSAO, and SSBEVEL are applied to make the results pop. We also have a very good DOF PP pass that is way faster than Evee DOF and works in real-time in the browser. And all of that works even better on mobile.
So, I must say that if you need ultra-realistic results for diamonds with no impact on performance, it must be webgi. I don’t know any other solution available capable to provide what this tool can.
I hope this can be helpful to you.
Cheers
1 Like
really thank you Anderson , I will check the code because this is what i was looking for , I wanted to learn how to make this beautiful models but i am missing the meshTransmissionMaterial because I purchased some model from a 3D designer and they were look so bad into R3F , will try to remove their material and try out the TransmissionMaterial looks so cool , thank you so much also thank you for this amazing YT videos
1 Like
For diamonds I would use meshRefractionMaterial, which is also in Drei, transmissionMat imo is better for glass.
sorry another question , I am using R3F but i am not sure what settings to do to be able to get the diamond effect , sadly webgi.xyz website always gives me an error while applying the diamond and try to export it using glb format :
I also tried but it always gives me a black screen , also it doesn’t apply any diamond effect on the 3D Model , please can you give me a small example for meshtransmissionmaterial ?
1 Like
Hey Diana. This example shared by drcmda is the one that I recommend you to follow: Diamond refraction - CodeSandbox. To convert any mesh into a diamond on webgi, you just select the mesh and click on “make diamond”. But you need to use webgi ecosystem to render it. If you use their editor but export the glb and try to load it on R3F it will not work because their diamond material only renders as a diamond on webgi ecosystem.
But using this example, you should be able to get proper diamond render on R3F okay?
1 Like
the MeshRefractionMaterial is working in this example but do you know why the model is getting in total black when the diamond appear on the screen ? ( i copied the same code from the example ) ^^
I found out that the diamond doesn’t work but the Bloom Effect , this is why i am getting this weird black model , but it doesn’t look good , i guess i will try to use webgi website instead
Can you send me a codesandbox with your implementation problem? Or send me your model. I can try to help. Maybe it is something related to the envmap. Try to update both R3F and Drei to last version.
Hey Diana. I just sent you the fixed model. The issue was that your model had no natural diamonds. They were fake and this would not allow internal refractions to work.
I did some modeling on Blender and fixed them so now they look great. Here are some screenshots to help others search for it in the future. I also share a code sandbox with you in a DM. Please feel free to share it here so maybe some other dev searching for it would find the solution too.
Also, your model was 12MB. I just ran it into GLTFJSX and it now has 631KB 
I hope it helps!
2 Likes
yea , i was so surprised about the size , all of my models were from 10MB to 50MB , maybe i need to study more about blender but i am really amazed 
here is the codesandbox thanks to Anderson help he created the fix for the meshRefractionMaterial
1 Like