今更ですがThree.jsで作成したものをスマホでの表示などRetina対応するのに遠回りしてしまったので備忘録的にメモしておきます。
Canvasでの描写はそのままだとRetinaではジャギる
まあ、これは画像ファイルがぼけて表示されるのと同じ理屈なんですが、Canvasの面倒なところはCSSでタグのサイズを変更するだけじゃダメでCanvas内の空間もwidthとheightで変更しておかないといけないところです。
それについては前にこんな記事を書きましたので良ければどうぞ。
メモ：canvasタグのサイズを可変にするときの注意点
自力で試したこと
初心者なりにThree.jsでの描画もそうだろうなぁと思って、レンダラーに対して下記のような設定を行った上で、CSSの方で通常サイズに縮小していました。バッドノウハウなのはわかってますが!importantを使っているのはsetSizeを使うとCanvasタグに自動でcssが直書きされるからそれを打ち消すためです。。
はい、無理やりなのはわかってました。。
c_width = window.innerWidth*2; c_height = window.innerHeight*2; renderer.setSize(c_width,c_height);
width: 100vw !important; height: 100vh !important;
これでちゃんとスマホでも綺麗に表示はされました。だけど、やっぱりスマートじゃないなぁと。。
ちゃんと調べる前に自分でやってみたんですが公式のやり方ありそうだなぁと。。
公式でありました。setPixelRatio()
で、調べてみるとやっぱりありました。
var renderer = new THREE.WebGLRenderer({antialias: true});
//setPixelRatio（デバイスの解像度）
renderer.setPixelRatio(window.devicePixelRatio);
setPixelRatioを設定するだけで解決する話でした。簡単！
どれを使うかわかった上で検索して探してみるとこちらの公式にも書いてありましたね…。
ただ、こちら解像度は合わせられるんですがPCによっては解像度が高くなりすぎて重くなることもあるようです。幅広い人が快適に閲覧できるようにするなら使うかどうかちょっと考えなきゃな気がします。
そもそもどうするかわからない物を調べるのって難しいですよねー…。
