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