Three.jsの超基本2 #JavaScript

前回の記事に引き続き、学習した内容のド忘れ防止のためにThree.jsの基本的な使い方をまとめます。

Group(グループ)

複数のMesh(物体)を、まとめて管理できる。
Group化すると、複数の物体を同時に動かすことができる。


(function() {
  var scene;
  var head;
  var body;
  var group;

  // ステージを追加
  scene = new THREE.Scene();

  // 物体を作成
  head = new THREE.Mesh(
      new THREE.BoxGeometry(20, 20, 20),
      new THREE.MeshLambertMaterial({ color: 0xff0000 })
  );
  head.position.set(0, 40, 0);

  body = new THREE.Mesh(
    new THREE.BoxGeometry(40, 60, 40),
    new THREE.MeshLambertMaterial({ color: 0xff0000 })
  );
  body.position.set(0, 0, 0);

  // グループを作成し、headとbodyを追加
  group = new THREE.Group();
  group.add(head);
  group.add(body);

  // ステージにグループを追加
  scene.add(grooup)
})();

OrbitControls(カメラを制御)

カメラを自動で動かしたり、マウス操作でカメラを動かすことができます。

マウス操作でカメラを動かす


(function() {
  var stage = document.getElementById('stage');
  var controls;

  // カメラコントローラを作成(カメラ, DomElement)
  controls = new THREE.OrbitControls(camera, stage);
})();

自動でカメラを動かす


(function() {
  var stage = document.getElementById('stage');
  var controls;

  controls = new THREE.OrbitControls(camera, stage);
  // カメラの自動回転
  controls.autoRotate = true;
  // 回転スピードの調整
  controls.autoRotateSpeed = 8.0;

  function render() {
    // 60fpsの間隔で繰り返し処理を実行(描画する)
    requestAnimationFrame(render);
    // カメラを再描画
    controls.update();
    // 描画する
    renderer.render(scene, camera);
  }

  render();
})();

Shadow(影をつける)

光源に対して物体の影を、別の物体に落とすことができる。


(function() {
  // 影を有効化
  renderer.shadowMap.enabled = true;
  // ライトの影表示を有効化
  light.castShadow = true;
  // 物体の影を有効化
  box.castShadow = true;
  // 影を受ける設定を有効化
  plane.receiveShadow = true;
  // カメラの領域設定
  light.shadow.camera.position.set(0, 100, 0);
  light.shadow.camera.left   = -200;
  light.shadow.camera.right  =  200;
  light.shadow.camera.top    =  200;
  light.shadow.camera.bottom = -200;
})();

カメラヘルパーで領域を可視化する


var shadowHelper = new THREE.CameraHelper(light.shadow.camera);
scene.add(shadowHelper);

Texture(テクスチャを物体に貼り付ける)

作成した物体に、画像を貼り付けることができる。
※サーバーを立てずに行うと、クロスドメイン系のエラーが発生する場合がある。


(function() {
  var loader = new THREE.TextureLoader();

  // 先にテクスチャを読み込んでから物体を生成する
  loader.load('img/logo.png', function(texture) {
    createBox(texture);
    render();
  });

  function createBox(texture) {
    box = new THREE.Mesh(
    new THREE.BoxGeometry(40, 40, 40),
    // テクスチャを貼り付ける際は「map」を使う
    new THREE.MeshBasicMaterial({ map: texture })
    );
    box.position.set(0, 0, 0);
    scene.add(box);
  }
})();

Font(3Dテキストを描画する)

指定したフォントで、3Dテキストを描画することができる。


(function() {
  var loader = new THREE.TextureLoader();

  // フォントファイルを読み込んだ後に物体を生成する
  loader.load('js/helvetiker_regular.typeface.json', function(font) {
    createText(font);
    render();
  });

  function createText(font) {
    text = new THREE.Mesh(
    new THREE.TextGeometry('SampleText!!', {
      // フォントを指定
      font: font,
      // フォントサイズを指定
      size: 24,
      // フォントの厚みを指定
      height: 4
    }),
    // 「side: THREE.DoubleSide」で両面を描画する
    new THREE.MeshBasicMaterial({ color: 0xf39800, side: THREE.DoubleSide })
    );
    text.position.set(-100, 0, 0);
    scene.add(text);
  }
})();