Three.js is a powerful 3D library that simplifies WebGL and makes it practical to build interactive scenes, complex objects, and custom rendering effects in the browser.

If you are working with a diamond model and want it to feel more alive, custom shaders let you go beyond standard materials. With the help of three-mesh-bvh, you can simulate internal reflections, refractions, and chromatic splitting to create a much more convincing sparkling look.

Before building the shader, install both three and three-mesh-bvh in your application.

npm install three
npm install three-mesh-bvh

The three-mesh-bvh package is especially useful here because it helps accelerate ray intersection logic for complex geometry like diamonds.

The first step is to create a scene, set up a perspective camera, create a WebGL renderer, and start a render loop.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.set(0, 1, 5);

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

Once the scene is ready, load your diamond object. Three.js supports several file types such as OBJ, GLTF, and JSON. In this example, the model is loaded in OBJ format and the custom shader material is applied to mesh children during traversal.

loader.load(
  'path/to/diamond.obj',
  function (loadedObject) {
    loadedObject.traverse(child => {
      if (child instanceof THREE.Mesh) {
        child.material = diamondMaterial;
      }
    });
    scene.add(loadedObject);
  },
  function (xhr) {
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  function (error) {
    console.error('An error happened', error);
  }
);

The custom diamond material uses THREE.ShaderMaterial and includes uniforms for environment reflections, BVH acceleration, refraction index, bounce count, chromatic aberration, and color tuning.

import {
  MeshBVH,
  MeshBVHUniformStruct,
  BVHShaderGLSL,
  SAH
} from '../../vendor/three-mesh-bvh';

const params = {
  color: '#ffffff',
  bounces: 1.0,
  ior: 2.4,
  aberrationStrength: 0.01,
  fastChroma: false,
  animate: true,
};

const environmentPromise = getRGBELoader().load('/img/env-gem-2.hdr');

let environment = environmentPromise;
environment.mapping = THREE.EquirectangularReflectionMapping;
environment.generateMipmaps = true;
environment.minFilter = THREE.LinearMipmapLinearFilter;
environment.magFilter = THREE.LinearFilter;

const diamondMaterial = new THREE.ShaderMaterial({
  uniforms: {
    envMap: { value: environment },
    bvh: { value: new MeshBVHUniformStruct() },
    projectionMatrixInv: { value: camera.projectionMatrixInverse },
    viewMatrixInv: { value: camera.matrixWorld },
    resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
    bounces: { value: params.bounces },
    ior: { value: params.ior },
    color: { value: new THREE.Color(params.color) },
    fastChroma: { value: params.fastChroma },
    aberrationStrength: { value: params.aberrationStrength },
  },
  vertexShader: `...`,
  fragmentShader: `...`,
});

Use MeshBVH: The three-mesh-bvh library dramatically reduces the number of intersection tests required for ray-based effects.

Reduce Ray Bounces: Higher bounce counts can look better, but they add more work per pixel.

Lower Resolution: On lower-end devices, rendering at a reduced resolution and upscaling can help preserve smooth performance.

To help the diamond stand out even more, consider adding post-processing such as bloom or tone mapping. These can make highlights feel brighter and more cinematic.

const composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));
composer.addPass(new THREE.BloomPass());

function animate() {
  requestAnimationFrame(animate);
  composer.render();
}
animate();

Once the shader is working, you can push the presentation further with interaction and animation. Rotating the diamond, changing the light angle, or animating the camera can showcase the internal effects more effectively.

Custom shaders in Three.js unlock visual effects that standard materials cannot easily match. By combining internal reflection, refraction, chromatic aberration, and BVH-accelerated ray logic, you can create a diamond that feels far more dynamic and realistic in the browser.

With Three.js and three-mesh-bvh, it becomes practical to build rich 3D experiences that look impressive while still staying interactive and web-friendly.