インターネット(Web)で3D表現をする方法として、

おそらく一番人気と思われる『Three.js(スリージェイエス』。

大人気ライブラリだけあって、

機能てんこ盛り、専門用語もりもりだったりするので、

『初めてのThree.js 第2版 WebGLのためのJavaScript 3Dライブラリ』の内容をベースに、

少しずつ用語や関数をまとめていくことにしました。

Three.js用語や関数 頂点関連

• アトリビュート(attribute)・・頂点ごとの情報
• インデックス(index)・・どの頂点を使ってポリゴン(三角形)を作成するか

Three.js用語や関数 準備

FPSを測るモニター。
パフォーマンスモニター

変数の操作など
dat.GUI

Three.js用語や関数 シーン

• THREE.Scene.add() ・・オブジェクトをシーンに追加
• THREE.Scene.remove() ・・オブジェクトをシーンから削除
• THREE.Scene.children() ・・シーンないすべての子要素のリスト取得
• THREE.Scene.getObjectByName() ・・名前を指定しシーンから特定オブジェクトを取得

Three.js用語や関数 カメラ

• 平行投影 ・・Orthographic ・・パースのないカメラ(シムシティ4みたいな)
• 透視投影・・Perspective

• THREE.TrackBallControls ・・最も使う。マウスを使って移動・パン・ズームできる

• THREE.FirstPersonControls ・・一人称視点。
• THREE.FlyControls ・・フライトシュミレーターのような。
• THREE.OrbitControls ・・軌道上を動く。

Three.js用語や関数 ライト

• THREE.AmbientLight・・環境光。全体を照らす
• THREE.PointLight・・一点から全方向に向かって光を発する
• THREE.SpotLight ・・懐中電灯みたいな
• THREE.DirectionalLight ・・遠くから届くライト 太陽みたいな
• THREE.HemisphereLight ・・ 野外にいるような光
• THREE.LensFlare ・・レンズフレア

Three.js用語や関数 マテリアル

• THREE.MeshBasicMaterial ・・単純なマテリアル
• THREE.MeshDepthMaterial ・・ オブジェクトからカメラの距離だけで表現が決まる
• THREE.MeshNormalMaterial ・・法線がさす方向が面の色の決定に使用される
• THREE.MultiMaterial ・・他のマテリアル用のコンテナみたいな

ラインで使えるマテリアル

• THREE.LineBasicMaterial ・・ライン向けマテリアル
• THREE.LineDashedMaterial ・・ベーシック+点線がつくれる

高度なマテリアル

• THREE.MeshPhongMaterial ・・光沢のあるマテリアル
• THREE.MeshLambertMaterial ・・光源に反応する
• THREE.MeshStandardMaterial ・・簡易的なPBR(物理ベースレンダリング)マテリアル

シェーダー用マテリアル

『シェーダー(GLSL)』を使う場合はこれらを使う。

• THREE.ShaderMaterial ・・独自シェーダー用（Three.js補正あり)
• THREE.RawShaderMaterial・・生シェーダー用 (補正なし)

あらかじめ宣言されているシェーダー向け変数

• modelMatrix ・・mat4 オブジェクト座標からワールド座標へ変換する行列
• viewMatrix ・・mat4 ワールド座標から視点座標へ変換
• modelViewMatrix ・・mat4 modelMarix x viewMatrixの計算
• projectionMatrix ・・mat4 クリップ座標系に変換する行列
• cameraPosition ・・vec3 カメラの座標

Three.js用語や関数 ジオメトリ

基本はマニュアル見る

• THREE.ConvexGeometry ・・一群の座標を含む凸包を作成できる
• THREE.LatheGeometry ・・なめらかな曲線を元に3次元形状を作成できる
• THREE.TubeGeometry ・・3次元のスプライン曲線にそってチューブを作成
• THREE.ExtrudeGeomety ・・2次元形状から3次元オブジェクト作成
• THREE.ParametricGeometry ・・方程式に基づいて作成

• THREE.BufferGeometry ・・WebGLのAPIを意識して作成できる。シェーダーと組み合わせるならこれを使う。

• THREE.InstancedBufferGeometry ・・シェーダーでパーティクル使うならこのジオメトリを使う

ジオメトリの結合

Three.jsの拡張機能 ThreeBSP

• intersect ・・2つのジオメトリ交差部分を元に作成
• union ・・2つのジオメトリをそのまま合成
• subtract ・・ 2つのジオメトリから重なった部分を除いて作成

Three.js用語や関数 パーティクル、スプライト、ポイントクラウド

• THREE.Points ・・引数でジオメトリ。頂点を元にパーティクル描画
• THREE.PointsMaterial

高度のメッシュとジオメトリ

• THREE.Geometry.merge ・・ジオメトリのグループ化

外部ソースからのジオメトリ読み込み

• JSON

Blenderからインポートするには
Blender側に『Three.jsエクスポーター』を追加

Three.js用語や関数 アニメーションとカメラの移動

• requestAnimationFrame ・・HTML5標準 アニメーション用
• Tween.js ・・ある値から別の値へのプロパティ変化を簡単に計算できる

Tween.js

Three.js用語や関数 テクスチャ

• THREE.Texture ・・

• バンプマップ

• ライトマップ
• 環境マップ
• スペキュラマップ
• 独自UVマップ

Three.js用語や関数 カスタムシェーダーとポストプロセス

• THREE.EffectComose ・・ポストプロセッシング用

• THREE.BloomPass ・・光が暗い部分に漏れ出るような

• THREE.DotScreenPass ・・黒いドットの重なりで表現
• THREE.FilmPass ・・テレビの画面をシミュレート
• THREE.GlitchPass ・・ランダムに電子的なグリッチを表示
• THREE.MaskPass ・・マスク適用
• THREE.RenderPass ・・シーンとカメラに基づいて
• THREE.SavePass ・・現在描画をコピーして後から使える

• THREE.TexturePass ・・コンポーザーの状態保存。他Effectの入力として使える

• THREE.ShaderPass ・・独自シェーダー

基本シェーダー

• THREE.MirrorShader ・・ミラーエフェクト
• THREE.HueSaturationShader ・・色相と彩度を変更
• THREE.VignetteShader ・・画像中心を囲むような暗い境界
• THREE.ColorCorrectionShader ・・色の分布を変更
• THREE.RGBShiftShader ・・色をRGBに分解
• THREE.BrightnessContrastShader ・・明度とコントラスト
• THREE.ColorifyShader ・・色のついたオーバーレイ
• THREE.SepiaShader ・・セピア
• THREE.KaleidoShader ・・万華鏡
• THREE.LuminosityShader ・・明度が見えるように
• THREE.TechnicolorShader ・・古い映画のような

ブラー関連シェーダー

• THREE.HorizontalBlurShader ・・ブラー
• THREE.VerticalBlurShader ・・ ブラー
• THREE.HorizontalTiltShiftShader ・・一部だけ鮮明に ミニチュアのような
• THREE.VerticalTiltShiftShader ・・一部だけ鮮明に ミニチュアのような
• THREE.TriangleBlueShader ・・三角フィルタ

高度なエフェクト用シェーダー

• THREE.BleachBypassShader ・・銀残しのようなオーバーレイ
• THREE.EdgeShader ・・ 画像のエッジ検出してその部分をハイライト
• THREE.FXAAShader ・・ アンチエイリアスエフェクト
• THREE.FocusShader ・・ 中央をシャープに描画

Three.js用語や関数 物理演算と立体音響

• ammo.js ・・物理エンジン (Physijsに同梱のものを使う
• Physijs ・・バックグランドスレッドで物理計算する ammo.jsを簡単にするラッパー

Physijs

• Physijs.PlaneMesh ・・厚さのない平面
• Physijs.BoxMesh ・・立方体
• Physijs.SphereMesh ・・球
• Physijs.CylinderMesh ・・円柱
• Physijs.ConeMesh ・・円錐
• Physijs.CapsuleMesh ・・シリンダーよりちょっと丸い
• Physijs.ConvexMesh ・・ 複雑なオブジェクト用
• Physijs.ConcaveMesh ・・ さらに複雑 (負荷も高い
• Physijs.HeightfieldMesh ・・ THREE.PlaneGeometryからハイトフィールド作成

• THREE.PositionalAudio

• THREE.AudioListener

初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

created by Rinker

¥4,400 (2024/04/25 13:18:54時点 Amazon調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

『Three.js』関係ではこんな記事も読まれています。

アオキ

ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m