JavaScript

JavaScript製ライブラリ『Three.js』の一番わかりやすい使い方【WebGLを知らなくても理解できます】

JavaScript製ライブラリ『Three.js』の一番わかりやすい使い方

フロントエンド開発をしていてcanvasでリッチな描画を作る勉強をしていると、『Three.js』という言葉にたどり着くことが多いのではないでしょうか?

『Three.js』はWeGLという主に3D描画などに使われる技術を、素人でも分かりやすく使えるようにラッピングしたJavaScript製のライブラリです。

一見3D描画と聞いて、『難しいのでは?』、『自分には無理かも』と思ってしまいがちですが、そんなことはありません。

『Three.js』の書き方は難しい機能などは抽象化して記述することができるので、WebGLを全く知らない状態でも直ぐにコツを掴んでコードを書くことができます。

今回は、そんな『Three.js』を趣味で勉強してみたい方や、これから仕事で使うかもしれないとういう方に向けて、最大限に分かりやすく解説していきたいと思います。

 

 

Three.jsとは何か

Three.jsとは何か

『Three.js』はWebGLと呼ばれるコンピューターグラフィックで使われる難しい技術を、簡単かつ直感的に使えるようにするために作られたJavascriptのライブラリです。

『Three.js』を使えば、難しい数学や3Dの技術をあまり理解していない状態でも、ブラウザで直ぐにコンピューターグラフィックの作成に取りかかることができます。

『Three.js』はその使いやすさから、WebGL界のJQuery的な存在として位置ずけられおり、3Dでcanvasを扱う場合はよく色々なサイトで利用されています。

 

Three.jsで作られたすごいサイト5選

Three.jsで作られたすごいサイト

まずは『Three.js』を使えば、どんなサイトが作れるようになるのか気になるかと思います。

ここでは、『Three.js』で作られた派手なサイトだけではなく、細かいディテールまで作り込まれた繊細なサイトも紹介していきます。

今回紹介するWebサイトはコンテンツとトップページで『Three.js』が使われているものを5個紹介します。

サイトのコンテンツとコンピューターグラフィックをマッチさせることで、どういう表現ができるのかを見ていただければ収穫があると思います。

また、『Three.js』などのWebGLで作成されたコンテンツの情報を頻繁にチェックしたいという方はWebGL 総本山というサイトが情報を発信していますので要チェックです!

 

TAO TAJIMA | Filmmaker

  • TAO TAJIMA | Filmmaker
  • TAO TAJIMA | Filmmaker

Webサイトはこちら

 

KAWANO | セレクトショップ

  • KAWANO | セレクトショップ
  • KAWANO | セレクトショップ

Webサイトはこちら

 

ARCHI SITE MOBIUS

  • ARCHI SITE MOBIUS
  • ARCHI SITE MOBIUS

Webサイトはこちら

 

Yoichi Kobayashi

  • Yoichi Kobayashi
  • Yoichi Kobayashi

Webサイトはこちら

 

名古屋エステイト社 | 不動産の総合コンサルタント

  • 名古屋エステイト社 | 不動産の総合コンサルタント
  • 名古屋エステイト社 | 不動産の総合コンサルタント

Webサイトはこちら

 

Three.js実装が得意な日本のオススメWeb制作会社

 

Three.jsのダウンロード方法と実行方法

Three.jsのダウンロード方法と実行方法

まず『Three.js』をダウンロードするには、こちらのURLにアクセスして『Clone or download』というボタンの中の『Download ZIP』というボタンを押して自分の環境にファイルをダウンロードしましょう。

ダウンロードとファイルの解凍が完了したら、『three.js-master』というフォルダが生成されるので、その中にある『build』というフォルダの中に『three.min.js』というファイルがあるので、そのファイルだけ抜き出しましょう。

 

完成イメージ / ファイル構成

完成イメージ / ファイル構成

ファイルを抜き出したら、『html』というフォルダを作成して、その中で作業するようにしましょう。

用意するファイルは『index.html』『style.css』『main.js』『three.min.js』の4つのファイルを準備しておきましょう。ファイルを用意して『index.html』を実行すると上の完成形の状態になります。

 

 

 

 

レンダラーとシーンの作成

レンダラーとシーンの作成

まずはレンダラーとシーンを作成しましょう。

レンダラーとは空間に映し出したい映像を最終的に描画してくれるプログラムのことです。

シーンは3次元の空間を表しており、例えば物体を登場させる舞台のような役割を持ちます。

 

 

光源の作成

光源の作成

次は物体を照らすための光源を作成する必要があります。

『three.js』の世界でも、現実世界と同様に光という概念が存在し、物体に光を照射した反射光で物の存在を認識することができます。

今回は、太陽光のような満遍なく照らす光を手前上部の右側から照射しています。

 

 

カメラの作成

カメラの作成

次に物体を映し出すためのカメラを作り出す必要があります。

カメラを作り出すことによって、レンズに入ってきた光を映像として認識できることができます。

今回は、パースペクティブカメラという奥行きをつけることができるカメラを使用して、手前に配置した状態で物体を映し出します。

 

 

物体の作成

物体の作成

次に、この世界の役者であるメインの物体を作成していきます。

今回作成する物体はドーナツ型の形状のトーラスというオブジェクトを作成します。

トーラスを作成する場合は『new THREE.TorusGeometry(半径, チューブの太さ, 放射の滑らかさ, 管の滑らかさ);』と記述します。

 

 

物体の質感を設定 / シーンに登録

物体の質感を設定

次に作成したオブジェクトの質感を設定します。

今回設定する質感はアニメ風の質感で、トゥーンマテリアルという影が少し強調されたような表示結果を得られます。

 

 

画像を描画

画像を描画

いよいよ、画面に映像を映し出す段階に入ります。

先ほど作成したレンダラーを利用して画面にオブジェクトを映し出すレンダリングとい処理をします。

レンダリングをする際は、シーンとカメラが格納された変数を『render』関数の引数にセットします。

 

 

アニメーションさせる

アニメーションさせる

最後は、レンダリングを毎秒60回行う処理を書いて、オブジェクトを回転させるアニメーションをほどこします。

一枚の静的なレンダリングを行う際はレンダリングは一回で良いのですが、ブラウザで実行する際は継続して画面を描画しなければなりません。

下の例のように『animation』関数を実行して、『requestAnimationFrame(animate);』で毎秒60フレーム描画するようになっています。

そして、その中でトーラスを右回転(rotation.y)する処理を実行しています。

そうすることによって、回転する画像が新しいフレームに切り替わるたびに描画されます。

 

 

 

まとめ

今回は、WebGLを全く知らない方でも『Three.js』を書けるようになる方法について解説してきましたが、いかがでしたでしょうか?

『Three.js』は物体を表示するためだけのコードでも数十行のコードになってしまいますが、どのような手順を踏んで描画までに至っているのかということを、現実世界の概念に置き換えて考えることができるのでコツさえ掴めば誰でも簡単に作ることができるということを理解していただけたかと思います。

『美しい描画をしているサイトなどで見かけるあの表現はどうやって作られているんだろう?』と思ったときはブラウザのコンソールを開くと、大体が『Three.js』で作成されたサイトだったりします。

3Dを利用した演出は今後もWeb業界で拡大して行くことが見込まれるので、フロントエンドエンジニアとして技術力を磨きたい方や、コンピューターグラフィックに興味のある方にとっては『Three.js』は良い教材になってくれることでしょう。

ココナラで初めてのサイト制作案件を獲得!!【実績ゼロでもできます】

ココナラで初めてのサイト制作案件を獲得【実績ゼロでもできます】

フリーランスになりたいと思って、今までいろんなエージェントやクラウドソーシングに登録したけど実績が無いから、全く案件が獲得できずに困った経験はありませんか?

ココナラを利用すれば、実績ゼロからでもサイト制作案件を獲得することができます。

技術を身に付けたいと思っていても発揮する場所が無かったり、実績作りに困っている方にオススメです。

現在は稼働していませんが、駆け出しの頃は、よくお世話になったサービスです。

ココナラ 売り上げ

  • この記事を書いた人

岡田元輝

大阪に住んでるWEBエンジニア。
高卒でアルバイトを転々とする生活の中、一念発起し独学でプログラミングを習得。
底辺脱出後はWEB制作(フロントエンド / バックエンドの実装)の仕事をして、休みの日は講師業やウェブサービスの運営とブログアフィリエイトで稼ぐ生活をしています。
WEBに関するお困りごとがありましたら、お気軽にお問い合わせください。

-JavaScript

Copyright© WordPressサイトで稼ぐ技術 , 2020 All Rights Reserved Powered by AFFINGER5.