WebGL / Three.js

WebGL / Three.jsに分類されるWeb表現技法9件。回転3Dトーラスノット、パーティクルフィールド、ワイヤーフレーム地形、インタラクティブ立方体など。ライブデモとコピーできるコード付き。

Three.jsの標準マテリアルと三点照明で質感を出した回転オブジェクト。製品紹介やヒーローセクションの主役要素に使えます。

数千の点をTHREE.Pointsで一括描画し、マウスで視点が緩やかに動く粒子空間。背景演出やランディングの没入感づくりに向きます。

平面メッシュの頂点を正弦波で変位させて波打たせるレトロな立体地形。シンセウェーブ調のビジュアルやダッシュボード背景に最適です。

ポインタのドラッグで回転し、離すと慣性で滑らかに減速する6色立方体。製品の3Dプレビューや操作デモのUI部品として活用できます。

頂点カラーで上下2色を補間し、継ぎ目のないグラデーションをまとった球体。ブランドカラーの象徴やヒーローのアクセントに使えます。

らせん上に球を並べ横棒で対を結んだ回転する二重らせんモデル。科学・医療・バイオ系サイトのキービジュアルに向きます。

頂点を法線方向に呼吸させたワイヤー二十面体を、加算合成の光の粒で包んだ幻想的な造形。テック系やAIプロダクトの象徴ビジュアルに最適です。

フルスクリーンの板ポリにフラグメントシェーダーで描く、時間で流れるグラデと簡易ノイズの背景。マウスで色相が微妙に変化します。ヒーローや背景演出に最適です。

フレネル項で縁だけが光るシェーダーマテリアルの球が回転。内側は暗く縁が明るいリムライト風で、暗い背景に映えます。テック系の象徴ビジュアルに向きます。