【Three.js】テキストメッシュが常にカメラを向くようにする方法(ソースコード付き)

スポンサーリンク
Three.js

テキストメッシュが常にカメラを向くようにしたいけど

どうしたらいいの?

こういった疑問を解決いたします。

Three.jsでテキストメッシュを用いることはありますよね。

オブジェクトの名称を表示したり、行き先を表示したり。

オンラインゲームを作成しているのであれば、プレイヤー名を表示することもあるかと思います。

テキストメッシュは当然3D空間に存在しますので、角度によっては何が書いてあるのか全く分からないことがあります

そんなときに、どの角度から見ても常に真正面から見られるように、つまり、常にカメラを向くようにできれば便利ですよね。

当記事では、その方法をソースコード付きでお教えします。とても簡単です。

カメラの制御にはPointerLockControlsを使用しています。

デモも用意していますのでぜひ試してみてください。このページで試せます。

※ 1人称視点で、視点はXZ平面のみを移動します。Y軸方向の移動は考えておりません。

  • テキストメッシュが常にカメラを向くようにできる
スポンサーリンク

実装の流れ

実装の流れは以下の通りです。

  1. テキストメッシュ(☆)を作成する
  2. 毎フレーム、カメラを向くように処理をする(lookAtメソッド)

lookAtメソッドの詳細はこちら↓↓

three.js docs
スポンサーリンク

実際にテキストメッシュを制御!ソースコード・デモはこちら

以下がソースコードになります。

毎フレーム呼び出すanimate()に1行追加しているだけです。非常に簡単です。

<!DOCTYPE html>
<html>
  <head>
    <title>three.js Sample</title>
    <meta charset="utf-8">
    <script src="./three.js-master/build/three.min.js"></script><!--three.jsライブラリの読み込み-->
    <script src="./three.js-master/examples/js/controls/PointerLockControls.js"></script><!--PointerLockControls.jsの読み込み-->
  </head>
  <body>
    <script>
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);  //カメラを作成
      const controls = new THREE.PointerLockControls(camera);
      const renderer = new THREE.WebGLRenderer(); //レンダラーを作成
      const boxGeometry = new THREE.BoxGeometry(100, 100, 100); //boxの形状データ
      const boxMaterial = new THREE.MeshNormalMaterial(); //boxの材質(マテリアル)情報
      const box = new THREE.Mesh(boxGeometry, boxMaterial); //形状と材質から実際の3Dオブジェクトを生成
      const fontLoader = new THREE.FontLoader();
      let textMesh;
      init();
      animate();

      function init(){    //初期化用関数
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.BasicShadowMap;
        document.body.appendChild(renderer.domElement); //canvas要素をbodyタグに追加
        camera.position.set(0, 0, 800);
        let textMeshFont;
        fontLoader.load('./three.js-master/examples/fonts/helvetiker_regular.typeface.json', font => { //フォントの読み込み
          textMeshFont = font;
          textMesh = generateTextMesh(textMeshFont, 'box');
          box.add(textMesh);
          scene.add(box);
        });
        renderer.domElement.addEventListener('click', function() {
          controls.lock(); 
        });
      }

      function generateTextMesh(textFont, text){
        let textMesh = new THREE.Mesh(  //テキストメッシュを生成  ジオメトリとマテリアル設定
          new THREE.TextGeometry(text, {font: textFont, size: 20, height: 5}),
          new THREE.MeshBasicMaterial({color: 'white', side: THREE.DoubleSide})
        );
        textMesh.geometry.center();
        textMesh.position.set(0, 100, 0);
        return textMesh;
      }

      function animate(){
        renderer.render(scene, camera);
        requestAnimationFrame(animate); //毎フレーム呼び出すことで描画
        textMesh.lookAt(controls.getObject().position); //テキストメッシュを常にカメラを向かせる処理
      }
    </script>
  </body>
</html>

デモを見たい方はこちらをクリック(ページは遷移しません) ⇒

↑のデモでお試しください。

白い ‘box’ という文字が常にカメラを向いているのが分かるかと思います。

(端にいったときに若干見にくい感は否めませんが。。。)

どこで何をしているかはソースコード内のコメントを見ていただけたらと思います。

フォントjsonファイルの読み込みに関しては、ご自身のディレクトリの状況に応じて適宜変更をお願いいたします。

まとめ

いかがでしたでしょうか。

ぜひ参考にしていただければ幸いです。

以上です。

Three.jsを体系的に学びたい人へ

コメント

タイトルとURLをコピーしました