ztext.jsで5000兆円風の文字を立体的に描画する
この記事は、mast Advent Calendar 2023 の20日目の記事です。
19日目はIchiro Matsudaさんによる『mast21の卒研配属体験記』でした。
研究室に配属されるまでの流れやあるあるな疑問点がわかりやすく記されています。この記事があと1年早く公開されていればなぁ...
後輩の皆さん、必見です。
はじめに
mast Advent Calendar 20番バッターの丈一です。去年は枠だけ取って記事を出し損ねたため、今年が初アドカレになります。
今回は、3Dタイポグラフィライブラリであるztext.jsで5000兆円風の文字*1を描画するサイトを作成したので、その記録です。
作ったもの
リンクはこちらです。
(推奨ブラウザはGoogle Chromeです。Safariなど他ブラウザでは正しく動作しないことがあります)
概要
文字の描画にはtransform-styleというCSSプロパティを使用しています。これは、transform-styleプロパティの要素がpreserve-3dの場合、その子要素に対して3D空間で座標変換します。
ztext.jsはtransform-styleを使って文字をz軸に配置して階層化するライブラリです。
<h1 data-z data-z-layers="3" data-z-depth="0.5em">
<span class="z-text">
<span class="z-layers">
<span class="z-layer">5</span>
<span class="z-layer">5</span>
<span class="z-layer">5</span>
</span>
</span>
</h1>
上のコードのように、z-layers属性のタグの配下に3層のレイヤーが並ぶと、次のように描画されます。
さて、この階層構造を使って5000兆円風の文字を再現するなら、レイヤーごとに色付けしてあげればよさそうです。
new Ztextify(selector, {
event: 'none',
depth: '2rem',
layers: 30,
eventDirection: 'reverse',
});
これは立体的な文字を生成するコードです。今回は1文字30層のレイヤーで構成し、それぞれの厚みは2remにしました。
図は、それぞれの文字の階層構造です。Nはレイヤーの値で、N=1は表層を表しています。#から始まる16進数の数値はカラーコードです。複数表記されている箇所はlinear-gradientで線形グラデーションにしています。（光沢感マシマシ）
上手く再現できました。
文字の位置や回転はスライダーで制御し、テキストが変更された場合は再度描画し直すようにしました。
感想
・文字数が極端に増えると動作が重くなる。(描画方法が力技なので仕方ない)
・生成した文字の保存機能を追加したかった(文字の座標がtransform-styleによって変換されるため、html2canvasなどは上手く動作しなかった)
・今回はVanilla JSで作成したが、ztext.jsはReactやVueに対応したソースコードも公開しているので、興味が沸いた人はぜひ使ってみてね。
・内容的にはクソアプリアドカレでも良かった。
参考サイト
ztext.js | 3D Typography for the Web
https://yurafuca.com/5000choyen/
使用フォント
