マークアップを生業としていると下記のようなドット絵を頻繁に描くと思います
でも『もう少しインパクト欲しいなぁ～』って月に一度は思いますよね…思うはずです…思わないはずがありません…いったん思っておいてください
ということで今回のお題はタイトル通り『ドット絵を3Dっぽくしてみよう！』です
何と言われようと自然な流れです…異論も反論も認めません
ちなみにこのドット絵は『しっぽに火が灯っているトカゲっぽいナニか』です
もちろん…不思議なナニかが生息する世界で少年たちがナニか丸っこいモノを投げてナニかを捕まえたり…その捕まえたナニかを育てたり…さらにその捕まえたナニかをバトルさせたりしながら友情を育みつつ冒険を繰り広げちゃうようなナニかとは全く…いっさい…1mmも関係ございません
この『しっぽに火が灯っているトカゲっぽいナニか』は css のみで描かれています
box-shadowを使用してベタっと描いて(書いて)います
更にちなみに一見不思議っぽい放射状の背景はrepeating-conic-gradientを使用してゴニョゴニョっとしております
『なんだったら3Dとかよりもコッチの方が興味ある！』って方や少々の時間を無駄に過ごしても良いなって奇特な方がいらっしゃいましたらソースを覗き見てください
大きな画面で隅々まで見たい・知りたい・パクりたいって方は上記より( •ᴗ• )⸝
まず3D表示するにもイロイロな方法・技術があります
3Dグラフィックスを高速かつスムーズに描画することが出来るWebGLやWebGPUであれば完全にブラウザ上で動作するのでプラグインや特別なソフトウェアをインストールする必要がなく、基本的にJavaScript制御するので閲覧者の動的操作などと連携させることができるインタラクティブサイト作成が比較的容易に実装可能です
ただイロイロとサクサク構築するためにはWeb 3D ApiやThree.jsなどのJavaScript・フレームワークの知識以前に『3D作成や表示に関する概念』などの経験・知見が必要になります
ザックリ学習コストは『2m高ハードルが9.14m毎に設置されている状態で42.195km走る程度』です
※あくまでも上記例えは私の主観です…
当然基本的にノーミソが筋肉とバウムクーヘンで出来ている私としては『使用技術選定』もなにも…はなっから技術を持っていないので答えは1つです
いつも通りhtmlとcssのみで何とかしようぜぃ！です(｀･ω･´)ｼｬｷｰﾝ
まずは平面を立体にしなくてはいけません…
代表的な3D作成ソフトに【Blender・Metasequoia・Tinkercad・SketchUp・Maya・3ds Max・Lightwave・ZBrush・VRoid Studio】などがあります
『あーはいはい、それね』って感じで『聞いたことあるわぁ』程度の知見しかありません…厳密にいうと若かりし頃【Blender】は『よーし！いっちょ隅から隅までマスターしてやるぜぃ！』って意気込んで3日で挫折しましたね(これが本当の三日坊主っていうアレです)
だがしかし冷静に考えてみると…そもそもドット絵なのでカクカクしていますし『3Dってほどのアレでもなくない？』ってことでノーミソ筋肉な私は『実際にブロック組み立てるのが一番じゃね？』っという素晴らしい発想の転換で100％強引な手段をとることにしました
実際にブロックを組み立てて断面図をドット絵にしたものが上記です
ここでいう『設計』とは…ブロックで遊んで作り上げたこの『設計図』が全てです！
あっいや…遊びじゃない！これは立派な『設計』です(︶｡︶✽)
まず計算されつくされた設計図から使用ブロック数を算出したところ…立体ブロックを302個並べなくてはいけません…気が滅入る途方もない数ですね
その1つ1つのブロックを立方体にするので6つの要素が必要となります…
いつも『html文章構造をもっと考えてっ！』とか『セマンティックで正当性のあるコードをっ！』とか言っていますが…ここは100％無視します…せざる得ません…させてください
div(class='🦎')
ul
- for (var x = 0; x < 302; x++)
li
span
strong しっぽに火が灯っているトカゲっぽいナニかwイメージとしては…
ul{
transform-style:preserve-3d;
li{
text-indent:-4649em;
position:absolute;
transform-style:preserve-3d;
span,
strong{
display:block;
transform-style:preserve-3d;
}
&::before,
&::after,
span::before,
span::after,
strong::before,
strong::after{
content:"";
width:20px;
height:20px;
position:absolute;
top:0;
left:0;
}
&::after{
transform:translateZ(-20px);
}
span::before{
transform-origin:bottom;
transform:rotateX(90deg);
}
span::after{
transform-origin:top;
transform:rotateX(-90deg);
}
strong::before{
transform-origin:left;
transform:rotateY(90deg);
}
strong::after{
transform-origin:right;
transform:rotateY(-90deg);
}
}
}ザックリ解説すると…
2・6・10行目transform-style:preserve-3dで『ulタグ・liタグ・spanタグ・strongタグ』それぞれの領域を3D化していて
のようにして立方体を表示させています
li:nth-child(132){
top:140px;
left:40px;
transform:translateZ(40px);
}あとはliタグを上記のように位置(座標)表示設定しています
そう…302個それぞれに…( ꒪⌓꒪)
物凄くラブリーですね！自画自賛せざる得ないですね、はい♡
大きな画面で隅々まで見たい・知りたい・パクりたいって方は上記より( •ᴗ• )⸝2
まぁぶっちゃけ…
『ドット絵を3Dっぽく表示させちゃってよ～』なんて依頼はないでしょうし本記事が何処かの誰かの役に立つかどうかは別として画像やSVGなどを組み合わせることで表現力は更に広がります
サイト・アプリ制作する上で必須ではないかもですが…使いこなせるようになっておいて損はないスキルだと思います
そして勢い余ってそこそこ頑張って創っちゃったモノを共有させていただきます！
暇で暇でどうしようもないなぁ～って方は下記より٩(๑❛ᴗ❛๑)۶
