I tried to make diamond effect using three.js and meshRefractionMaterial.js.
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;
}
}
});