共计 826 个字符,预计需要花费 3 分钟才能阅读完成。
绘制各种几何体是 webgl 的强项,相反各种异性几何体就非常麻烦。比如圆角矩形来说在 webgl 中绘制就相对比较麻烦。在 css 中给矩形加上 border-radius 就可以轻易实现。在 webgl 中就非常麻烦了。
思路
1. 我们可以使用 shape 绘制一个圆角矩形的二维平面。
2. 使用 ExtrudeGeometry 拉起这个二维平面从而形成一个三维几何体。
获取一个圆角矩形 path 的方法
function createBoxWithRoundedEdges(width, height, depth, radius0, smoothness) {let shape = new THREE.Shape();
let eps = 0.00001;
let radius = radius0 - eps;
shape.absarc(eps, eps, eps, -Math.PI / 2, -Math.PI, true);
shape.absarc(eps, height - radius * 2, eps, Math.PI, Math.PI / 2, true);
shape.absarc(width - radius * 2, height - radius * 2, eps, Math.PI / 2, 0, true);
shape.absarc(width - radius * 2, eps, eps, 0, -Math.PI / 2, true);
let geometry = new THREE.ExtrudeBufferGeometry(shape, {
depth: depth - radius0 * 2,
steps: 1,
bevelSize: radius,
bevelThickness: radius0
});
geometry.center();
return geometry;
}
需要注意的是 bevelSegments 都不要设置的太大,否则会导致运算量很大,卡顿明显。
原始实现方法来自 round-edged-box
- 我的 blog: neverland.github.io
- 我的 email enix@foxmail.com
正文完
发表至: javascript
2019-10-18