Three.jsとは？
threeとは3Dの3を英語にしたものです。WebGLの技術を使ってWebブラウザ上で3D表現をすることが可能です。
リリースノート
| バージョン | リリース年月 | 備考 |
|---|---|---|
| 83 | 2016/12 | WebGL2対応が始まった。 |
| 100 | 2019/1 | WebGL2の一部の機能のみサポートしている。 |
| 134 | 2021/10 | |
| 137 | 2022/1 | |
| 140 | 2022/5 | |
WebGLとの違いは？
通常のWebGLだと例えば立方体一つ表現するだけでも多くのJavaScriptコードや、GLSLコードを書く必要があり専門知識が必要になります。Three.jsを使うことによってJavaScriptの知識だけでWebGLの実装をすることが可能になります。
Three.jsは何ができるのか？
マウスのドラッグ&ドロップで色々3Dを動かすことが可能です。
具体例
Zenly
クルクル地球を回せます。
マインクラフト
これも使われています。
基礎
シーン(Scene)
表現するために必要な場所のことです。要はブラウザのことです。
シーンを追加する
|
1 |
const scene = new THREE.Scene(); |
カメラ(Camera)
シーンをカメラで撮ったり写すことです。
PerspectiveCamera(視野角、アスペクト比、開始距離、終了距離）
大体はこれが使われる。
視野角
カメラのどこからどこまでを写すのか。
アスペクト比
画面の横幅と縦幅の比率のこと。
開始距離、終了距離
カメラが実際に写す距離
|
1 2 3 4 5 6 |
const camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 1000 ); |
レンダラー(Renderer)
カメラで撮影したものをブラウザに写せるように変換してくれるもの。ブラウザに写すための変換器。
WebGL Renderer
three.jsで一般的に使われるレンダラー。
|
1 2 3 |
// レンダラーを追加 const renderer = new THREE.WebGL1Renderer(); document.body.appendChild(renderer.domElement); |
ジオメトリー
形状の骨格を表す。
- 球体
- 立方体
- ドーナツ型の3Dオブジェクト
調べ方
ジオメトリーにはたくさんの種類があります。
three.jsの公式サイトで「geometry」と検索すればいろんなgeometryが出てきます。
種類
BoxGeometry
直方体
実装
|
1 |
const geometry = new THREE.SphereGeometry(球体の半径,ワイドセグメント（球体に近づけるか）,ハイトセグメント(球体に近づけるか)); |
マテリアル（質感）
色など。
MeshPhongMaterial
フォン・シェーディングと言う、光沢感のある質感を表現できるマテリアル
MeshPhysicalMaterial
金属感を表現できる。
MeshBasicMaterial
影がつかず均一な質感になる。
テクスチャー
質感に画像を追加したい場合は以下のように実装することで対応が可能です。
|
1 2 3 4 |
// テクスチャーを追加 const texture = new THREE.TextureLoader().load("./textures/earth.jpg"); // マテリアルを作成 const material = new THREE.MeshPhysicalMaterial({map:texture}); |
MeshPhysicalMaterial
|
1 |
const material = new THREE.MeshPhysicalMaterial({color: "#000"}); |
メッシュ化
ジオメトリー（骨格）とマテリアル（色）を組み合わせたもの。
|
1 2 3 4 |
// メッシュの作成 const mesh = new THREE.Mesh(geometry,material); // シーンにメッシュを追加 scene.add(mesh); |
平行光源を追加
上のサンプルだと球体が暗いままになってしまっています。なので、以下の処理を追加することで光を当てます。
|
1 2 3 4 |
// 平行光源を追加 const directionalLight = new THREE.DirectionalLight(0xffffff,2); // シーンに平行光源を追加 scene.add(directionalLight); |
ポイント光源を追加
|
1 2 3 4 5 |
// ポイント光源を追加 const pointLight = new THREE.PointLight(0xffffff,1); pointLight.position.set(200,200,200); // シーンにポイント光源を追加 scene.add(pointLight); |
ポイント光源の場所
|
1 2 3 |
// ポイント光源がどこにあるか const pointLightHelper = new THREE.PointLightHelper(pointLight,100); scene.add(pointLightHelper); |
マウス操作ができるようにする。(カメラコントローラー)
マウスで球体を回転、ホイール操作で遠近操作ができる。
コントローラの作成
|
1 2 |
// カメラコントローラーを作成 const controls = new THREE.OrbitControls(camera, canvasElement); |
コントローラの制御
デフォルトだと機械的な動きですが、これらのプロパティを設定することで滑らかに動くようになります。
|
1 2 3 |
// 滑らかにカメラコントローラーを制御する controls.enableDamping = true; controls.dampingFactor = 0.2; |
OrbitControls
Three.jsのライブラリ本体には含まれていないので、Three.jsとは別途読み込む必要があります。
座標軸
X軸
赤い線、横
Y軸
緑の線、縦
Z軸
青い線、奥行き
この記事へのコメントはありません。