フロントエンド & UI
WebGL 3D Object
PBR マテリアルと本物の影を持つ、光の当たった Three.js のヒーローメッシュ。
概要
面取りしたヒーローオブジェクト 1 つのための Three.js レシピ。二十面体ジオメトリ、MeshStandardMaterial、パースのカメラ、キーライトとリムライト、影の平面、ゆっくり浮遊する回転。
Create a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion. Use when a page needs a faceted 3D hero obje
デザインにとっての意味
- 本物のジオメトリとライティングが、CSS の変形では偽装できないエッジ、ハイライト、影を生む。
- マテリアルのプリセットが、上質な金属、やわらかなセラミック、発光がかったテック調をカバーする。
- 動きはゆっくりの回転と小さな上下だけに抑えられ、コピーが主役のまま保たれる。
カバーする内容
- Rules
- HTML and CSS
- Three.js object recipe
- Material defaults
- Lighting defaults
- Quick checks
インストール方法
WebGL 3D Object
-
リポジトリをクローンする。
git clone https://github.com/MengTo/Skills -
スキルファイルの場所を Codex に指定する。
agent-skills/web-design/webgl-3d-object/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
正方形の canvas シェルを加え、その上で Three.js の初期化処理を実行する。
-
color、metalness、roughness、emissive をブランドのムードに合わせて設定する。
-
リサイズ処理と、ジオメトリ、マテリアル、レンダラーの後片付けを確認する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗ほかの Codex デザインプラグイン
フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 
デザインシステム できること Stitch Design Taste DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-mobile 上質なモバイルアプリの画面フローを、コードではなく画像として生成する。 次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。