![[Human x AI] ChatGPT(5.2)との対話録 ～ 3Dプログラミングの難しさ ～](https://assets.lain-lab.com/images/uploads/ai-dialogue-2026-01-14.webp)
[Human x AI] ChatGPT(5.2)との対話録 ～ 3Dプログラミングの難しさ ～
[Human x AI] ChatGPT(5.1)との対話録 ～ 3Dプログラミングの難しさ ～
ARCHIVE_INDEX / PAGE_28
TOTAL_ITEMS: 702
![[JavaScript] Three.jsでS字レールをつなぐ：クロソイド曲線で2本で分岐カーブを作る](https://assets.lain-lab.com/images/uploads/javascript-threejs-s-curve-rail-quadratic-bezier.webp)
[JavaScript] Three.jsでS字レールをつなぐ：クロソイド曲線で2本で分岐カーブを作る
Three.jsでレールを配置する際、直線同士をS字（逆曲率）で自然につなぐ方法を解説。中点M、forward/rightベクトル、control点の設計、tangentでの向き合わせ、curveStrength調整まで、実装の勘所を整理する。
![[JavaScript] Three.jsで「列車を運行する」実装に到達するまでの設計と思考ログ](https://assets.lain-lab.com/images/uploads/javascript-threejs-train-system-design.webp)
[JavaScript] Three.jsで「列車を運行する」実装に到達するまでの設計と思考ログ
Three.jsで列車を動かすだけの実装から、複数列車・路線・停車制御を持つ運行システムへ進化させるまでの設計判断、バグ、修正、思考過程をまとめた実践記事。
![[JavaScript] Three.jsで線路を引いて列車を走らせた（Curve×cloneでレール生成）](https://assets.lain-lab.com/images/uploads/javascript-threejs-rail-curve-train.webp)
[JavaScript] Three.jsで線路を引いて列車を走らせた（Curve×cloneでレール生成）
Three.jsで線路モデルをCurve（QuadraticBezierCurve3）から生成し、配置したレールの上を列車モデルが走るところまで実装した記録。分岐・繋ぎ目・高さ（y）による破綻と、その回避策（height=0、走行用Curve保存、1両編成）をまとめる。
![[JavaScript] WebAudio × three.js で作るサウンドリアクティブ・ジオメトリアニメーション](https://assets.lain-lab.com/images/uploads/javascript-webaudio-threejs-sound-reactive-geometry.webp)
[JavaScript] WebAudio × three.js で作るサウンドリアクティブ・ジオメトリアニメーション
nw_wrld に影響を受け、WebAudio の解析結果を three.js に直接接続することで、サウンドリアクティブなジオメトリアニメーションを実装した。BoxGeometry を中心に、状態管理・色制御・ジオメトリ切り替えの設計をまとめる。
![[JavaScript] Three.jsでRPGバトルを仕上げる｜敵ターン追加・HP決着・テンポ調整・不具合潰し](https://assets.lain-lab.com/images/uploads/javascript-threejs-rpg-battle-complete.webp)
[JavaScript] Three.jsでRPGバトルを仕上げる｜敵ターン追加・HP決着・テンポ調整・不具合潰し
Three.js製RPGバトルを完成形へ持っていく実装メモ。Battleクラスに敵ターン（enemyフェーズ）を追加し、HPによる勝敗判定、敵の接近→攻撃→待機→帰還アニメ、delta秒ベースのwaitDuration管理、UI表示やSEの多重発火を防ぐフラグ設計を解説。
![[JavaScript] Three.js / WebXRで一生使い回せるMessageBoxを実装](https://assets.lain-lab.com/images/uploads/javascript-threejs-webxr-reusable-messagebox.webp)
[JavaScript] Three.js / WebXRで一生使い回せるMessageBoxを実装
Three.jsとWebXRで動作するMessageBoxを、ゲームループ主導・入力制御・自動クローズ対応で実装した。CanvasTextureの限界や、あえて深追いしなかった設計判断も含めた実装ログ。
![[JavaScript]スマホでサブ的にコーディングする現実解 ─ 開発者向け実践ガイド](https://assets.lain-lab.com/images/uploads/javascript-mobile-sub-coding-threejs-webxr.webp)
[JavaScript]スマホでサブ的にコーディングする現実解 ─ 開発者向け実践ガイド
Three.js / WebXR 開発者が、スマートフォンを“補助脳”として活用するための実践ガイド。vscode.dev + Codespaces を軸に、PlayCode や Termux + Code Server まで含めた現実的な選択肢と使い分けをまとめる。
![[JavaScript] Zone切り替えBGMを自然につなぐサウンド設計（フェード対応）](https://assets.lain-lab.com/images/uploads/javascript-zone-bgm-sound-design-fade.webp)
[JavaScript] Zone切り替えBGMを自然につなぐサウンド設計（フェード対応）
ZoneベースのBGM切り替えで起きがちな違和感を、JSONによるデータ管理とsound.jsへの責務集約、フェードイン・フェードアウト設計で解決する。Three.jsやWebXRに依存しないサウンド設計の考え方。
![[JavaScript] Three.jsでsin波に沿って拡散するスプライト演出を試作した記録](https://assets.lain-lab.com/images/uploads/javascript-threejs-sin-wave-sprite-animation.webp){kind=icon}
[JavaScript] Three.jsでsin波に沿って拡散するスプライト演出を試作した記録
three.jsでSpriteとCanvasTextureを使い、sin波に沿って生成される星形スプライト演出を実装した記録。単調さの解消、多方向化、やりすぎて破綻した設計を戻した判断まで含めて整理する。
![[JavaScript] Three.jsでMarchingCubes（Metaballs）を動かす](https://assets.lain-lab.com/images/uploads/javascript-threejs-marchingcubes-metaballs.webp)
[JavaScript] Three.jsでMarchingCubes（Metaballs）を動かす
Three.jsのMarchingCubes（Metaballs）を実際の箱庭シーンに配置して動かした記録。update()必須の罠、透明マテリアルとdepthWrite、world座標からMetaballs空間への変換など、実装で詰まった点を中心にまとめる。
![[JavaScript] Three.jsで地形にゾーンを持たせてエンカウントを制御する（tile→ASCII map→ZONE_DEFS）](https://assets.lain-lab.com/images/uploads/javascript-threejs-terrain-zone-encounter.webp)
[JavaScript] Three.jsで地形にゾーンを持たせてエンカウントを制御する（tile→ASCII map→ZONE_DEFS）
Three.jsのタイル地形をJSON/ASCII mapで管理し、legendにtype/zone/textureを集約。地面コライダーのzoneをプレイヤーへ伝播し、ZONE_DEFSでエンカウントを制御する設計と実装手順をまとめる。