Webの3D表現は、なぜ常に「大げさ」なのか
15年前、リッチなWeb体験を作るために私たちはActionScriptと格闘していた。やがて時代はWebGLへと移り変わり、Three.jsのような偉大なライブラリの登場によって、ブラウザ上の表現力は爆発的に広がった。だが、Web開発の現場において「ちょっとした3D」を扱う際の心理的ハードルは、驚くほど当時から変わっていない。
例えば「自社プロダクトのロゴを、ヒーローエリアでゆっくり回転させたい」という、ごくありふれた要望があったとしよう。ただそれだけのために、私たちはCanvasを用意し、シーンを作り、カメラの画角を決め、環境光やディレクショナルライトを配置し、マテリアルを調整しなければならない。React Three Fiberの登場で宣言的に書けるようになったとはいえ、やはり3Dプログラミング特有の「儀式」からは逃れられないのだ。
2Dの延長線上で3Dを扱うという最適解
そんな「大げさな3D」に対する鮮やかなアンチテーゼとして現れたのが、renatoworksによる「3dsvg」だ。このライブラリが突き詰めたのは、極限まで削ぎ落とされた開発体験である。ベクターデータであるSVGを押し出し（Extrude）、あらかじめ用意されたマテリアルとアニメーションを適用する。たったそれだけのことを、たった1つのReactコンポーネントで完結させている。
import { SVG3D } from "3dsvg";
export default function HeroSection() {
return (
<SVG3D svg="/logo.svg" material="gold" animate="spin" />
);
}ライトアップも、カメラワークも、ジオメトリの計算も、すべてはコンポーネントの裏側に隠蔽されている。利用するフロントエンドエンジニアは、Z軸の概念すら意識する必要がない。これは単なるラッパーではなく、「2Dアセットをそのまま3Dとして振る舞わせる」という明確な設計思想の産物だ。
GUIとコードのシームレスな往復
このプロジェクトが真に優れているのは、npmパッケージとしての提供にとどまらず、Next.jsで構築されたビジュアルエディタ（3dsvg.design）をMonorepo内に内包している点だ。
ブラウザ上のエディタに手元のSVGをドラッグ＆ドロップし、GUIでマテリアル（プラスチック、金属、ガラスなど10種類）や照明を微調整する。納得のいくルックが完成したら、そこから画像や動画、あるいは3Dモデル（GLB, STL等）として書き出すことができる。そして何より実用的なのが、現在のエディタの状態を完全に再現する<SVG3D>のJSXコードをクリップボードにコピーできる機能だ。
| アプローチ | ボイラープレート | 3D知識の必要性 | 得意領域 |
|---|---|---|---|
| Three.js | 大（シーン、カメラ、ライトの設定） | 必須 | フルスクラッチの高度な表現 |
| React Three Fiber | 中（宣言的だが設定レイヤーは多い） | 必要 | React内での柔軟な3D構築 |
| 3dsvg | 最小（コンポーネント1つ） | 不要 | ロゴやアイコンの即席3D化 |
デザイナーがエディタで見た目を作り、エンジニアがそのコードをそのままReactのコードベースに貼り付ける。WebGLの深い知識がなくとも、このシームレスなワークフローによって最高品質のインタラクティブな要素をWebサイトに組み込めるのだ。
抽象化の果てにあるもの
技術の進化とは、複雑なものをいかに隠蔽し、使い手の創造力だけを抽出するかという歴史でもある。3dsvgは、Webにおける3D表現から「専門性」という壁を取り払い、日常的なUIコンポーネントの1つへと昇華させた。この小さなコンポーネントが、今後のWebデザインにおける「少しだけリッチな表現」のスタンダードを変えていくかもしれない。
参考リポジトリ: renatoworks/3dsvg