読者です 読者をやめる 読者になる 読者になる

three.jsのlinewidth効かへんメモ

ある程度太めのライン(2D)をうにょうにょさせたいっていう要望があって、
それならthree.jsのLineBasicMaterialのlinewidth設定すれば一発だろうと思ってて、
即「できます!」って答えたんだけど、
このプロパティまったく効かへん。。。
なに設定してもずっと1pxの細い線のまま、、
前できてたような気がしたんだけど記憶違いだったか、、

ウニョ線は色々汎用性の高い表現なので、
できればWebGLでできるように無理やり解決しておきたくて、
(Canavsなら線幅変えられる。何回もやったことあったなと思ってたのはたぶんCanvasのことだった)
調べたらTubeBufferGeometryっていうよさそうなのがあって、
これカメラ固定して表示したらまんま2Dのラインだな。
と思って試したらそれっぽくなった。

f:id:ikeryou:20170317205247p:plain
線太くするテスト

アニメーションさせるときに頂点一から計算し直したりしてるからやりすぎ注意。まだ改善できそう。

githubにもUPしたので興味ある方はぜひ。

ウニョ線書いてるクラスはここ

【仕事】 DESCENTE 2017SS特設サイト

ss2017.descente.jp

DESCENTE(デサント) 2017SS特設サイトTOPページのフロントエンドを担当いたしました。
シンプルな構成ではありますが、WebGLを使った商品切り替えエフェクト、ページ全体のトランジションなどを工夫し、単調になりすぎずユーザーが特別感を感じられるように心がけて実装しました。
PC、スマホと同じ演出となっていますのでぜひ両端末でご覧ください。

f:id:ikeryou:20170307170136g:plain
f:id:ikeryou:20170307171929p:plain
f:id:ikeryou:20170302150250p:plain

Webサイトリニューアル

ikeryou.jp

僕のやってることや仕事の実績などは完全にこのブログに集約することにして自分のサイトもリニューアル。このブログへの扉ページ的な位置付けにしました。背景とか結構自分好みにぐにょぐにょさせてます(テキストは日々思ってることがランダムで表示されます!)。PCとSPどっちも見れるのでよかったらぜひ!

f:id:ikeryou:20170303205213g:plain
f:id:ikeryou:20170307172140p:plain

Atomで.pugファイルを.jadeファイルとして認識させる

そろそろ.jadeじゃなくて.pngに切り替えようと思ったけど.pngだとSyntaxThemeがjadeじゃなくてplanetextになってしまうので、pngファイルをjadeファイルとして認識させる。

  1. file-types packageをインストール
  2. Preferences/Open Config Folder .atom/config.csonを開く
  3. "file-types"を追加
"*":
  "file-types":
    pug: "source.jade"

最後にAtomを再起動して終わり。

iPhoneでマナーモードにしてても音がなってしまう

iPhoneでマナーモードにしてても音がなってしまう現象。
調べたのでわすれないようにメモ。

qiita.com

webaudioAPI単体なら問題ないが、HTMLAudioを一回でも使うとマナーモード無視で音が鳴ってしまう。今回はhowler.js使っててこのライブラリの場合どうやらライブラリ内でfallbackする際に使われてる模様。(たぶんAPIの存在チェックでnew Audio()とかやってる)
けれど、一発で解決できるグローバルパラメータあったので解決。
そんなものはなかったので、howler.jsちょいいじった

ここをコメントアウトして、
https://github.com/goldfire/howler.js/blob/master/src/howler.core.js#L209-L214

この行の前で、
https://github.com/goldfire/howler.js/blob/master/src/howler.core.js#L232

こんな感じで強制return

self._codecs = {
  mp3: true
}
return self;

※今やってるのはwebAudioAPI非対応のIE11も対応するので、上記のコメントはiOSのみの場合に限定した。こんな感じで。

var isiOS = /iPhone|iPad|iPod/i.test(self._navigator && self._navigator.userAgent);
if(!isiOS) {
  try {
    var test = new Audio();
    if (test.muted) {
      self.noAudio = true;
    }
  } catch (e) {}
}