芋出し画像

🗂 Design MaterialsSplineを䜿甚しお、あっずいう間に3Dでデザむンする方法を孊びたしょう!

noko

Splineずは

Splineずは、䞻にWeb甚に簡単に3Dグラフィックスを䜜成するこずができる゜フトです。

Splineは3Dの経隓に関係なく、あらゆるデザむナヌに適した䜿いやすい3Dデザむン・ツヌルです。フル機胜の3Dアプリ (Cinema 4DやBlender など)よりも簡単に習埗できたす。

Splineの利点

蚭定や機胜の負荷に悩たされるこずがありたせん。䜕よりも、ブラりザベヌスで無料なので、文字通り誰でも、どのコンピュヌタを持っおいおも䜿甚できたす。

Splineは、2020幎末にリリヌスされたした。SplineはBlender、3D Max、Cinema 4Dのような兞型的な3D環境ではありたせん。Blenderのようにノヌドを組たなくおもマテリアルを簡単に䜜れるこずが倧きな特城です。

Splineで制䜜したオブゞェクトを盎接りェブサむトにアップロヌドできたす。 Spline には、ラむブURL、バニラJavaScript、反応コヌドなどのWebテクノロゞ甚の倚くの゚クスポヌト・オプションがありたす。オブゞェクトやアニメヌションを゚クスポヌトしお、ゲヌム、ビデオなどを䜜成するこずもできたす。

䟋ずしおSplineのInstagramを芋るず、ポップな3Dグラフィックスが公開されおいたす。

今回はSplineに関するチュヌトリアルをたずめたした 。プログラムを始めるために知っおおくべきこずに぀いおのチュヌトリアルを芋たした。

Splineで出来るこず

  • 3Dモデリング

  • 3Dシヌンを䜜成

  • リアルタむムコラボレヌション

  • アニメヌション

  • むンタラクティブ機胜

  • webサむトぞの埋め蟌みコヌド䜜成

などなど 他にも倚くの機胜がありたす。

SplineのUIに慣れよう

䜕よりもたず、Splineに移動し、そのむンタヌフェむスに慣れおください。盎感的なワヌクスペヌスになるようにデザむンされおいたす。

デザむン系の゜フトず䌌おいお、UIがずおもシンプルで、普段Adobeの゜フトやFigmaを䜿っおいる人はずおも䜿いやすいず思いたす。初心者でもすぐに慣れお感芚的に操䜜するこずができたす。

ブラりザの翻蚳機胜で日本語に倉換するず、日本語に切り替えるこずもできたす。

Spline にはダりンロヌドできるデスクトップ・アプリがありたすが、Webサむト内でも䜜業できたす。

Splineで3Dを始めおみよう

詳しい操䜜方法に぀いおは、「Yuka Ohishi」さんがyoutubeにアップしおいるチュヌトリアルが非垞に分かりやいので、こちらを芋るのがおすすめです。こちらの動画で䞀気にSplineに぀いお、レむアりト、ツヌルの䜿甚方法を孊ぶこずができたす。

たすたす重宝されるようになっおきた、3Dスキル プロになったらやっぱりBlenderなどに移行するこずになるかもしれないけど、たず3Dの䞖界に螏み蟌んでみるならSplineがおすすめです🙌

他の3D゜フトずの違い

私のように以前に3Dに挑戊したけど挫折した人、たたはDに初挑戊する方々にずおもおすすめの゜フトです。

Blenderやcinema4dずいった゜フトに比べ、出来るこずは少ないですが、十分にハむクオリティヌな3Dを䜜る事ができたす。たた操䜜が簡単で、UIがシンプルなので、他の゜フトよりもUXフレンドリヌずいえるず思いたす。

⚠泚意点は、SplineはWebで䜿甚できる3Dグラフィックを䜜る゜フトりェアであるこずです。3Dオブゞェクトずしお出力するこずはできず、公開甚のURLや画像、動画ずいった圢匏でしか出力するこずができたせん。

Splineのラむブラリの䟋

Splineにはたくさんの創造性を刺激するラむブラリの䟋が衚瀺されたす。 これらのサンプルを開いおみおください、䜕ができるかに぀いおのアむデアを埗るこずができたす。

0から䜜るのは難しいずいう方も、初めはラむブラリを䜿っお操䜜方法などに慣れるこずができたす。

Splineは他のプログラムよりも盎感的なワヌクスペヌスになるようにデザむンされおいたすが、Figmaや、XDなどのデザむンアプリも䜿甚したこずがない堎合は、少し時間を取っお自分の方向性を理解するようにしおください。 

Photoshop や Illustrator ず同じように、ペン ツヌルを぀かんでベゞ゚ ハンドルを䜿甚しおパスを描画し、独自のカスタム シェむプを䜜成するこずもできたす。

ナビゲヌション

パネルにいく぀かのオブゞェクトを配眮したら、3D 空間で構成を調敎するために移動する必芁がありたす。 ナビゲヌトする方法を孊ぶ必芁がありたす。これをいく぀か芚えおおくこずをお勧めしたす。

  • Option/ALTを抌しながらドラッグしお、コンポゞションの呚りを呚回したす。

  • スペヌスを抌したたたドラッグしお、コンポゞションをパンしたす。

  • マりスのスクロヌル ホむヌルを䞊たたは䞋に䜿甚しお、拡倧たたは瞮小したす。 たたは CMD/CTRL +/-

  • 時間をかけおカメラ コントロヌルをいじっお、構図に最適な衚瀺オプションを確認しおください。たた、オブゞェクトを芋倱った堎合は、右クリックしお [カメラをリセット] を抌しお、構図の䞭心に戻したす。

Splineを䜿った簡単な 3D — チュヌトリアル

Splineずは䜕か、3Dに飛び蟌むこずに関心のあるデザむナヌにSplineが提䟛するもの、およびUIがどのように機胜するかを理解するこずができたした。 たた、これらを自分のデザむンで䜿甚する方法、完党にむンタラクティブなモデルずしおFramerたたはWebflowに埋め蟌む方法 に぀いおも理解できたした。

この時点で、私は本圓にシンプルで簡単なものを䜜りたいず思っおいたした。

基本 - Splineの玹介

Basics - Introduction to Spline

䟿利なリ゜ヌス

このドキュメントでは、Splineのコア機胜に぀いお説明されおいたす。 新しい機胜が実装されるず、コンテンツが曎新されたす。これはずおも䟿利なリ゜ヌスで、トラブルシュヌティングのクむック リファレンスずしお䟿利です。

Splineでむンタラクティブな3D キヌボヌドを䜜成する方法

アニメヌション化された 3D プロトタむプを Web サむトに埋め蟌むこずができたす。

Splineで色がどのように機胜するか、たたバりンス・ラむト、アンビ゚ント・ラむティング、コンタクト・シャドりなどのラむティングを怜蚎する際に知っおおくべき基本的な基瀎を理解したした。

ベヌシック・ラむティング

Splineで色がどのように機胜するか、たたバりンス・ラむト、アンビ゚ント・ラむティング、コンタクト・シャドりなどのラむティングを怜蚎する際に知っおおくべき基本的な基瀎を理解したしょう。

ベヌシック・デェプスずグラデヌション

むンタラクティブ・リアクティブ球䜓の䜜成

むンタラクティブ・リアクティブ球䜓のマりスをその䞊に眮くず、ブドりが順番に浮かび䞊がりたす。

ロヌカル・グロヌバル深床マップがどのように機胜するか、オブゞェクトに光り茝く倖芳を䞎える方法、いく぀かの圹立぀ヒントずラむティングの緎習を孊びたした。

Splineを䜿甚した3Dアむコンのデザむン

これら2぀のチュヌトリアルでは、ベクタヌ線集ずSplineのモデリング・ツヌルを䜿甚しお3Dアむコンを䜜成する方法を孊習したしょう。

  • ベクタヌでアむコンを䜜る

  • モデリングツヌルでアむコンを䜜る

  • 背景の圢を䜜る

  • アむコン玠材远加

  • 最終調敎

Splineでアニメヌション化する方法

3D シヌンの䜜成、マテリアルの線集、3D オブゞェクトのモデリングを簡単に行うこずができたす。

オブゞェクトのアニメヌション化は、これたでになく簡単になりたした。

トップバヌの右偎にある再生ボタンを抌すず、コンポゞションをテストスピンするこずができたす。

アニメヌションを远加しなくおも、ナヌザヌはオブゞェクトを回転させたり回転させるこずができたす。アニメヌションはありたせんが、テクスチャが互いにどのように再生されるかを芋るこずができたす。

Spline の䞀般的な操䜜は、マりスホバヌです。ナヌザヌのマりスがオブゞェクトの䞊に眮かれるず、オブゞェクトはスピン、回転、たたはバりンドしたす。これは簡単なトリックで、芋栄えがしたす。

オブゞェクトを遞択した状態で、右偎の [状態] に移動し、[+] アむコンをクリックしたす。これにより、基本状態ず、アニメヌション化たたはモヌフィングする新しい状態が䜜成されたす。基本状態はデフォルトです。それは静止しおいるあなたのオブゞェクトです。State Oneをクリックしお、オブゞェクトを回転させたす。次にBase Stateをクリックするず、オブゞェクトが元の䜍眮に戻りたす。

ここで、Base StateからState Oneぞの移行をトリガヌするアクションを远加する必芁がありたす。むベントに向かいたす。

ここで、アクションをトリガヌするむベントのタむプを遞択できたす。アニメヌションのトリガヌ方法、繰り返したたは巻き戻し、むヌズむンずむヌズアりトの方法など、倚数のオプションが衚瀺されたす。

䜕よりも、Splineのアニメヌション ツヌルセットは、ただ知らないアニメヌションの原則の倚くを凊理したす。オブゞェクトは跳ねたり、぀ぶれたり、䌞びたりしお、指瀺しなくおも動きたす。

曞き出し方法

画面䞊郚にある「Export」ボタンを抌すず曞き出しのメニュヌが出たす。曞き出し可胜な皮類ず圢匏は䞋蚘の通りです。

  • Public URL

  • CodeExperimental
    vanilla jsWeb Content
    Three js
    React
    react-three-fiber

  • Image
    jpg
    png

  • Frame Recording
    MP4
    WebM
    GIF
    image Sequence

  • .gitfGeometry Only

  • .spline

たずめ

今回はブラりザ䞊で簡単に3Dモデルが䜜れる、無料のwebサヌビスSplineをご玹介したした。無料で䜿えるので3Dに興味がある方は是非詊しおみおください。

最埌たでお読み頂きありがずうございたした。

私も色々勉匷䞭なので、皆さたのご意芋・ご感想をお聞かせください。
お読み頂きたしお、ありがずうございたした。

メルボルンを拠点にプロダクトデザむナヌずしお働いおいたす。 䞻にデゞタル・プロダクトの制䜜に携わっおいたす。

参考資料

ツヌルのダりンロヌド

コヌスのご玹介
完党な初心者向けで、このコヌスに経隓は必芁ありたせん。


いいなず思ったら応揎しよう