概要
ドーナツ好きな皆様のために、three.jsでドーナツを作ります。
three.jsのインストール方法がコチラ
準備するもの
- MacOS
- Nodeの最新バージョン
- VSCode
- Svelteなど
TorusGeometryを使う
three.jsの公式サイトにトーラスジオメトリが用意されているので、こちらを使います。
前回の立方体のジオメトリを、ドーナツのジオメトリに切り替えます（前回を参照）
newするときのコンストラクタに何も指定しないと、デフォルト値が適用されます。
コンストラクタの引数でデフォルトのサイズ
- radius(中央からの半径) - 1
- tube(チューブの半径) — 0.4
- radioSegments(断面円の分割数) — 12
- tubularSegments(芯の円の分割数) — 48
- arc(中心角(ラジアン)) — Math.PI * 2(360°)
App.js
// 立方体のジオメトリ
// const geometry = new THREE.BoxGeometry(1, 1, 1);
// ドーナツのジオメトリ
const geometry = new THREE.TorusGeometry();
const material = new THREE.MeshPhongMaterial({
color: 0xe9780a // ドーナツカラー
});
// メッシュを作成
const mesh = new THREE.Mesh(geometry, material);
// ドーナツのサイズ分、Y軸を上げる
this.torus.position.set(0, 1.4, 0);
指向性ライトを作る
太陽光と同じような並行な光を当てます。
ポイントライトから指向性ライトに切り替えます。
コンストラクタの引数でデフォルトのサイズ
- color(色) - 0xffffff
- intensive(強度) — 1
- distance(距離) — 0
- decay(減衰) — 2
App.js
// ポイントライト
// const light = new THREE.PointLight();
// 指向性ライト
const light = new THREE.DirectionalLight(0xffffff, 3);
// 座標(x,y,z)
light.position.set(100, 130, 80);
ガイドを表示する
無空間に設置するとイメージしにくいので、ガイドを表示しておきます。
AxesHelperとGridHelperを作成して、シーンに追加するだけです。
それぞれサイズやマスの数が指定できます。
App.js
// xyz軸表示
const axes = new THREE.AxesHelper(100);
this.scene.add(axes);
// 座標表示
const size = 100;
const divisions = 20;
const gridHelper = new THREE.GridHelper(size, divisions);
this.scene.add(gridHelper);
結果
無事にドーナツが表示されました。
(pageは新しくtorus用に作っています)
