WebGL

2025-07-08 | lain

本記事では、軽量3Dライブラリ「Three.js」を使って、Web上で画像を立体的に動かす入門的な方法を丁寧に解説。最小構成から回転アニメーションまで、必要なコードはすべて紹介。エラーの対処法も含めて、3Dの“最初の一歩”を一緒に踏み出しましょう。

カテゴリ： JavaScript

タグ： #初心者向け#Three.js#WebGL#3Dプログラミング#HTML#初心者向け#入門講座#フロントエンド#Web開発#インタラクティブ表現

2026-01-22 | lain

Three.js と Unity の両対応で学ぶ、最初のシェーダー入門。GPU がどう世界を描いているのか、Vertex/Fragment の役割、CPU/GPU の関係を図解レベルでわかりやすく解説。

タグ： #シェーダー#GLSL#HLSL#GPU#WebGL#URP

2026-01-18 | lain

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

カテゴリ： JavaScript

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

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-12 | lain

Three.jsで線路モデルをCurve上に並べ、getPointAt/getTangentAtで列車を走らせた。分岐は描画と走行を分離し、まずは1両編成で安定させる。

カテゴリ： JavaScript

タグ： #Three.js#WebGL#Curve#GLTF#procedural

2026-01-12 | lain

WebAudio API と three.js を用いて、音に連動して変化するジオメトリアニメーションを実装する。状態管理・ジオメトリ切り替え・カラーパレット制御を中心に整理する。

タグ： #three.js#WebAudio#Sound Reactive#Creative Coding#WebGL

2026-01-09 | lain

Three.jsのMarchingCubesを使ってMetaballs表現を実装。reset→addBall→updateの流れ、透明Box（水槽）との組み合わせ、world座標を0..1空間へ変換する実装メモ。

カテゴリ： JavaScript

タグ： #three.js#MarchingCubes#Metaballs#WebGL#3D

2026-01-09 | lain

タイル地形をASCIIマップ化し、地面コライダーにzoneを付与。プレイヤーの現在地zoneからエンカウント可否をデータ駆動で切り替えるまでの実装ログ。

カテゴリ： JavaScript

タグ： #Three.js#WebGL#GameDev#RPG#設計

カテゴリ：WebGL