ぱすたけ日記

日記っぽいのを書きます。

好きなウェブサイトにmasawadaを表示できる<masawada-3d>を作りました

こんにちは!!!



みなさんmasawadaさんをブログに埋め込みたいですよね



そういう皆さんのために<masawada-3d>をCustomElementで作成しました


わいわい!!!!!

詳しくはGithubリポジトリを見てください!!!!!!!!!!!!!
詳細は省きますが、Three.jsで描かれていて、カメラとmasawadaの向きを与えることで任意の角度のmasawadaさんをウェブサイト上に描くことが出来ます。custom elementなのでCSSを当てたりも出来ますし、実態はcanvasなので、document.querySelector('masawada-3d canvas').toDataURL()とかでも出来ます!!!!属性をrequestAnimationFrameで書き換えるとかも良いですね。欲しい機能や属性があったらissueやPRで教えて下さい。

github.com


この記事はmasawada Advent Calendar 2019 - Adventarの2日目の記事でした。昨日の記事はmasawada Advent Calendar 2019 1日目: どこでもmasawada - The Third Lawでした。この記事はネタが被ったのでJSConfJP中に発想から実装を行いました。間に合って良かったですね。皆さんも自身のブログやウェブサイトなどでご利用ください。良い作例あったら紹介したいと思います。

(この記事はHTMLモードで書かれました)