React Three Fiber

2026-03-09 | lain

Triplexを使ってReact Three Fiberの3DシーンをGUIで編集し、そのままWebXRでMeta Quest2に送って体験するまでの流れを解説。インストールからXR実行までを実際の手順でまとめます。

カテゴリ： Next.js

タグ： #React Three Fiber#R3F#Triplex#Three.js#WebXR#Meta Quest#VR

2026-03-01 | lain

ノイズ連載21回分の集大成。ドメイン・ワーピングとカスタムシェーダーを組み合わせ、ライブラリ不要の爆発的な視覚エフェクトを実装します。

カテゴリ： Next.js

タグ： #React Three Fiber#GLSL#Noise#Three.js#Web Graphics

2026-02-17 | lain

影が出ない・切れるといった「あるある」を防ぐために。Levaを使ってDirectional LightのShadow Camera範囲を可視化し、最適な設定を探るプロセスをまとめました。

カテゴリ： Next.js

タグ： #React Three Fiber#Three.js#Leva#WebGL

2026-02-15 | lain

配列データの管理から物理ベースの設計へ。R3Fでドラッグ操作、角丸の高級マテリアル、そして動的なグループ化を用いたルービックキューブの実装プロセスを解説します。

カテゴリ： Next.js

タグ： #React Three Fiber#Three.js#WebGL#Rubik's Cube#3D

2025-12-16 | lain

Three.jsの開発を高速化するためのVSCode拡張「Three.JS Snippets」の完全ガイド。スニペットによるコード生成で効率的な開発を実現！

カテゴリ： JavaScript

タグ： #Three.js#VSCode#Snippets#React Three Fiber#開発効率化

2026-04-01 | lain

React Three FiberとDreiを用いて、YouTube動画を3D空間で回すサイバーパンク風のカルーセルUIを実装。WebGLとDOMの融合における負荷対策と、表現としての「バグ」の受容についての備忘録。

カテゴリ： Astro

タグ： #Three.js#React Three Fiber#WebGL#UI/UX

2026-02-14 | lain

React Three Fiberで複数のGLTFモデルを横スライド切替できる3Dビューアを実装。モデルの自動センタリング、スケール正規化、Box3による接地処理、lerpによるスムーズ移動、ドラッグ操作の仕組みまで整理する。

カテゴリ： Next.js

タグ： #React Three Fiber#R3F#GLTF#Three.js#3D Viewer

2026-02-16 | lain

Next.js + R3F 実装連載第18回。Three.js公式のWaterシェーダーによる海面表現と、レイマーチングを用いたボリューメトリックな雲を組み合わせ、リアルな自然環境を構築します。

カテゴリ： Next.js Three.js

タグ： #React Three Fiber#Shader#WebGL#Raymarching

カテゴリ：React Three Fiber