Splineを使ったらWebに3Dグラフィックを取り入れるのが簡単だった

これは何

Splineという3D用のデザインツールを使ってみたら良い感じだったので書いた記事です。
ツールの紹介もしつつ、できるだけ簡単に、Webサイトに3Dグラフィックを取り入れるまでの流れを書いていきます。

完成品

サンプルサイトをこちらからご覧いただけます。

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のパネルからエクスポートしましょう。

個人的には以下の設定をおすすめします。

そして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の目指しているのはリッチな描画ではないような気がします。

まとめ

途中若干脱線してしまいましたが

1. GUIで簡単に3Dグラフィックを作れる
2. 作ったグラフィックをボタン1つでWeb仕様にエクスポートできる
3. 埋め込めば完成

簡単にWebに3Dグラフィックを取り入れられるSplineでした。