これは何
Splineという3D用のデザインツールを使ってみたら良い感じだったので書いた記事です。
ツールの紹介もしつつ、できるだけ簡単に、Webサイトに3Dグラフィックを取り入れるまでの流れを書いていきます。
いつの間にかベータ版が出ていたので、そちらも軽く記事にしました。
https://qiita.com/xrxoxcxox/items/8126a3183f31c9cb5497
完成品
Splineを触る前に
ここ数年デザイントレンドとして挙がる3Dグラフィックですが、正直ハードル高くないですか？
Webで3Dを扱いたいとなるとThree.jsをよく見かけると思いますが、陰影のついていない立方体をクルクル回すだけでもこのコード量です。
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
それに対してSplineでは、最も簡単なやり方ならソフト上で出力されたiframeを埋め込むだけで3Dグラフィックを導入できます。
カスタム性やパフォーマンスを追求できるものでは無いと思いますが、パパッと良い感じのものができてとても楽しかったので是非紹介してみようと思った次第です。
Splineの導入からWebに3Dグラフィックを取り入れるまで
インストール
公式サイトにアクセスして少し下に行くとTry the Alpha Releaseと書かれています。
そう、まだアルファ版のソフトです。
使用しているマシンにあわせてインストールを進めてください。
起動
インストール終了後、起動したら右上にある+ New Fileから新規データを作成します。
データの作成
画面が開けたらひとまず好きに色々なオブジェクトを配置してみましょう。
上部にあるツールバーから立方体や球、円柱、ピラミッドなど様々な形状のものを呼び出せます。
私はBlenderは多少触ったことがありますが、簡単に見える形状でも作るのは思ったより手間がかかるんですよね。
対してSplineの場合は幾何図形なら割と簡単に作ることができます。
雰囲気だけでオブジェクトを配置しても割とそれらしいものが出来上がるので適当に触るだけでも楽しいですよ。
今回は「できるだけ簡単に3DグラフィックをWebに取り入れる」がテーマなので、細かなツールの操作についてはスキップします。
公式のドキュメントに操作方法などがまとまっているので興味のある方はこちらをご覧ください。
エクスポート
データが完成したら、Publish & Shareのパネルからエクスポートしましょう。
個人的には以下の設定をおすすめします。
| プロパティ | 値 | 補足 |
|---|---|---|
| Type | Public URL | この設定で出てくるiframeを埋め込むのが多分1番簡単1 |
| Detail | Default | HighとかLowとか試したけど、つるんとした幾何形態ならあんまり差が分からなかった |
| Rotate | Yes | ドラッグしてグルグル回せるようになる、楽しい |
| Pan | Yes | これは正直どっちでも良い |
| Zoom | No | Yesにしているとスクロールとバッティングしそう（特にトラックパッド） |
| Logo | Show | 無料版ではHideは選べない |
そしてExportボタンを押すと、このようなダイアログが出るのでコピーしておきます。
HTMLに埋め込む
ここまで来たら後はもう簡単。
先ほどコピーしたiframeを任意のHTMLに埋め込むだけです。
HTMLとCSSをちょいちょいと整えたら完成です。
（最初に貼ったものと同じGIFです）
現状感じている良い点、イマイチな点
良い点
- ささっと作れる
- 全てをコードで書くよりは遙かにグラフィックを作りやすい
- 元から使える図形の数が豊富なので、組み合わせるだけでも絵になりやすい
- インターフェースが割ととっつきやすい
- できることが限られている分、3Dをやったことがない人でもなんとなく触れる気がする
- 今回は紹介していないけどアニメーション機能もあり、それも割と簡単
- エクスポートしたらすぐにWebに取り込める
- iframeにせよjsファイルでの書き出しにせよ、かなり早く「動く」状態を作れる
イマイチな点
- レンダリングの品質は高くない
- 簡単にできるように作られているから、の裏返し
- 3Dデータとしての書き出しはできない
- Web用に特化しているので、objなどの書き出しはできない
- なんか挙動がおかしい
- アルファ版だから？
-
command + Zで全く予期しない形状の変更がおこったり、カメラがぶっ飛んで謎の空間をさまよったりした
ちなみにレンダリングの質は、SplineとBlenderで似たようなシーンを作って比較したので分かりやすいと思います。
素材の質に差をつけるとか、映り込みを表現するとか、陰影全般の自然さとか……。
| Spline | Blender |
|---|---|
 |
 |
とはいえ「3Dが扱える」というだけであって、この両者を比較するのはナンセンスかもしれません。
Webデザインができるからといって、FigmaとPhotoshopを比較してもそもそもの土俵が違うように、Splineの目指しているのはリッチな描画ではないような気がします。
まとめ
途中若干脱線してしまいましたが
- GUIで簡単に3Dグラフィックを作れる
- 作ったグラフィックをボタン1つでWeb仕様にエクスポートできる
- 埋め込めば完成
簡単にWebに3Dグラフィックを取り入れられるSplineでした。
-
Web Contentの方が色々できるポテンシャルはありつつ、若干ハードルが高そうな気がしたので今回はiframeを使うやり方を紹介しています。 ↩