Three.js

[Noise 入門 #04] Perlin Noise のアルゴリズムを図解で理解する

2026-02-11 | lain

Perlin Noise を“図解”で理解するための基礎記事。グリッド・勾配ベクトル・内積・補間の4ステップで、ノイズがどのように滑らかさを生み出すのかを丁寧に解説します。

カテゴリ： Procedural

タグ： #Noise#Perlin#Simplex#Shader#Three.js#WebGL

[Noise 入門 #01] ノイズとは何か？— 滑らかな乱数の正体を理解する

2026-02-08 | lain

ゲーム開発・CG制作で使われる“ノイズ”の正体を、ランダムとの違いから基礎レベルで理解する。Perlin/Simplex 以前に知るべき核となる概念を解説。

カテゴリ： Procedural

タグ： #Noise#Math#Three.js#Shader

【JavaScript 3D 入門講座】HTMLでここまでできる！3D表現の入口 Three.jsをつかってみよう

2025-07-08 | lain

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

カテゴリ： JavaScript

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

[Noise 入門 #05] Fractal Brownian Motion（FBM）— ノイズを“自然界の複雑さ”へ進化させる

2026-02-12 | lain

Perlin Noise を“自然な地形・雲・水”に変える魔法の技術、Fractal Brownian Motion（FBM）を図解とコードで理解する。Frequency / Amplitude / Octave がどのように積み重なるか、Three.js/Shader で応用するための基礎を整理します。

カテゴリ： Noise

タグ： #PerlinNoise#FBM#WebGL#Shader#Three.js

[Next.js #14] PMXモデルを“動的にキャラチェンジ”する：File→BlobURL→MMDLoader の完全実装

2026-02-12 | lain

File API から PMX を読み込み、BlobURL 偽装（#filename.pmx）で MMDLoader を正常動作させ、R3F のプレイヤーに即反映する「キャラチェンジ」機能を実装。地形追従・歩行アニメ・3D UI と連携させて動くまでの技術的課題と解決策をまとめた記事。

カテゴリ： Next.js

タグ： #Three.js#R3F#MMD#PMX#Blob#FileAPI#JavaScript

[Next.js #13] OBJモデルを“粒子化”：PointCloud＋GLSL揺らぎでモデルを再構築

2026-02-11 | lain

OBJモデルを Three.js で点群化し、GLSL の揺らぎで再構築するデモ。粒子が形状を保ったまま個別に振動する仕組み、basePosition の保持、uniform のリアルタイム操作など、Vanilla Three.js × Next.js での高度な表現を解説する。

カテゴリ： Next.js

タグ： #three.js#glsl#shader#pointcloud#obj#particles

[Next.js #12] R3Fに“インスペクタ”を付ける：Levaで雲・水・ライトをリアルタイム調整

2026-02-11 | lain

Next.js × React-Three-Fiber のシーンに Leva UI を統合し、雲ドーム・水シェーダー・ライト強度などをインスペクタからリアルタイムに調整できる仕組みを解説。ShaderMaterial の uniforms 制御、useControls の罠、UI配置の注意点までまとめた。

カテゴリ： Next.js

タグ： #Three.js#R3F#Shader#Leva#WebGL

[Next.js #11] FBM地形を削って“動く湖”を作る：反射・雲ドーム・水シェーダーの完全統合

2026-02-10 | lain

FBMノイズで生成した地形を“くぼませて湖を作る”実装を解説。水面のFBM波シェーダー、雲ドーム、Reflector鏡面エフェクト、プレイヤー移動まで統合した“ひとつの世界”をR3Fで構築する。

カテゴリ： Next.js

タグ： #three.js#r3f#glsl#fbm#shader#noise#terrain#water

[Noise 入門 #03] ノイズを設計する5つのパラメータ（Frequency / Amplitude / Octave / Lacunarity / Gain）

2026-02-10 | lain

Perlin・Simplex・FBM すべてに共通する“ノイズの設計パラメータ”を体系的に理解する回。周波数・振幅・オクターブ・ラキュナリティ・ゲインの5要素を押さえることで、ノイズの世界が一気に読み解けるようになる。

カテゴリ： Procedural

タグ： #Noise#Shader#Three.js#Mathematics#Procedural Generation

カテゴリ：Three.js