コーディング25件

📖 この記事はThree.jsシリーズの1本です。全体の流れは【まとめ】Three.js入門完全ガイドにまとめています。 みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 Th …

みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 このシリーズではずっと1個の箱を育ててきました。質感をつけて、自分のモデルに差し替えて、スクロールで動かして。 今回はその箱を …

みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 TSLとは？WebGPU時代の新しいシェーダーの書き方で「TSLはJavaScriptでシェーダーを書ける仕組みです」という話 …

みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 前回のR3Fでインタラクティブな3Dで、スクロール連動を自前で書きました。useFrameの中でscrollYを読んで、0〜1 …

みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 前回のReact Three Fiber入門で、シリーズでずっと使ってきた「回る箱」の世界をまるごとJSXに引っ越しました。た …

みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 前回の3Dモデル(GLTF)を読み込む方法で、Three.jsの基礎編は一区切りつきました。世界を作って、光を置いて、好きなモ …

みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 前回のThree.jsのマテリアル・テクスチャ・ライティング入門で、箱に色と質感と光を与えるところまでやりました。ここまでで「 …

みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 前回のThree.jsの基本3要素｜Scene・Camera・Rendererを図で理解するで、3Dが画面に映るまでの流れは掴 …

みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 前回のThree.jsの環境構築｜Vite + npmで最速セットアップで、色のついた箱がくるくる回るところまでやりました。コ …

みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 Three.js入門ガイドで「Three.jsって手軽に3Dが作れて面白い」という話をしました。この記事はその続きで、実際に手 …