お問合せ先 CONTACT FORM

APRICOT DESIGN BLOG

「Three.js」について学ぶ その2

UPDATE : 2020.02.12

CATEGORY : Sasayama Sayaka

コーダーのさやさんです。

前回からだいぶ間が空いてしまったのですが、
再び『three.js』のお話をしようと思います。

「Three.js」について学ぶ




『three.js』は手軽に3Dコンテンツ制作のできるJavaScriptライブラリです。
前回はサンプルを元に実際に『three.js』でいろいろな3D表現を作り、
「こんな表現を作ることができる」ということを紹介しました。

前回、記述したJavaScriptのソースコードについて説明をしなかったので、
今回は少しソースコードの内容を説明したいと思います。



今回用意したサンプルはこちらです。

See the Pen
NWqGxXw
by sasayama (@sasayama)
on CodePen.


前回作成したサンプルからコードをもう少し見やすくし、
アニメーションしていた部分を静止させました。

今回はこちらのjsのコードを順番に説明して、
『three.js』でどのように立体物を表現しているかをお伝えできればと思います。


サンプルの「JS」部分のコードは以下です。


// ページの読み込み後にWebGLの処理を呼び出して実行
window.addEventListener('load', init);


//WebGLの処理
function init(){

//①レンダラーの準備-------------------------->

//WebGLのレンダリング
const renderer = new THREE.WebGLRenderer({
//HREE.WebGLRendererクラスのコンストラクターには引数として、HTMLに配置したcanvas要素を指定
canvas: document.querySelector('#myCanvas')
});

//レンダラーのサイズ
const width = window.innerWidth;
const height = 700;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);

//②シーンを作成する-------------------------->
//(シーンとは3D空間のことで、3Dオブジェクトや光源などの置き場)
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff);//シーンの背景色

//③カメラを作る(3Dではどの視点から空間を撮影するか)------->
const camera = new THREE.PerspectiveCamera(45, 960 / 540);
// カメラの初期座標を設定(x,y)
camera.position.set(0, 0, +1000);

//※ライトを作成-------------------------->
//(※マテリアルの種類によってはライト(光源)が必要になる)
// 環境光源を作成
const light1 = new THREE.AmbientLight(0xFFFFFF, 1.0);
scene.add(light1); // シーンに追加

// 平行光源を作成(物体に立体感が出る)
// new THREE.DirectionalLight(色, 光の強さ)
const light2 = new THREE.DirectionalLight(0xFFFFFF, 1);
scene.add(light2); // シーンに追加

//④立方体を作る-------------------------->
//ジオメトリ(物体の形)
// new THREE.BoxGeometry(幅, 高さ, 奥行き)
const geometry = new THREE.BoxGeometry(100, 200, 100);
// マテリアルを作成(物体の見た目)
const material = new THREE.MeshLambertMaterial({color: 0x6699FF});
//ジオメトリ+マテリアル=立方体(メッシュ)の作成
// new THREE.Mesh(ジオメトリ,マテリアル)
const box = new THREE.Mesh(geometry, material);

//立方体の角度を変更
box.rotation.x = THREE.Math.DEG2RAD * 45;
box.rotation.y = THREE.Math.DEG2RAD * 45;

// 立方体をシーンに追加
scene.add(box);

//⑤レンダリングする-------------------------->
// ★★レンダリング(シーンとカメラの情報を追加して描写)
renderer.render(scene, camera);

}


function init(){~から始まる部分以下が、
3D描写の主となる部分です。
ここから順番にソースコードを説明していこうと思います。



①レンダラー準備


レンダラーとは作成する3D物体を描写するためのものです。
テレビの画面とか、モニター的なものと説明すればわかりやすいかなと思います。

レンダラーを用意しなくては3D物体を画面に表示できません。
なので、以下の部分でまずレンダラーの準備(Canvas要素を描写エリアとして指定、サイズを指定)を行っています。


//①レンダラーの準備-------------------------->

//WebGLのレンダリング
const renderer = new THREE.WebGLRenderer({
//HREE.WebGLRendererクラスのコンストラクターには引数として、HTMLに配置したcanvas要素を指定
canvas: document.querySelector('#myCanvas')
});

//レンダラーのサイズ
const width = window.innerWidth;
const height = 700;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);





②シーンを作成する


次にシーンを作成します。
シーンとは3D空間のことで、3Dオブジェクトや光源などの置き場です。
レンダラーがテレビやモニターだとしたら、シーンは撮影対象の舞台と表現すれば伝わるでしょうか。

①でレンダラというモニターを準備したら、
②ではシーンという撮影用の舞台を用意しています。


//②シーンを作成する-------------------------->
//(シーンとは3D空間のことで、3Dオブジェクトや光源などの置き場)
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff);//シーンの背景色




③カメラを作る


モニター(レンダラー)と舞台(シーン)を用意したら、
舞台を撮影するカメラを用意します。

また、後述する「マテリアル」によっては3D物体を照らすライトが必要となるので、
ライトの用意もします。
(ライトについては「④3D物体を作る」の説明と一緒にするのが適切と思うのですが、
「④3D物体を作る」の説明が長くなってしまうのでここで先に説明させていただきます)


//③カメラを作る(3Dではどの視点から空間を撮影するか)------->
const camera = new THREE.PerspectiveCamera(45, 960 / 540);
// カメラの初期座標を設定(x,y)
camera.position.set(0, 0, +1000);

//※ライトを作成-------------------------->
//(※マテリアルの種類によってはライト(光源)が必要になる)
// 環境光源を作成
const light1 = new THREE.AmbientLight(0xFFFFFF, 1.0);
scene.add(light1); // シーンに追加

// 平行光源を作成(物体に立体感が出る)
// new THREE.DirectionalLight(色, 光の強さ)
const light2 = new THREE.DirectionalLight(0xFFFFFF, 1);
scene.add(light2); // シーンに追加


ライト(光源)は、シーンに追加するのを忘れないようにしましょう。
シーンに追加しないと、以下のように物体は光に照らされずに黒いままとなります。
(※「マテリアル」の種類によってはライトがなくても見えるものもあります)

See the Pen
wvaKWGV
by sasayama (@sasayama)
on CodePen.




④3D物体を作る

3D物体は「ジオメトリ」と「マテリアル」によって表現されます。
「ジオメトリ」とは物体の形のことで、四角形や球体などを指定することで形が決定します。
「マテリアル」は物体の見た目のことで、
色を指定したりテクスチャ(画像)を貼ることで見た目を決定できます。

今回「ジオメトリ」は立方体(BoxGeometry)を、「マテリアル」には色(カラーコード0x6699FF)を指定しています。

また、ライトの表現をわかりやすくするために
立方体に角度をつけています。

3D物体ははライトと同じくシーンに追加する必要があります。
シーンに追加しないと表示されないので注意しましょう。


//④立方体を作る-------------------------->
//ジオメトリ(物体の形)
// new THREE.BoxGeometry(幅, 高さ, 奥行き)
const geometry = new THREE.BoxGeometry(100, 200, 100);
// マテリアルを作成(物体の見た目)
const material = new THREE.MeshLambertMaterial({color: 0x6699FF});
//ジオメトリ+マテリアル=立方体(メッシュ)の作成
// new THREE.Mesh(ジオメトリ,マテリアル)
const box = new THREE.Mesh(geometry, material);

//立方体の角度を変更
box.rotation.x = THREE.Math.DEG2RAD * 45;
box.rotation.y = THREE.Math.DEG2RAD * 45;

// 立方体をシーンに追加
scene.add(box);




ソースコードの説明は以上です。
まとめると、「three.js」での3D表現の基本は以下のような仕組みとなっていることがわかったと思います。

①レンダラーを準備
②シーンを作成
③カメラを準備
④ライトと3D物体を用意



勿論、まだまだここから3D表現は広がっていきます。
この先については私も学んでいる最中なので、さらに派生した驚きの表現については身に付いた後にご紹介できればと思います!

    営業マンゼロだから低コスト・高パフォーマンス!東京・長野(長野市、松本市)・金沢(石川県金沢市)でホームページ制作・WEB制作・ネットショップ制作を中心に、ブランディングに繋がるロゴ制作・チラシ・名刺・パンフレット・DM・ショップカード等の各種印刷物、看板・のぼりなどの販促物を制作しているデザイン事務所アプリコットデザイン。

    [長野オフィス-本社-]
    〒381-2246
    長野県長野市丹波島1-805

    [東京ブランチ]
    〒100-0004
    東京都千代田区大手町 2-6-1 朝日生命大手町ビル2F

    [松本ブランチ]
    〒390-0851
    長野県松本市大字島内4619-3 QuintetDoor 1階南室

    [金沢ベース]
    〒920-0831
    石川県金沢市東山1丁目10-1 103

    記事が気に入ったら「いいね」してね。(SNSとは連動してません)

    5+

    この記事を書いた人Who wrote this blog

    Sasayama Sayaka

    向上心ハンパない、ワクワク系WEBエンジニア。写真を撮るのは苦手笑

    無料見積

    まずは無料でお見積もりを作成いたします。
    お気軽にお問い合わせください。

    無料見積もり

    お問合せ先

    クリックで
    事務所一覧が
    開きます

    tel.0120-622835

    営業時間/9:00〜18:00 
    定休日/土日祝日

    Copyright © 2020 APRICOT DESIGN All Rights Reserved.