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 [email protected]