Scroll

「常に新しい技術に目を向けること」
「既存の技術をより深堀りすること」

カテゴリ:Javascript
タグ:
公開日:2021/02/19(金)
最終更新日:2021/03/01(月)

Three.jsはじめました!

Three.js を研究してみました。

この記事では、次の事を記載しています。

目次

  • 1. WebGL、Three.jsとは
  • 2. Three.jsの基本構成
  • 2.1. HMTLの雛形
  • 2.2. Three.jsライブラリ
  • 2.2.a. Scene
  • 2.2.b. Geometory
  • 2.2.c. Material
  • 2.2.d. Mesh
  • 2.2.e. Camera
  • 2.2.f. Light
  • 2.2.g. 3D Model
  • 2.2.h. Shader
  • 3.まとめ

作ったもの

1.WebGL、Three.jsとは

WebGLとは、ブラウザで3Dグラフィックを表示させるための標準仕様(API)で、非営利団体Khronos Groupで管理されています。
Three.jsは、WebGLを簡単に扱えるようしたJavaScriptライブラリです。Mr.doob氏が開発しオープンソースとしてGitHubに公開されています。
Three.jsは、3Dグラフィックで必要なカメラやライトを備えており、初心者でもJavaScriptが使える人であれば比較的容易にコンテンツが作成可能です。
では早速、Three.jsの基本的な使い方、構成要素を記述します。

以降ではコード例を記載していますが、必要部分のみの抜粋です。コピーしてそのまま動かせるわけでは無いですのでご注意ください。

2.Three.jsの基本構成

2.1. HMTLの雛形

Three.jsのJavaScriptライブラリを読み込みます。

次に続くscriptタグの中に、コンテンツを記述していきます。2.2以降の処理をコーディングします。

またThree.jsは(WebGLも)HTMLのcanvas要素にコンテンツを表示する仕様となっています。

divなどの他のHTML要素には表示されないため注意が必要です。

 

2.2. Three.jsライブラリ

前述の作ったもののページを作成するにあたって使用した、Three.jsのAPIを記載します。
Three.jsの全てのライブラリを網羅しているわけではありませんが、基本的な部分は記載しました。

2.2.a. Scene

名前の通りThree.jsのオブジェクトの、親となるオブジェクトです。

壁や床、カメラやライト全てのオブジェクトを、シーンに配置します。

2.2.b. Geometory

形、多角形や球体などの事です。Three.jsでは予め、複数のジオメトリが用意されています。

後述しますが、ジオメトリ単体では画面に何も表示されません。後述のメッシュオブジェクト生成時に、ジオメトリを指定します。

2.2.c. Material

色や質感、写真などのテクスチャなどの事です。Three.jsでは予め、複数のマテリアルが用意されています。

後述しますが、マテリアル単体では画面に何も表示されません。後述のメッシュオブジェクト生成時に、マテリアルを指定します。

2.2.d. Mesh

形を色を具体的な物体としてまとめる、親となるオブジェクトです。

前述のジオメトリ、マテリアルを指定して、メッシュを生成し、シーンに追加することで、物体がシーンに表示されます。

2.2.e. Camera

名前の通りカメラです。シーン及びシーンに配置された物体は、このカメラを通して表示されます。

Three.jsには大きく分けて2種類のカメラがあります。

画面の手前でも奥でもシーンの中の物体が全て同じ大きさで表示する 平行投影カメラと、奥行きを再現するカメラの透視投影カメラです。

今回は透視投影カメラを使いました。手前の物体は大きく、奥の物体は見えます。

2.2.f. Light

Three.jsには複数のライトがあります。今回は次のライトを使いました。

全体にまんべんなく光を当てる環境光源、特定の方向から平行にあたる並行光源、
特定の一点に光を当てるスポットライト光源です。

2.2.g. 3D model

Three.jsは外部のモデリングソフトで作成したモデルを読み込み、シーンに配置できます。

今回はBlenderで作成したモデルをシーンの中央に配置しました。

画面中央の椅子やディスプレイは、当社製品をモデリングしたものです。

 

2.2.h. Shader

個人的に最もエキサイティングなものがこれです。

シェーダとは、3Dグラフィックスで、画面上の頂点色やピクセル色などを操作するプログラムのことです。
シェーダはGLSLという言語で記載するのが一般的です。今回勉強してGLSLで記述しました。

 

 

3.まとめ

Three.jsを使った3DのWebページの基本的な作り方は理解できました。
一言でいうと、楽しい!につきます。
ただ、表示するコンテンツの質感については、別途ノウハウが必要なことがわかりました。
コンテンツに応じたカメラの位置や影の落とし方、インタラクティブ性など、業務システム開発とは異なる別次元の知識が必要です。
Webページ描画のパフォーマンスについても同様ですが、今回作成したWebページでは考慮できていません。
今後は自社のWebページに活かせるよう、より深く学ぼうと思います。

この記事を書いた人:みっきー

シェアのご協力をお願いいたします!

カテゴリー

アーカイブ