Posted at

p5.jsで3Dに良い感じにキャプションを入れる


3D表現に良い感じに文字列を入れたい

p5.jsを使ってオブジェクトや空間にキャプションを入れるとこうなってしまいます

オブジェクトの回転に合わせてくるくる回ってしまいます


結果

で試行錯誤の結果がこちら


理論

オブジェクトに加えた回転/拡大などの操作を順序スタックに保存しておいて

文字列を描画する際に逆の変換を加えています

詳細はデモの欄のリンクからソースを参照してください

直接 描画中の行列(model matrixというらしい)を取得できれば

もっと簡単にできそうなのですが

現在のところブラウザには実装されていないそうです

https://github.com/processing/p5.js/issues/1873#issuecomment-290992218


課題

文字の大きさを揃えたかったのですが

ちょっとわかりません・・・


参考

http://d.hatena.ne.jp/kougaku-navi/20151229/p1


デモ

太陽系

立方体の頂点