今日はクリスマス！まだ間に合う！急いでWEBクリスマスカードを作ってみた

この記事はくふうカンパニーアドベントカレンダー最終日の記事です 

クリスマスの準備はしていますか？私は年末のドタバタですっかり忘れていました！やばい！前日なのに用意しないということでで ThreeJS で「WEBクリスマスカード」を作ってみました！

はじめに

2D のクリスマスカード作ろうとしてるのにクリスマスっぽく ThreeJS で作成しています。用途によって異なりますが Pixijs などの 2D 用の WebGL  ライブラリを使用したほうが絶対楽です！
極力画像を利用しない方向で作成しましたが絶対画像利用した方が楽です！

お願い♪♪
本記事のコードやその他の点において、非合理的な点や、お見苦しい箇所があるかもしれません。あるでしょう。優しくしてください。

利用したもの

・テキストエディター
・Google Chrome
      - web server for chrome (Chromeプラグインのローカルサーバー)
・GitHub.IO (ホスティングサーバ 公開できればなんでもよかった)

完成したもの

文字数とかリサイズとかに対応間に合わなかったので非推奨（時間切れ
iPhone6 Pulsで調整下から文字はみ出してる可能性あり。
※ iPhoneX で文字が見え難い問題あるので気が向いたら対応します。

注意事項

調整もしてないのできっとバグがあると思われますので利用する際は自己責任でお願いします。

// でタイトルとメッセージ変えれます。
URLの後に?t={タイトル}&m={メッセージ(改行するときは/n)}

QRコードとかでちゃんと読み取れる用にしとけばよかった。。。

ざっくりとした流れ

1. ThreeJS で 2D 目的で使用する為の構成を配置する。
2. 文字表示は、Canvas 2D Context で文字を作成したのち Texture を作成する。
3. 文字や背景が寂しいとつまらないので簡単なエフェクトを追加する。

ThreeJS で 2D 目的で使用する為の構成を配置する

要点だけ

// とりあえずアンチエイリアスだけ設定しとく
this.renderer = new THREE.WebGLRenderer({
           antialias: true
       });
// ブラウザの表示領域に合わせるため innerWidth, innerHeight を指定
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setClearColor(0x000000, 1);
// ピクセル数を合わせる
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.autoClear = false;
document.body.appendChild(this.renderer.domElement);
// 平行投影カメラ
this.camera = new THREE.OrthographicCamera(
    0, window.innerWidth, 0, window.innerHeight, 0.001, 1000);
this.scene = new THREE.Scene();
this.clock = new THREE.Clock();

ThreeJS 初期化関係と解像度と 2D  用の設定

 Canvas で文字を作成したのち Texture を作成する

要点だけ キャンバスへのテキストの描画まで

// 空の canvas
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

// テキストのサイズを取得
ctx.font = size + "px sans-serif";
const textMetrics = ctx.measureText("Merry Christmas!”);
let width = textMetrics.width;
let height = size;

// キャンバスのサイズを設定
canvas.width = width;
canvas.height = height;
canvas.style.width = width + "px";
canvas.style.height = height + "px";

// テキストを 2D Contextへ書き込み
ctx.font = size + "px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "transparent";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fillText(text, width / 2, size / 2);

文字の描画方法はいくつかあるのですが準備が必要なものMeshでフォントを表現したものとか今回はスプライトみたいに利用する為、必要ないかなということでCanvasでやってみました。

・背景が寂しい

 見え難いですが背景に雪を振らせてツリーを背景に合わせて加算合成してみました。

・文字が寂しい

文字と画像にグリット線を引いて見た目を修正しました。本当は赤と緑のクリスマスカラーにしようと思ったのですが時間切れでここまで。。。

まとめ

ネタ的にぐぬぬですがパートナーが喜んでくれたので急いで作ってよかったです。余裕もってやらないと前日にエクスストーリームする事になるのでお気をつけください。
クリスマスも終わってあと来年を待つのみ！来年もよろしくお願いします！