JavaScript

2026-01-28 | lain

sin/cos を使った基本アニメーション（上下移動・揺れ・回転・色変化）を、Three.js/JavaScript の最小コードで一気に整理する学習メモ。

カテゴリ： JavaScript

タグ： #Three.js#Math#Animation#Trigonometry

2026-01-22 | lain

WebXR やゲーム開発で頻出する Quaternion の実践パターンを整理。視線追従、カメラ操作、キャラクターの向き制御、入力値との付き合い方まで、現場でバグになりやすい要点をまとめる。

カテゴリ： JavaScript

タグ： #Quaternion#Three.js#WebXR#GameDev

$[JavaScript] Quaternion 入門 #05 : Slerp は何をしているのか$

2026-01-21 | lain

Quaternion の補間 Slerp を「数式なし」で理解する回。なぜ lerp が破綻しやすいのか、なぜ一定速度に見えるのか、そして「最短経路」とは何かを、Three.js の挙動ベースで整理する。

カテゴリ： JavaScript

タグ： #three.js#quaternion#slerp#math#3d

2026-01-19 | lain

Quaternion.multiply の“順序の違い”が何を意味するのかを解説。ローカル回転とワールド回転、右から掛ける／左から掛ける感覚、なぜ順序を変えると結果が変わるのかを Three.js を軸に理解する回。

カテゴリ： JavaScript

タグ： #Quaternion#Three.js#Rotation#Math#3D

2026-01-18 | lain

Quaternionで絶対にやってはいけない実装をまとめた実務向けガイド。足すと壊れる、lerpが破綻する、multiplyの順序ミス、正規化忘れなど、Three.jsで頻発する落とし穴を徹底的に潰す。

カテゴリ： JavaScript

タグ： #Quaternion#Three.js#3D数学#WebGL

2026-01-17 | lain

オイラー角はなぜ破綻するのか。回転順序、ジンバルロック、角度を足す設計の限界を、Quaternionを使わずに徹底的に解説する。

カテゴリ： JavaScript

タグ： #Quaternion#Euler#オイラー角#Three.js#3D#回転#

2026-01-15 | lain

Quaternionを「理解」しようとして詰む前に、Three.jsで回転を安全に扱うための最低限（変換・合成・補間）だけに絞って解説。

カテゴリ： JavaScript

タグ： #Three.js#Quaternion#3D#Math#WebGL

2026-01-14 | lain

2本の直線レールをS字で接続するために、QuadraticBezierCurve3を2本つないで曲率を反転させる実装と調整ポイントをまとめた。

カテゴリ： JavaScript

タグ： #threejs#webgl#geometry#bezier#spline#procedural#rail#simulation#クロソイド曲線#QuadraticBezierCurve3

2026-01-13 | lain

単一列車前提のThree.js実装を捨て、複数列車・路線・停車・折り返し・ループを持つ「運行システム」へ再設計した記録。

カテゴリ： JavaScript

タグ： #Three.js#ゲーム開発#シミュレーション#アーキテクチャ#設計思想#Bezier曲線#状態管理

カテゴリ：JavaScript