如何在矩形（three.js）中切孔？答案

【问题标题】：How to cut holes in a rectangle (three.js)?如何在矩形（three.js）中切孔？
【发布时间】：2020-06-28 19:16:01
【问题描述】：

我正在尝试在三个由three.js 创建的简单矩形上切两个孔。我的问题是孔没有正确显示（没有 3d 效果）。这是我目前的做法：

const modelContainer = document.getElementById('containerModel');

// Scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xEEEEEE);

// Camera
const camera = new THREE.PerspectiveCamera(
  50,
  modelContainer.clientWidth / modelContainer.clientHeight,
  1,
  1000,
);
camera.position.set(0, 150, 400);
scene.add(camera);

// Light
const light = new THREE.PointLight(0xffffff, 0.8);
camera.add(light);

// Group
const group = new THREE.Group();
scene.add(group);

// Rectangle
const rectShape = new THREE.Shape()
  .moveTo(0, 0)
  .lineTo(0, 120)
  .lineTo(200, 120)
  .lineTo(200, 0)
  .lineTo(0, 0);

// 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);

// 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);

这是我的结果： https://jsfiddle.net/9y0a64nx/27/

如果我用圆形替换矩形，孔将正确显示： https://jsfiddle.net/9y0a64nx/28/

如何获得与圆形相同的孔的 3D 效果？

感谢您的帮助！

【问题讨论】：

标签： javascript three.js

【解决方案1】：

您必须颠倒定义外部矩形形状的顺序：

const rectShape = new THREE.Shape()
    .moveTo(0, 0)
    .lineTo(rectLength, 0)
    .lineTo(rectLength, rectWidth)
    .lineTo(0, rectWidth)
    .lineTo(0, 0);

请记住，孔必须以相反的顺序定义（CW 与 CCW）。

更新实时示例：https://jsfiddle.net/ktjqe2L4/

【讨论】：