コーディング23件

TSLよく使うノード・関数早見表｜これだけ覚えれば書ける10個
2026年9月12日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 TSLとは？WebGPU時代の新しいシェーダーの書き方で「TSLはJavaScriptでシェーダーを書ける仕組みです」という話 …
Three.js × GSAPでスクロール連動の3D演出｜ScrollTriggerの使い方
2026年9月6日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。前回のR3Fでインタラクティブな3Dで、スクロール連動を自前で書きました。useFrameの中でscrollYを読んで、0〜1 …
R3Fでインタラクティブな3D｜マウス追従とスクロール連動の作り方
2026年8月29日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。前回のReact Three Fiber入門で、シリーズでずっと使ってきた「回る箱」の世界をまるごとJSXに引っ越しました。た …
React Three Fiber入門｜ReactでThree.jsを書くと、何が変わるのか
2026年8月22日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。前回の3Dモデル(GLTF)を読み込む方法で、Three.jsの基礎編は一区切りつきました。世界を作って、光を置いて、好きなモ …
Three.jsで3Dモデル(GLTF)を読み込む方法｜箱を「自分のモデル」に差し替える
2026年8月16日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。前回のThree.jsのマテリアル・テクスチャ・ライティング入門で、箱に色と質感と光を与えるところまでやりました。ここまでで「 …
Three.jsのマテリアル・テクスチャ・ライティング入門｜「見た目」の作り方
2026年8月9日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。前回のThree.jsの基本3要素｜Scene・Camera・Rendererを図で理解するで、3Dが画面に映るまでの流れは掴 …
Three.jsの基本3要素｜Scene・Camera・Rendererを図で理解する
2026年8月1日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。前回のThree.jsの環境構築｜Vite + npmで最速セットアップで、色のついた箱がくるくる回るところまでやりました。コ …
Three.jsの環境構築｜Vite + npmで最速セットアップ
2026年7月25日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 Three.js入門ガイドで「Three.jsって手軽に3Dが作れて面白い」という話をしました。この記事はその続きで、実際に手 …
GLSL入門｜Three.jsのShaderMaterialで自作シェーダーを書く
2026年7月18日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。僕はXでThree.jsのシェーダー作品をちょこちょこ投稿しているんですが、その多くの土台になっているのが「GLSL」です。 …
Three.jsでWebGPUを使う｜WebGPURendererへの移行ガイド
2026年7月11日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。前回、TSLとは？WebGPU時代の新しいシェーダーの書き方という記事で「これからはWebGPUの時代だよ」という話をしました …

← 記事一覧に戻る