I've been attempting to create two holes in a simple rectangle using three.js, but I'm facing an issue where the holes aren't showing up correctly with a 3D effect. Below is my current approach:
const modelContainer = document.getElementById('containerModel');
// Setting up Scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xEEEEEE);
// Initializing Camera
const camera = new THREE.PerspectiveCamera(
50,
modelContainer.clientWidth / modelContainer.clientHeight,
1,
1000);
camera.position.set(0, 150, 400);
scene.add(camera);
// Adding Light
const light = new THREE.PointLight(0xffffff, 0.8);
camera.add(light);
// Creating Group
const group = new THREE.Group();
scene.add(group);
// Drawing Rectangle
const rectShape = new THREE.Shape()
.moveTo(0, 0)
.lineTo(0, 120)
.lineTo(200, 120)
.lineTo(200, 0)
.lineTo(0, 0);
// Defining Holes
const hole = new THREE.Path()
.moveTo(144, 60)
.absarc(134, 60, 10, 0, Math.PI * 2, true);
rectShape.holes.push(hole);
const hole2 = new THREE.Path()
.moveTo(77, 60)
.absarc(67, 60, 10, 0, Math.PI * 2, true);
rectShape.holes.push(hole2);
const extrudeSettings = {
depth: 20,
bevelEnabled: true,
bevelSegments: 2,
steps: 2,
bevelSize: 1,
bevelThickness: 1,
};
const geometry = new THREE.ExtrudeBufferGeometry(rectShape, extrudeSettings);
geometry.center();
geometry.rotateX(Math.PI * -0.5);
const material = new THREE.MeshPhongMaterial({
color: 0x222222,
});
const mesh = new THREE.Mesh(geometry, material);
group.add(mesh);
// Setting Up Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(modelContainer.clientWidth, modelContainer.clientHeight);
new OrbitControls(camera, renderer.domElement);
modelContainer.appendChild(renderer.domElement);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
function onWindowResize() {
camera.aspect = modelContainer.clientWidth / modelContainer.clientHeight;
renderer.setSize(modelContainer.clientWidth, modelContainer.clientHeight);
camera.updateProjectionMatrix();
}
window.addEventListener('resize', onWindowResize, false);
Here is the result that I achieved: https://jsfiddle.net/9y0a64nx/27/
Interestingly, when substituting the rectangle with a circle shape, the holes display correctly: https://jsfiddle.net/9y0a64nx/28/
I am seeking guidance on how to achieve the same 3D effect for the holes as seen with the circle shape.
Thank you for any assistance provided!