みなさんmasawadaさんをブログに埋め込みたいですよね
そういう皆さんのために
<masawada-3d>
をCustomElementで作成しました
わいわい!!!!!
詳しくはGithubのリポジトリを見てください!!!!!!!!!!!!!
詳細は省きますが、Three.jsで描かれていて、カメラとmasawadaの向きを与えることで任意の角度のmasawadaさんをウェブサイト上に描くことが出来ます。custom elementなのでCSSを当てたりも出来ますし、実態はcanvasなので、
document.querySelector('masawada-3d canvas').toDataURL()
とかでも出来ます!!!!属性をrequestAnimationFrame
で書き換えるとかも良いですね。欲しい機能や属性があったらissueやPRで教えて下さい。
この記事はmasawada Advent Calendar 2019 - Adventarの2日目の記事でした。昨日の記事はmasawada Advent Calendar 2019 1日目: どこでもmasawada - The Third Lawでした。この記事はネタが被ったのでJSConfJP中に発想から実装を行いました。間に合って良かったですね。皆さんも自身のブログやウェブサイトなどでご利用ください。良い作例あったら紹介したいと思います。
(この記事はHTMLモードで書かれました)