AIと創作の記録をここに。

「AIと人が、共に学び、創る場所」

学びと再出発の旅路へ。

注目のプロジェクト

注目
[ブロック崩しゲーム] ブロック☆パレット 魔法で描く不思議な世界

[ブロック崩しゲーム] ブロック☆パレット 魔法で描く不思議な世界

「ブロック☆パレット 魔法で描く不思議な世界」は、ブロック崩しゲームの新しいアプローチを取り入れた作品です。魔法とアニメーションの要素を融合させ、プレイヤーに魅力的な体験を提供します。

注目
[PIECE BY PIECE] 記憶のカケラ：失われたピースを集める神経衰弱ゲーム

[PIECE BY PIECE] 記憶のカケラ：失われたピースを集める神経衰弱ゲーム

「記憶のカケラ」は、失われた記憶を取り戻すためにピースを集める神経衰弱ゲーム。ひとつひとつのピースがあなたの記憶を呼び覚まし、挑戦する度に新しい発見が待っています。

注目
[Chrome Add-on] ChatGPT Question Redactor

[Chrome Add-on] ChatGPT Question Redactor

ChatGPT の会話で、文末が「？」の行を自動的に折りたたむ Chrome 拡張をリリースしました。

注目
FramePack-eichiによるAIアニメーション

FramePack-eichiによるAIアニメーション

FramePack-eichiでAIアニメーションを作成する方法の紹介、及び、画像生成AIの活用方法。

おすすめ記事

最新記事

[Next.js #09] Perlin/FBM ノイズで地形を作り、プレイヤーを Raycast で追従

[Next.js #09] Perlin/FBM ノイズで地形を作り、プレイヤーを Raycast で追従

2026-02-08 | lain

R3F(React Three Fiber) 上で FBM ノイズ地形を生成し、Raycaster で地面の高さを取得してプレイヤーを自然に追従させる。地形生成（頂点Z変形・法線再計算・標高カラー）から、WASD移動＋atan2回転、hit安全処理とLERP補間までを最小構成でまとめる。

カテゴリ： Next.js

タグ： #R3F#Three.js#Noise#Perlin#FBM#Raycast#Terrain#MMD#WebGL

[Next.js #07] R3FでglTF/VRMを扱うための“橋渡し”基礎まとめ

[Next.js #07] R3FでglTF/VRMを扱うための“橋渡し”基礎まとめ

2026-02-07 | lain

Three.jsを理解している前提で、R3FでglTF/VRMを扱うための本質だけをまとめる。Three.jsとR3Fの思想の違い、glTF読込みの仕組み、VRM特有の落とし穴、モデルビューアー設計の基礎を効率的に整理する。

カテゴリ： Next.js

タグ： #ReactThreeFiber#glTF#VRM#Three.js#React

[Next.js #04] R3F × WebXR の構造：Canvas ループと XR の衝突を理解する

[Next.js #04] R3F × WebXR の構造：Canvas ループと XR の衝突を理解する

2026-02-04 | lain

Next.js(App Router) + R3F + WebXR 環境で必ず発生する“レンダリングループの衝突”を、内部構造から解説する回。R3F の frameloop・advance・state.clock が XR の animationLoop と同期しない理由、useFrame の遅延、XRControllerModelFactory の不整合、Suspense が XR 中で危険な構造、そして正しい setAnimationLoop 併用方法まで網羅する。

カテゴリ： Next.js

タグ： #R3F#WebXR#Three.js#Next.js#Performance#VRM

[Next.js #03] React Three Fiber（R3F）導入：Three.js を Next.js と正しく統合する

[Next.js #03] React Three Fiber（R3F）導入：Three.js を Next.js と正しく統合する

2026-02-02 | lain

Next.js(App Router) と Three.js を安全に統合するための必須レイヤー、React Three Fiber（R3F）の基礎と構造を整理する。ヴァニラ Three.js と R3F の対応関係、Canvas / useFrame / useThree の最低限の理解、コンポーネント境界（use client）など、Next.js で 3D を扱うための“地図”を作る回。

カテゴリ： Next.js

タグ： #ReactThreeFiber#R3F#Three.js#WebGL#AppRouter#Next.js

[Next.js #02] フレームワークの思想と哲学を理解する

[Next.js #02] フレームワークの思想と哲学を理解する

2026-02-01 | lain

Next.js・React・Tailwind の設計思想を体系的に理解するための回。なぜ継承を捨て、なぜUIを“状態の写像”と捉え、なぜフォルダ構造でルーティングが生まれるのか──それぞれの背景を哲学レベルで解説する。

カテゴリ： Next.js

タグ： #React#Next.js#Tailwind#Philosophy#WebDev