react-splineを使って、自分で作った3Dモデルを動かしてみた。

ふと検索したら「react-spline」というライブラリがある事を知ったので、触ってみます。
また、これが qiita初投稿です。書き方が微妙かもしれませんがご了承下さい。

まずは作ったものを紹介

localで動いているのが分かると思います。
もともと３Dモデルが用意されていたのですが、
ちょっとだけ手を加えて右翼の支柱を２本取っておきました。

実装手順

2ステップで説明していきます。
「２」はモデル作成の方法と、作成したモデルを取り込む手順です。
私は３Dモデル作成は詳しく無いので、動画のとおり　棒を２本無くしただけです。

1. 自作モデルは作らなくていいから、とりあえず動かしたい人
2. 自作モデルを作成して、reactに組み込みたい人

1.自作モデルは作らなくていいから、とりあえず動かしたい人

早速説明していきます。でライブラリをクローンしてきます。
クローンしたらexampleフォルダに入って、npm iです。

git clone https://github.com/utkarshdubey/react-spline.git
cd react-spline
cd example
npm install (または、　yarn install)

あとは、npm install で完了です。

npm start (または、　yarn start)

動かすだけならこれで完了

うまくいけば　「localhost:3000」で以下の画面が表示されて、ぬるぬる動かせます。

ソース的にはこんな感じです。まんまreactですね。
「import { SPLINE_EXPORTED_SCENE } from './scene'」の部分でjson形式のモデルを読み込んでいるんですが、次の項目でその部分を作成していきます。

import React from 'react'
import { SPLINE_EXPORTED_SCENE } from './scene'
import { Spline } from 'react-spline'

const App = () => {
  return (
    <div>
      <div
        style={{
          backgroundSize: 'cover',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <h1 style={{ position: 'absolute', zIndex: 1, color: '#fff' }}>
          If you see this, react-spline works.
        </h1>
        <Spline scene={SPLINE_EXPORTED_SCENE} />
      </div>
    </div>
  )
}

export default App

2.自作モデルを作成して、reactに組み込みたい人

モデルの作成

ここからは「自作モデルを作成して、reactに組み込みたい人」編に突入です。

公式HPから「Spline」をダウンロードします。「download now」のクリックだけで難しくなかったです。

ダウンロードしたらこんな感じの画面になります。

赤部分をクリックして、少しだけモデルに修正を加えていきます。
私は、３Dモデルをいじるスキルは低いので、とりあえず大事そうな支柱を２本抜いておきました。

作成した３Dモデルをexport

これが簡単でびっくりしました。
以下はexportからブラウザで表示までの流れです。

作成された３Dモデル

※多分このモデルが見れるのは有効期限があると思います。　2021/6/3

作成したモデルをjson形式に変更する

「作成された３Dモデル」の最後に「scene.json」を付与します。

・json出力用URL
https://my.spline.design/airplane-d369decdf14902501f8c46fa4fa24536/scene.json

サンプルのモデルを自作モデルと差し替える

ダウンロードした「scene.json」を、元々ある「scense.js」と置き換えます。

この際に注意するのは、

• 「scene.json」と「scense.js」は拡張しが違う
• ダウンロードしてきた方は先頭に「export const SPLINE_EXPORTED_SCENE = 」が無いので付ける
• ダウンロードしてきた方は最後にセミコロン(;)が無いので付ける。

この状態でうまくいけば、自作の３Dモデルがローカルで表示されているはずです！

分からなかったこと

実際に動いている画面をみると一部モノクロになっており、色が反映されていない箇所があります。
その部分については、原因がわかりませんでした。
違うモデルだったら、大丈夫だったのかな・・

最後に

最近ブログを作成しました。reactにも触れているので良かったら見てみてください。

・いはかよ
https://www.ihakayo.com/