RX100で撮り歩くブログ

RX100やRollei B35で写真を撮ったり何やかんやするブログ

three

シェーダーに入門して画像をかっこよく切り替える

three.jsで表現の幅を広げるにはシェーダーは避けて通れなさそうなので、入門してみました。 とりあえず以下の記事を読んでみました。年数的には古い記事ですが、大きく変わっていないとは思うので、そのまま参考にしました。 qiita.com qiita.com あとはこ…

Three.jsとGSAPを組み合わせてボックスを回転させるだけ

GSAPとThree.jsを組み合わせられると聞いてどういうことかを確かめるために基礎的なことをやってみました。 GSAPとThree.jsを組み合わせる場合、Three.jsでオブジェクトを配置したりして、それをGSAPのタイムラインなどを使って動かせるようです。GSAPを使う…

requestAnimationFrameについて

requestAnimationFrameは再描画が頻繁に行われる処理に使えるメソッド。three.jsを勉強しているときにオブジェクトを回転させるときとかに使われているので調べてみました。 developer.mozilla.org 比較されるものとしてsetInteval、setTimeoutがありますが…

【Three】ジオメトリ

ジオメトリを指定することで、立方体や球など様々なオブジェクトを表示できる。 球体、直方体、三角錐、ドーナツ状など基本的な形状がthree.jsで用意されている。 球体 threejs.org SphereGeometry(radius : Float, widthSegments : Integer, heightSegments…

【Three】レンダラーやシーン、ライトなど

普段webアプリケーション開発をしていますが、気分転換にグラフィカルなものをやってみようとコツコツthree.jsを触ってみて、学んだことをまとめていく。 CDN CDNを使う場合は以下のサイトから cdnjs.com シーン 3Dオブジェクトや光源を置く場所。ステージの…