threejs 角丸

Question

        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

これで普通の立方体だと思いますが、
角丸をとりたいときはどうすればよいでしょうか？

Answer 1

ドキュメントを確認したところBoxGeometryにRoundを設定するようなものはありませんでした。
https://threejs.org/docs/#api/geometries/BoxGeometry

以下のようなものがありました。ExtrudeBufferGeometry()とShape()で角の取れたBOXを表現しているようです。
https://discourse.threejs.org/t/round-edged-box/1402

また、以下のようなものもありましたのでBoxGeometry()を元にしても作成できるのかもしれません。ご参考までに。
https://threejs.org/examples/webgl_modifier_subdivision.html

追記
私の環境ですと以下のようなコードで角丸BOXが表示されましたがダメでしょうか？

//中略
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
//中略
     var cubeGeometry = new createBoxWithRoundedEdges(300, 300, 300, 30, 2);
     var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
     var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
//中略

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, {
     amount: depth - radius0 * 2,
     bevelEnabled: true,
     bevelSegments: smoothness * 2,
     steps: 1,
     bevelSize: radius,
     bevelThickness: radius0,
     curveSegments: smoothness
});

Comments

[cheche0830]

ありがとうございます。cssのようにradiusで簡単にというわけにはいかないんですね・・・

ExtrudeBufferGeometryがつかえそうですね！
参考はそのままでは動かなかったのでdocument見てみます！