Three.js

2026-03-13 | lain

Three.js + MMD 時計アプリに、静止画壁紙に加えて mp4 の動画壁紙機能を追加。ドラッグ＆ドロップで IndexedDB に保存し、Wallpaper UI から選択、無音ループ再生、起動時復元、動画サムネ表示まで実装した記録。

カテゴリ： Next.js

タグ： #Three.js#JavaScript#IndexedDB#Video Texture#UI#MMD#Wallpaper

2026-03-13 | lain

前回作成した Procedural Biome Planet をベースに、外側へ Cloud Sphere を追加し、4D FBMノイズで流れる雲海を実装。雲の濃淡表現、地表への影フェイク、Atmosphere と組み合わせた“生きた惑星”表現を Three.js + GLSL で構築した記録。

カテゴリ： Next.js

タグ： #Three.js#GLSL#Noise#FBM#Procedural Generation#Planet#Shader

2026-03-13 | lain

Three.jsとGLSLを用いて、プロシージャルな惑星にFBMノイズを活用した「動く雲海」を実装。地形の上に雲の層を重ね、地表に影を落とすことで生きた気象システムを構築します。

カテゴリ： Procedural

タグ： #Noise#GLSL#Three.js#FBM#Shader

2026-03-12 | lain

Three.js製MMD時計アプリに設定UIを実装。アナログ時計・デジタル時計・壁紙・床シェーダー・MotionAssetsの各種設定をGUIから変更し、localStorage と IndexedDB で保存・復元できる構成を整備しました。

カテゴリ： Next.js

タグ： #Three.js#MMD#IndexedDB#localStorage#WebGL#GLSL#Shader#UI

2026-03-11 | lain

平面で触れるノイズ場を作った前回実装を球体へ拡張。SphereGeometry、Raycaster、GLSLを使い、球体表面にクリック波紋が広がるインタラクティブなノイズ惑星デモを作成。背景用スカイスフィアも加え、触れる3D世界として整理します。

カテゴリ： Next.js

タグ： #Next.js#Three.js#GLSL#Shader#Raycaster#SphereGeometry#Noise#Interactive#WebGL

2026-03-11 | lain

Three.jsのSphereGeometryとRaycasterを用い、3D空間上のプロシージャルな惑星を生成。マウス操作で局所的に地形を歪ませ、OrbitControlsで探索するインタラクションの実装手法を解説します。

カテゴリ： Procedural

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

2026-03-10 | lain

Three.js + MMD + WebXR系アプリに、モデルZIPのドラッグ＆ドロップ取込、Blob変換、IndexedDB保存、モデル一覧、壁紙サムネ一覧、削除UIを実装。ローカルアセット管理基盤を整備した記録。

カテゴリ： Next.js

タグ： #Next.js#Three.js#MMD#PMX#IndexedDB#JSZip#Blob#WebXR#Quest2#Asset Management

2026-03-10 | lain

Three.jsとGLSLを使い、Raycasterで取得したマウス位置をもとに局所的なDomain Warpingを発生させる“触れるノイズ場”を実装。PlaneGeometry上の頂点変形と色設計を組み合わせ、鑑賞するノイズから体験するノイズへ発展させる。

カテゴリ： Next.js

タグ： #Next.js#Three.js#GLSL#Shader#Raycaster#Domain Warping#Noise#Interactive Art#WebGL

2026-03-10 | lain

第4集「Three.js編」が開幕。Raycasterを用いてマウスの動きをGLSLへ伝達し、ユーザーの操作に呼応して空間が歪む「触れるノイズ」の実装手法を解説します。

カテゴリ： Procedural

タグ： #Noise#Three.js#GLSL#WebGL#Interaction

カテゴリ：Three.js