three.jsジオメトリについて

2020年11月08日

フロントエンド

前回、three.jsで簡単なものを表示させる手順についての記事を書きましたが、今回はジオメトリに重点を置いてまとめていきます。実際に形を形成していくので結構楽しい部分かなと思います。

立方体

THREE.BoxGeometryクラスを使用します。BoxGeometry(幅,高さ,奥行き)と指定します。詳しくは以下の公式ドキュメントでも確認してください。

https://threejs.org/docs/#api/en/geometries/BoxGeometry

let geometry = new THREE.BoxGeometry( 300, 30, 30 ); 
let material = new THREE.MeshStandardMaterial( {color: 0xFF0000} );
 let box = new THREE.Mesh( geometry, material ); 
scene.add( box );

球体

THREE.SphereGeometryクラスを使用します。SphereGeometry(半径,横のセグメント,縦のセグメント)と指定します。セグメントの値を大きくするとなだらかでカクカクしていない綺麗な球体になります。逆に小さくするとカクカクとした球体になります。詳しくは以下の公式ドキュメントでも確認してください。

https://threejs.org/docs/#api/en/geometries/SphereGeometry

let geometry = new THREE.SphereGeometry( 300, 30, 30 );
let material = new THREE.MeshStandardMaterial( {color: 0xFF0000} );
let sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

平面体

THREE.PlaneGeometryクラスを使用します。PlaneGeometry(幅,高さ)と指定します。詳しくは以下の公式ドキュメントでも確認してください。

https://threejs.org/docs/#api/en/geometries/PlaneGeometry

let geometry = new THREE.PlaneGeometry( 300, 30, 30 );
let material = new THREE.MeshStandardMaterial( {color: 0xFF0000} );
let plane = new THREE.Mesh( geometry, material );
scene.add( plane );

三角錐

THREE.ConeGeometryクラスを使用します。ConeGeometry(円錐の半径,高さ,円錐の半径のセグメント,縦のセグメント)と指定します。詳しくは以下の公式ドキュメントでも確認してください。

https://threejs.org/docs/#api/en/geometries/ConeGeometry

let geometry = new THREE.ConeGeometry(200,500,8);
let material = new THREE.MeshStandardMaterial( {color: 0xFF0000} );
let cone = new THREE.Mesh( geometry, material );
scene.add( cone );

円柱

THREE.CylinderGeometryクラスを使用します。CylinderGeometry(上の底面の半径,下の底面の半径,高さ,底面のセグメント,縦のセグメント)としてします。詳しくは以下の公式ドキュメントでも確認してください。

https://threejs.org/docs/#api/en/geometries/CylinderGeometry

let geometry = new THREE.CylinderGeometry(200,500,8);
let material = new THREE.MeshStandardMaterial( {color: 0xFF0000} );
let cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

まとめ

three.jsのジオメトリを生成方法についてまとめました。形を作るとなるとなんだか難しそうだと感じると思いますが、three.jsなら準備されているものを使えば簡単にできます。いろいろな形を組み合わせて面白いものを作っていきたいですね。

Pocket

related

Sassの環境を整える

今回は、何となく避けてきたSassを勉強しようとふと思ったのでブログにまとめていきます。学校の授業で少し触ったのですがほとんど覚えていませんので時間もありますので覚えていこうと思います。 Sassとは

フロントエンド

2020.05.03

HTMLのtable要素

だいぶ前にフォームについてまとめましたがtableもなかなか使わずに忘れてしまっているので復習と備忘録を兼ねてまとめていきます。 tableの基本的な構造 いきなりですがtableの基本的な使い方をコ

フロントエンド

2020.10.14

CSSアニメーションの基礎

自分自身CSSはある程度かけるのですが、CSSアニメーションについてはあまりかけないので今回、自分の勉強がてらこのブログにまとめていこうと思います。 CSSアニメーションには「transition」と

フロントエンド

2020.03.19

jQueryのeachメソッドの使い方

jQueryでは複数の要素に対して繰り返し処理を行う場合にeach()を使うことができます。そのeach()を使いこなしたていきたいので今回しっかりまとめていきます! eachメソッドって何? そもそ

フロントエンド

2020.06.10

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き