2025-06-18 | lain

ゼロから始めるアプリ制作。２回目となる今回は、UI設計と素材準備：スマホベースで画面構成を考えます。

タグ： #アプリ開発#スマートフォン#スマホ#初心者#UI#設計#素材#AIと開発#AI開発支援

2026-01-31 | lain

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

カテゴリ： JavaScript

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

2026-01-31 | lain

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

カテゴリ： JavaScript

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

2026-01-11 | lain

前回のフェーズ駆動バトル実装を「完成版」へ。enemyフェーズ（敵ターン）追加、HPの増減と勝敗判定、走って殴る演出、waitDurationの秒管理、UI/SE多重発火の対策までをまとめる。

カテゴリ： JavaScript

タグ： #Three.js#RPG#GameDev#BattleSystem#UI#Animation#SE

2026-01-08 | lain

three.jsでフィールドからバトルへの遷移、フェーズ管理、コマンドUI、アニメーション、SE/BGMまでをゼロから実装した制作ログ。

カテゴリ： JavaScript

タグ： #three.js#RPG#ゲーム開発#状態管理#UI#アニメーション

2026-01-04 | lain

WebXRで実装した右手コンパスUIを拡張し、NPCの位置をリアルタイムに可視化するドラゴンレーダー風UIを実装する。

カテゴリ： JavaScript

タグ： #Three.js#WebXR#VR#UI#ゲーム開発#レーダー

2026-01-04 | lain

Three.jsのXRControllerModelFactoryを使って両手のVRコントローラを表示し、右手にコンパスUIを実装する方法を解説する。

カテゴリ： JavaScript

タグ： #Three.js#WebXR#VR#XRControllerModelFactory#UI

2026-01-01 | lain

Three.js の WebXR 環境で、CanvasTexture を使いレーザーポインタ操作によるスクロールUIを自作した実装メモ。DOMを使わない空間UIの構成と考え方。

カテゴリ： JavaScript

タグ： #Three.js#WebXR#Canvas#UI#VR

2025-12-27 | lain

Three.js の VideoTexture をクラス化し、プレイリスト・サムネ表示・UI操作を統合した WebXR 対応動画プレイヤーを実装する

カテゴリ： JavaScript

タグ： #Three.js#WebXR#VideoTexture#UI#Class設計

カテゴリ：UI