![見出し画像](https://assets.st-note.com/production/uploads/images/124053891/rectangle_large_type_2_9187cb34bd30f1195408785df2311f96.jpeg?width=1200)
Splineを使ってみる準備編
さて。figmaの記事ばかり書いてて飽きてきました。
今日はタイトルの通りSplineを使ってみたいと思います。
スプライン。
3DソフトでWEBでも動く、共同編集ができる。FigmaライクのUIでカンタン。フリーで使える。他のソフトで編集できるように書き出せるという夢のようなソフトらしくこれは触ってみましょうという話です。
ワタシ、大昔にMAYAを使って挫折。最近Blenderを使って基本的なモデリングまでは作れるようになりましたがヒト型のモデルを動かしたりするとこで関節や服がめり込んだりして挫折(休憩)。3Dってとにかくめちゃくちゃ難しいんです。
完全に主観ですが。
Photoshopの難度を基本機能を使えるようになるまでを10、
業務レベルになるまでを100
としましょう。
Illustrator 基本5 業務70
Figma 基本2 業務50
After Effects 基本50 業務500
統合型3D 基本500 業務1000
って印象です!3Dは桁違いに難しい。
MAYAとかハイエンド系を端から端まで全部使いこなしてるヒトって存在してるんですかね?ハリウッドとかには。
しかも出来上がった3Dを3Dソフト上で眺めても仕方ないのでゲームにしたり映像にしたりWEBに埋め込んだりとなるとまた別のソフトやプログラムの技術が関わってきて気が遠くなります。
このSpline非常に直感的なUIでカンタンにWEBに埋め込めるコードを吐き出してくれるそうで。これは触らない手は無いなと。超リアル3DみたいのはWEBデザインするうえではそんな需要もなさそうですしちょっとアクセント程度に挿入する程度にでも使えると提案の幅も広がりそうです。
いまのところ英語しかなさそうですがそんな難しい感じではなさそうです。
早速みていきましょう。
WEBでも使えますがせっかくアプリがあるので落としてみます。
アカウントを作ります。Googleでログインできますが色々聞かれます。
アーティストなのかデザイナーなのかとかチームなのか個人なのかとかよくある他愛のないやつです。
有料版があって機能拡張されるようですがとりあえず無料でも使えるようなのでMybe laterという曖昧な回答をしておきましょう
![](https://assets.st-note.com/img/1702117710065-cUtoVp2QcC.png?width=1200)
![](https://assets.st-note.com/img/1702118261076-WeGxMt3ZVf.png?width=1200)
アプリを開いて右上の+New Fileから新規ファイルを作ります。
![](https://assets.st-note.com/production/uploads/images/124065673/picture_pc_e5b26509c5cfb44bf5ceb44f49d1d978.gif?width=1200)
3Dソフトではおなじみの操作感です。Optionを押しながら左クリックホールドしてマウスを操作するとグリグリ動きます。
この裏返ると消えるのは表にしか情報がないという概念でしてデータを軽くするために見えないとこは存在させないっていう考えです。昔のマリオカートとかで極端にカートが画面に寄って貫通すると最前面にあるものが消えたりしましたよね。あれです。
四角から線が中央に向かって伸びてるのは光源ですかね?
UIは3D系の恐ろしく複雑な画面ではなく左にレイヤー、右に操作という非常にFigmaライクでとっつきやすそうな画面です。とりあえずこのデフォルトのペラペラを書き出してみましょう
![](https://assets.st-note.com/img/1702119068528-3XqaniGjgP.png?width=1200)
![](https://assets.st-note.com/img/1702119353558-87K8zVfvTh.jpg?width=1200)
一番上のパブリックURLってとこからコードを取得してブラウザに貼り付けてみます。
![](https://assets.st-note.com/production/uploads/images/124067598/picture_pc_ce90def212388d95b913903e1a892098.gif?width=1200)
動きました!見ての通りソフト上ではなくブラウザで動いてます。これは面白い!
試しにライブラリからヘイデイみたいな完成モデルサンプルを読み込んで同様にJPGとブラウザでみてみます。
![](https://assets.st-note.com/img/1702120022103-Rsybkvfv3q.jpg?width=1200)
![](https://assets.st-note.com/production/uploads/images/124068391/picture_pc_55946bb5b29eb29e10ff50aa7506b776.gif?width=1200)
結構サクサク動きます。このくらいのものをWEBに簡単に埋め込めるとなるといいですね。
次回実際なにか作ってみます