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

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

## まずは作ったものを紹介
https://twitter.com/takebon14/status/1400348932274671621?s=20

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

## 実装手順

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

1. 自作モデルは作らなくていいから、とりあえず動かしたい人
1. 自作モデルを作成して、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」で以下の画面が表示されて、ぬるぬる動かせます。

![スクリーンショット 2021-06-03 16.25.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226905/88ac1703-46f9-580c-d500-19123290c33f.png)

ソース的にはこんな感じです。まんま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」のクリックだけで難しくなかったです。

https://spline.design/

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

![スクリーンショット 2021-06-03 16.40.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226905/08aa4c8a-6f6e-4ff2-d0a7-edac7035af4e.png)


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

![スクリーンショット 2021-06-03 16.45.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226905/fdcc8ca9-3862-9abb-abe5-6f9396eef330.png)

### 作成した３Dモデルをexport

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

![スクリーンショット 2021-06-03 16.47.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226905/1205703f-f3a5-14be-b62b-d2db702e9eab.png)



![スクリーンショット 2021-06-03 16.47.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226905/75ee1e2b-8f87-56c9-3804-bc03bddfb826.png)

#### 作成された３Dモデル

https://my.spline.design/airplane-d369decdf14902501f8c46fa4fa24536/

※多分このモデルが見れるのは有効期限があると思います。　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/](https://www.ihakayo.com/)