Exploring the capabilities of the ThreeCSG library, I'm currently trying to replace the sphere or normal geometry with a custom Shape, specifically the heart shape from the 3js examples.
However, I'm encountering an unusual result on the side facing the camera. Below is a snippet of the code:
(function onLoad() {
var container, camera, scene, renderer;
var grey = 0xD3D3D3;
init();
animate();
function init() {
container = document.getElementById('container');
initScene();
addGridHelper();
addCamera();
addLighting()
addRenderer();
addOrbitControls();
createHeartMesh();
createDieCutHandle();
// Creates a CSG cut on the cube based on the passed mesh
createCSGDiecutHandle();
}
// More functions and scene setup...
})();
The cube on the left shows an extruded heart geometry protruding from inside a cube - they occupy the same position but are not merged.
On the right, we have the CSG version where I try to subtract the heart from the cube. The issue arises on the side facing the camera; it appears distorted compared to the backside. Adding side: THREE.DoubleSide did not resolve the problem.
I've also referred to this related question here, and attempted calling updateMatrix() on the heart mesh without success.
Any insights into what might be causing this behavior would be greatly appreciated. Thanks!