CG関連

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

3Dプログラミングは難しい・・・

なんたって数学多いし用語たっぷりだし・・・

そんな風に考えていたこともあったけれど。

プログラミングでかっこいい映像をつくりたいと始めた『TouchDesigner(タッチデザイナー)』のおかげで、
いつのまにやら、『3Dプログラミング』の苦手意識がなくなってきた感があって。

参考記事

今回は、
ホームページなどの『ウェブ』で3D表現するなら1番人気と思われる『Three.js(スリージェイエス)』と、

少しだけ『TouchDesigner』の画像も交えて、『3Dプログラミングの基本』をまとめてみることにしました。

Sponsored link

3Dプログラミングの基本イメージと用語

『3Dプログラミング』の基本イメージは撮影現場。

  • 舞台があって、
  • 大道具小道具があって、
  • 役者がいて、
  • カメラがあって、
  • 照明があって。

『Three.js』の場合はそれぞれこんな用語にあたります。

  • シーン(Scene)・・舞台
  • モデル(Model)・・大道具小道具役者
  • カメラ(Camera)・・カメラ
  • ライト(Light)・・照明

撮影現場と同じく、

カメラの向く方向で映像は変わるし、
ライトのあてる方向を変えれば明るさも変わると。

アオキ
3Dプログラマーはさながら舞台監督的な役割でしょうか。

3Dプログラミングの基本 XYZ座標

撮影現場をコンピューター上で再現しようと思ったら、

  • どの位置に役者を置いて、どの方向に動かすか。
  • どの位置にカメラを置いて、どれくらいズームインして撮影するか。
  • どの位置からライトをあてるか。

というような指示を、コンピュータがわかるように伝える必要があります。

そのために必要なのが『座標系(ざひょうけい)』

  • 横方向・・X軸
  • 縦方向・・Y軸
  • 奥行き・・Z軸

『XYZ』3つの座標で、役者の位置やカメラの位置や移動距離を決めます。

  • 舞台にも、
  • 役者にも、
  • カメラにも、
  • ライトにも、
アオキ
XYZの位置情報があるので、場所が決まるということになります。
Sponsored link

3Dプログラミングの基本 モデルの構成

舞台上の役者、
『Three.js』でいうところの『モデル』は、
いつかの要素が含まれています。

  • 頂点(Vertex)・・点の数。三角形なら3つ。四角形なら4つ。
  • ポリゴン(Polygon)・・3つの頂点からなる三角形
  • メッシュ(Mesh)・・ポリゴンの集まり

小さな三角形『ポリゴン』を大量に組み合わることで、
いろんな物体をつくりだすことができます。

アオキ
また、『メッシュ』はさらに2つにわかれます。

  • 『ジオメトリ(Geometory)』(形状)
  • 『マテリアル(Material)』(素材)

『ジオメトリ』は形を表して、
丸だったり四角だったり、それこそ人の形だったりいろいろあります。

アオキ
『ジオメトリ』を包み込むのが『マテリアル』になります。

なんの特徴もない白いボールがあったとして、

  • 野球ボールっぽいマテリアルをあてれば野球ボールに、
  • バスケットボール風のマテリアルならバスケットボールに、
  • テニスボール風ならテニスボール
  • ボーリングならボーリング

と見た目を変えるのが『マテリアル』です。

素材そのものの形と、
表面の質感を分けて考えるのが、
『3Dプログラミング』の特徴かなと思います。

3Dプログラミングの基本 画面に表示されるまで

3Dプログラミングを画面に描画するには、これらの要素が必要になります。

  • シーン(Scene)
  • カメラ(Camera)
  • ライト(Light)
  • モデル(メッシュ(Mesh)=ジオメトリ(Geometory)+マテリアル(Material))
  • レンダー(Renderer)

レンダーは、3D空間を画面上(2D)で描画する処理になります。

ノードベースの『TouchDesinger』の場合、こんな組み合わせになります。

アオキ
『TouchDesigner』めっちゃ見やすい・・

『Three.js』の場合は全部コード(JavaScript)で書く必要があります。

コードはこちら。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/106/three.min.js"></script>
  <script>
    // ページの読み込みを待つ
    window.addEventListener('load', init);

    function init() {

      // サイズを指定
      const width = 960;
      const height = 540;

      // レンダラーを作成
      const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#myCanvas')
      });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(width, height);

      // シーンを作成
      const scene = new THREE.Scene();

      // カメラを作成
      const camera = new THREE.PerspectiveCamera(45, width / height);
      camera.position.set(0, 0, +1000);

      // 箱を作成
      const geometry = new THREE.BoxGeometry(400, 400, 400);
      const material = new THREE.MeshNormalMaterial();
      const box = new THREE.Mesh(geometry, material);
      scene.add(box);

      tick();

      // 毎フレーム時に実行されるループイベントです
      function tick() {
        box.rotation.y += 0.01;
        renderer.render(scene, camera); // レンダリング

        requestAnimationFrame(tick);
      }
    }
  </script>
</head>
<body>
  <canvas id="myCanvas"></canvas>
</body>
</html>

こんな描画になります。

See the Pen
threejs-test
by aoki_monpro (@suica)
on CodePen.

スクリーン、レンダー、カメラ、メッシュを作成した後に、

毎フレームごとにレンダリングを繰り返す、という流れになっています。

アオキ
コードはこちらから拝借させていただきました。詳細は元ページを参照ください。

Three.js入門サイト

Sponsored link

3Dプログラミングの基本 数学物理はちょっとずつ覚えるべし

プログラミングでキャラクターや映像を滑らかに動かしたいなと思ったら、

全く知識がないよりは、
多少なりとも数学や物理の知識があった方がいいなと実感します。

まずは、

  • 三角関数
  • ベクトル
  • ラジアン

の3つから、徐々に広げていくといいのかなと思います。

アオキ
大丈夫です。僕も高校時代ろくに勉強してなかったので。←やっときゃよかった(汗

参考記事(できるだけわかりやすく書いております



3Dプログラミングの基本 まとめ

『TouchDesinger』で3D表現を少しずつ体験し、

3Dならではの専門用語に徐々に慣れてきたことで、

ようやく『Three.js』にも抵抗なく取り組めそうな気がしています。

『Three.js』はシェーダー言語『GLSL』とも連携ができるようで、

使いこなせるようになると、ウェブでの表現もグーンと増えそうな予感ですので、

引き続きちょっとずつ触っていきたいと思います。

アオキ
3Dでも動かせるようになるとかっこいいですよね〜

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

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

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

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

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

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

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


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

コメント

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

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

CAPTCHA


最近の記事

アーカイブ

  1. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  2. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
  3. 生成AI

    2024/5/14 OpenAI発表 まとめ
  4. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  5. オンライン教材

    ChatGPTをビジネス活用する講座をリリースしました【Udemy】
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

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

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

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

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

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock