More than 3 years have passed since last update.

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

Last updated at 2021-06-03Posted at 2021-06-03

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

まずは作ったものを紹介

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

実装手順

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

自作モデルは作らなくていいから、とりあえず動かしたい人
自作モデルを作成して、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