Threejs-in-autonomous-driving-6圆矩

绘制各种几何体是 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