MeshRefractionMaterial for Three.js

Questions
, , ,
1

I tried to make diamond effect using three.js and meshRefractionMaterial.js.

image
image925×552 48.2 KB

image
image985×523 44.1 KB

But I noticed some of diamonds have not meshrefractionMaterials. I am not sure why this happen(Maybe this was caused by rotation of mesh, I think)
How to solve these issues?

I just shared code.

import { MeshRefractionMaterial } from ‘shader’;
import { MeshBVH, SAH, MeshBVHUniformStruct } from “three-mesh-bvh”;

let diamondMaterial = new MeshRefractionMaterial();
diamondMaterial.uniforms.bounces.value = 1.3;
diamondMaterial.uniforms.envMap.value = texture;

  diamondMaterial.uniforms.resolution.value.set(2, 2);
  diamondMaterial.uniforms.envMap.value.needsUpdate = true;
  diamondMaterial.uniforms.color.value = new THREE.Color('#D03796');
  diamondMaterial.uniforms.ior.value = 1.6;
  diamondMaterial.uniforms.fresnel.value = 0;
  diamondMaterial.uniforms.aberrationStrength.value = 0.005;

gltf.scene.traverse(mesh => {
if (mesh.isMesh) {
const meshName = mesh.name;
if (meshName.includes(‘Obj’)) {
mesh.material = diamondMaterial.clone();
const rotatedGeometry = new THREE.BufferGeometry().copy(mesh.geometry);

            const bvh = new MeshBVH(rotatedGeometry, {
              lazyGeneration: true,
              strategy: SAH
            });
            const newBVH = new MeshBVHUniformStruct();
            newBVH.updateFrom(bvh);
            mesh.material.uniforms.bvh.value = newBVH;
          }
          else if (meshName.includes('dia')) {
            mesh.material = diamondMaterial.clone();
            const rotatedGeometry = mesh.geometry;
            const bvh = new MeshBVH(rotatedGeometry, {
              lazyGeneration: true,
              strategy: SAH
            });

            const newBVH = new MeshBVHUniformStruct();
            newBVH.updateFrom(bvh);
            mesh.material.uniforms.bvh.value = newBVH;
            mesh.material.uniforms.fresnel.value = 0;
            mesh.material.uniforms.aberrationStrength.value = 0;
            mesh.material.uniforms.color.value = new THREE.Color('#F9F9FA');
          }
          else if (meshName.includes('gold')) {
            mesh.material = goldMaterial;
          }
          else {
            mesh.material = silverMaterial;
          }
        }
      });
2

Hi @volcano , I’m facing the same issue. Could you resolve it meanwhile? Thanks!

3

I’ve been working on a similar project - my guess is that since you have the effect working correctly in one location, and not correctly in others, that the culprit might be the geometry of your smaller gems.
Check for inverted normals - or other irregularities in the gems that aren’t working correctly. Let me know if you need more insight - there are some other gotchas that you could be running afoul of here as well.

edit: whoops - I misread the year on this.

2 Likes
4

lol, no worry, thanks for your message