path - three.jsで押し出し

Question

webgl_geometry_extrude_shapes.htmlの例を見たときに、円に沿って長方形を押し出して3Dリングを作成したいのですが、例のパスを円で変更できませんでした。誰かが例を投稿できますか？前もって感謝します！

Answer 1

Latheと呼ばれる別の種類の「押し出し」を探していると思います。LatheGeometry に渡してメッシュ インスタンスにプラグインするオフセット長方形を表すポイントを含むパスを作成する必要があります。

例えば

var pts = [
            new THREE.Vector3(150,0,50),//top left
            new THREE.Vector3(200,0,50),//top right
            new THREE.Vector3(200,0,-50),//bottom right
            new THREE.Vector3(150,0,-50),//bottom left
            new THREE.Vector3(150,0,50)//back to top left - close square path
           ];
var mesh = new THREE.Mesh( new THREE.LatheGeometry( pts, 12 ), new THREE.MeshLambertMaterial( { color: 0x2D303D, wireframe: true, shading: THREE.FlatShading } ));
mesh.position.y = 150;
mesh.overdraw = true;
mesh.doubleSided = true;

scene.add( mesh );

LatheGeometry コンストラクターでは、最初のパラメーターは点の配列として旋盤加工するパスであり、2 番目のパラメーターはステップ数 (ステップ数が多いほど詳細/放射状の反復) であり、3 番目のパラメーター (私は使用していません)例では) は角度です。デフォルトでは 360 になりますが、それを制御することもできます。

ポイントに関しては、x 軸上で少しオフセットされていることに注意してください。ポイントの配置は、旋盤加工される正方形のサイズだけでなく、旋盤のオフセットにも影響します (オフセットを 0 にすると、円柱全体が得られます)。また、ポイントは旋盤軸に影響します (XZ を使用したことに注意してください)。

旋盤の概念に慣れていない場合は、ほとんどの旋盤が機能をサポートしているため、おそらく 3D エディターで遊んでみる必要があります。(少し話が逸れますが、この操作は Illustrator の Effects > 3D > Revolve でサポートされています)