Sayakaコーダーのさやさんです。『three.js』のお話をしようと思います。「Three.js」について学ぶ『three.js』は手軽に3Dコンテンツ制作のできるJavaScriptライブラリです。「こんな表現を作ることができる」ということを紹介しました。今回は少しソースコードの内容を説明したいと思います。今回用意したサンプルはこちらです。CodePen.前回作成したサンプルからコードをもう少し見やすくし、アニメーションしていた部分を静止させました。『three.js』でどのように立体物を表現しているかをお伝えできればと思います。サンプルの「JS」部分のコードは以下です。init(){~から始まる部分以下が、3D描写の主となる部分です。ここから順番にソースコードを説明していこうと思います。1レンダラー準備レンダラーとは作成する3D物体を描写するためのものです。テレビの画面とか、モニター的なものと説明すればわかりやすいかなと思います。レンダラーを用意しなくては3D物体を画面に表示できません。以下の部分でまずレンダラーの準備(Canvas要素を描写エリアとして指定、サイズを指定)を行っています。height);2シーンを作成する次にシーンを作成します。シーンとは3D空間のことで、3Dオブジェクトや光源などの置き場です。レンダラーがテレビやモニターだとしたら、シーンは撮影対象の舞台と表現すれば伝わるでしょうか。1でレンダラというモニターを準備したら、2ではシーンという撮影用の舞台を用意しています。舞台を撮影するカメラを用意します。後述する「マテリアル」によっては3D物体を照らすライトが必要となるので、ライトの用意もします。シーンに追加ライト(光源)は、シーンに追加するのを忘れないようにしましょう。シーンに追加しないと、以下のように物体は光に照らされずに黒いままとなります。CodePen.43D物体を作る3D物体は「ジオメトリ」と「マテリアル」によって表現されます。「ジオメトリ」とは物体の形のことで、四角形や球体などを指定することで形が決定します。色を指定したりテクスチャ(画像)を貼ることで見た目を決定できます。今回「ジオメトリ」は立方体(BoxGeometry)を、「マテリアル」には色(カラーコード0x6699FF)を指定しています。ライトの表現をわかりやすくするために立方体に角度をつけています。3D物体ははライトと同じくシーンに追加する必要があります。シーンに追加しないと表示されないので注意しましょう。立方体をシーンに追加scene.add(box);ソースコードの説明は以上です。まとめると、「three.js」での3D表現の基本は以下のような仕組みとなっていることがわかったと思います。ここから3D表現は広がっていきます。のぼりなどの販促物を制作しているデザイン事務所アプリコットデザイン。103長野県お友だちの輪。記事が気に入ったら「いいね」してね。Sayaka向上心ハンパない、ワクワク系WEBエンジニア。MISAKIRANKING2020.02.1739歳になりました、たぶん。bao-リエバオ-)...2020.02.18自分の字をフォントにしてみました。POST2020.02.20図書委員になります。チャンスの神様2020.02.18自分の字をフォントにしてみました。2020.02.182020年初登り、冬の八ヶ岳へ【アイスクライミング編】2020.02.1739歳になりました、たぶん。その2無料見積まずは無料でお見積もりを作成いたします。お気軽にお問い合わせください。BLOGスタッフブログ2020.02.20図書委員になります。今日からアプリコットデザインの図書委員になることにしました。写真部で図書委員のしづくまです。今年の目標は100冊読書。「人事異動」なるものを発令してみました。BREAK2020.02.18自分の字をフォントにしてみました。チャレンジすることが好きなさやさんです。ホームページでのコンテンツ発信。上質なコンテンツの発信が欠かせません。拠点に日本全国対応です。最寄りの事務所までお気軽にお問い合わせください。