CG関連

【Three.js】用語や関数のまとめ【3Dプログラム】※随時更新

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

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

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

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

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

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

Sponsored link

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 ・・レンズフレア
Sponsored link

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つのジオメトリから重なった部分を除いて作成
Sponsored link

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 ・・ 中央をシャープに描画
Sponsored link

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

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

1. 3Dプログラムの基本を【Three.js】でまとめてみた【初心者向け】

2. 【Three.js】で『GLSL(シェーダー)』を使う環境構築の仕方 【初心者向け】

3. 【WebGL】入門 わかりやすく【図解】してみた

4. 【Three.js】用語や関数のまとめ【3Dプログラム】※随時更新

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

アオキのツイッターアカウント。


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. 2024.11.12

    noteに記事執筆することにしました

    生成AIの発展につれ、色々と思うところがあり、2024年11月より本格…

  2. 2024.09.7

    DifyのAPIアクセスの使い方を整理してみた

    Difyのアプリ作成後、APIアクセスのページを見ると全て英語表記になっていて…

  3. 2024.09.6

    RAG2.0の記事を翻訳してみる

    先日Difyのロードマップが発表されました。https://roadm…

  4. 2024.09.5

    RAGの手法を比較してみる

    生成AIを使って社内文書などの外部情報を参照する技術はRAGと呼ばれます。…

  5. 2024.09.2

    Dify講座をリリースしました【非エンジニア向け】…

    オンライン向け学習プラットフォーム Udemyにて、Difyの講座をリリースし…

アーカイブ

ChatGPT法人研修はこちら
お問い合わせはこちら

  1. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…

  2. 生成AI

    Dify講座をリリースしました【非エンジニア向け】

  3. オンライン教材

    【ChatGPT】エンジニア編をリリースしました

  4. オンライン教材

    ChatGPTをビジネス活用する講座をリリースしました【Udemy】

  5. データベース

    MySQLの講座をリリースしました
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました！！

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock