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 #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

[JavaScript] Three.js RenderTarget ミニマップを“ゲームUI”にする（円形マスク＋フレーム＋時計表示）

[JavaScript] Three.js RenderTarget ミニマップを“ゲームUI”にする（円形マスク＋フレーム＋時計表示）

2026-01-31 | lain

前回の RenderTarget + サブカメラ方式ミニマップを、円形マスク（alphaMap）とUIフレーム重ね、CanvasTexture で日時・称号テキストまで表示する“ゲームHUD”へ進化。renderOrder / depthTest / toneMapped のハマり所も整理する。

カテゴリ： JavaScript

タグ： #Three.js#WebGL#MiniMap#RenderTarget#SubCamera#UI#CanvasTexture#alphaMap#HUD

[JavaScript] Three.jsでミニマップ実装：サブカメラ＋RenderTarget＋カーナビ式スムーズ回転

[JavaScript] Three.jsでミニマップ実装：サブカメラ＋RenderTarget＋カーナビ式スムーズ回転

2026-01-31 | lain

Three.jsでゲーム向けミニマップを実装。俯瞰サブカメラの描画をWebGLRenderTargetに出力し、Planeへ貼り付けて画面左上に固定。さらにキャラクターの進行方向に合わせてミニマップを回転させ、atan2補正＋lerpで急回転を滑らかにする。

カテゴリ： JavaScript

タグ： #three.js#WebGL#game-dev#minimap#render-target#camera#UI