three.jsについて

2020年10月26日

フロントエンド

卒業制作でthree.jsを使って作品を作ろうと考えており、今three.jsを勉強中です。使い始めた技術なのでなかなか関数など覚えきれないのでブログにまとめていこうと思います。今回は全体の流れをまとめていきます。

three.jsとは

three.jsはWeb上で3D技術を扱えるWebGLを扱いやすくしたフレームワークです。WebGLそのものだとかなり難しいことも比較的簡単に実装できます。それでもなかなか難しいと思いますので習得するのにそれなりの時間が必要ですね。

three.jsを使うための準備

実際に3Dのコンテンツを生成する前に必要なものを準備していきます。

three.jsの読み込みと

JSのライブラリなので当然ファイルの読み込みが必要です。https://threejs.org/でJSファイルをダウンロードしてscriptで読み込みます。

<script  src="js/three.min.js"></script>

canvas要素

three.jsではcanvas要素を使って3Dのコンテンツを表示させます。canvas要素にはclassを設定しておきましょう。ここではそのままcanvasというクラス名をつけておきます。

<body> 
    <canvas class="canvas"></canvas> 
</body>

これでthree.jsを扱うための準備完了です。

レンダラー

レンダリング(情報からコンテンツを表示させること)するためにレンダラーを追加します。THREE.WebGLRendererクラスを使って以下のように記述していきます。先ほどHTMLに追加したcanvas要素を追加します。またデフォルトのサイズだと小さすぎるのでsetSize()を使って設定しましょう。

// レンダラーを生成
const renderer = new THREE.WebGLRenderer({ 
    canvas: document.querySelector('.canvas') 
});
renderer.setSize(900, 600);

シーン

続いてシーンを作成します。シーンは3Dの空間のことで、ここに3Dオブジェクトなどを追加していきます。THREE.Sceneを使います。

// シーンを作成
let scene = new THREE.Scene();

カメラ

次はカメラを実装していきます。どの視点から3Dコンテンツを見るかを決めます。今回は動かずに固定されているカメラを実装する例を書きます。以下のように数値を指定すれば正面に視点がいきます。

//カメラを生成
camera = new THREE.PerspectiveCamera(45, 900 / 600, 1, 10000);     camera.position.set(0, 0, +1000);

3Dコンテンツを表示させる

実際に表示させる段階になりました。表示させるにはメッシュというのを使用します。そのメッシュにはジオメトリとマテリアルが必要になります。ジオメトリは表示させるものの形のことで、マテリアルは色や質感のことです。

今回は赤色の球体を表示させる例を書きます。次の記事でまたここについては詳しくまとめます。

// 球体の形状
let geometry = new THREE.SphereGeometry(300,30,30);
// 色の指定
let material = new THREE.MeshStandardMaterial({color: 0xFF0000});
// メッシュを作成 
let mesh = new THREE.Mesh(geometry,material);
// シーンにメッシュを追加 
scene.add(mesh);

ライト

このままでは光がないので真っ暗のままで何も見えません。なのでライトを追加します。平行光源などたくさん種類はありますのでこれも別の記事でまとめるつもりです。

// 平行光源
let directionalLight = new THREE.DirectionalLight(0xFFFFFF);
directionalLight.position.set(1, 1, 1);
// シーンに光源を追加
scene.add(directionalLight);

レンダリングさせる

最後にレンダリングさせます。以下のように書きます。

// レンダリング
renderer.render(scene, camera);

まとめ

実際に簡単な物を表示させる流れをまとめていきました。細かい部分の説明を省いているのでそこの部分は詳しくまとめていこうと考えています。

Pocket

related

Markdown記法備忘録

前回の記事でHexoを使ってサイトを制作しましたが、そのサイトの記事を書いていくには、Markdown記法を使う必要があります。いつもWordPressのGUIで記事を更新している私にとってはあまり馴

フロントエンド

2020.09.13

Gatsby.jsで簡単なブログを作ってみた

Gatsby.jsで簡単なブログを作ってみたので紹介していこうと思います。 今回制作したブログのURLは以下です。Netlifyでデプロイして公開しています。 https://kokenote.net

フロントエンド

2020.11.02

jQueryのanimate関数について

今回は、jQueryの学習の続きということでanimate()についてまとめていきます。 animate関数とは? まず、animate関数とは何なのかについてです。animate関数はjQueryで

フロントエンド

2020.04.17

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

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

フロントエンド

2020.11.08

profile

kobayashi kent

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