three.js - 如何在 Three.js 中创建带圆角的架子？

Question

有人知道如何在three.js中创建一个带圆角的架子吗？我只能通过使用 CylinderGeometry https://threejs.org/docs/#api/en/geometries/CylinderGeometry将圆形架子创建为四分之一圆，如下图（上图）所示，但我不知道了解如何创建一个带有圆角的架子，如下图所示（下图）。

标签： three.js

Answer 1

您可以创建一个形状并拉伸它：

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.module.js"
import {OrbitControls} from "https://cdn.jsdelivr.net/npm/three@0.125.2/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(-10, 5, 10).setLength(6);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);

let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(10);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

let sizeX = 5;
let sizeY = 3;
let radius = 0.5;

let halfX = sizeX * 0.5 - radius;
let halfY = sizeY * 0.5 - radius;
let baseAngle = Math.PI * 0.5;

let shape = new THREE.Shape();
shape.absarc(halfX, halfY, radius, baseAngle * 0, baseAngle * 0 + baseAngle);
shape.absarc(-halfX, halfY, radius, baseAngle * 1, baseAngle * 1 + baseAngle);
shape.absarc(-halfX, -halfY, radius, baseAngle * 2, baseAngle * 2 + baseAngle);
shape.absarc(halfX, -halfY, radius, baseAngle * 3, baseAngle * 3 + baseAngle);

let shelfGeom = new THREE.ExtrudeGeometry(shape, {bevelEnabled: false, depth: 1});
let shelfMat = new THREE.MeshLambertMaterial({color: 0xFACE8D});
let shelf = new THREE.Mesh(shelfGeom, shelfMat);
scene.add(shelf);

renderer.setAnimationLoop( _ => {
  renderer.render(scene, camera);
});

</script>