Monroe Yorke — CAD Ring Viewer

Real-time preview of your CAD deliveries. Drop a .glb below to see how it renders. Adjust metal, HDRI environment, camera-locked photo lighting, and diamond material to test the model in different conditions. Or try the customer-facing Configurator preview to see how this looks on a PDP.

Load model
ES-395.glb (sample — replace with your own)
or drag a .glb file anywhere on this page to load it instantly
Viewer
Rotate · Tilt · Zoom · Compare metals and lighting
3
0.02
1.60
3.0
14°
0.15
Booting three.js…
BVH build on first load may take a few seconds. If this hangs, open the browser console (Cmd+Opt+I).
Renderer: bare three.js r163 BVH: not yet built Diamond material: ShaderMaterial (BVH raytraced) FPS: —
The technique: for each diamond mesh, build an SAH BVH with three-mesh-bvh. Wrap the mesh in a ShaderMaterial whose fragment shader is given the BVH as a uniform texture. Per pixel, cast the view ray, refract at the first facet (Snell's law with ior=2.42), then trace up to N bounces against the BVH. Any bounce that fails Snell's condition becomes internal reflection. The final direction samples the HDRI equirect map. Chromatic aberration is faked by tracing red/green/blue with slightly offset IORs. This is the same technique as drei's MeshRefractionMaterial — I've inlined a working shader version rather than trying to consume the drei source directly.

Photo lighting v2: on top of the HDRI, we add camera-locked "virtual" light sources baked into the diamond sample. When a diamond's exit ray points near the key light's world-space direction, we boost that pixel's brightness. The key light direction is recomputed every frame from the camera position, so the light always sits behind the viewer. This is what makes each pave stone show the classic Hearts & Arrows flash pattern — same trick jewellery photographers use with ring lights around the lens. Metal responds via real DirectionalLights targeting the same directions.