テクノロジー

three.js + React で3Dを表示する(ブラウザに)

おはぐろ氏's icon'
  • おはぐろ氏
  • 2020/03/12 22:07

three.jsは、ブラウザ上で3Dデータを扱うことのできるJavascriptライブラリです。これを使えば、ホームページなどにインパクトのある3Dキャラクターを配置したり、オリジナル3D生物をマウスでグネグネ動かしたりできるようになります(ちなみに私の"ひよこ"アイコンも実は3Dで作ってあります)。

 

今回はこの美しきthree.jsと、フロントエンド界の帝王Reactを組み合わせて、ブラウザ上に3Dを表示させてみたいと思います。Reactはライブラリが豊富にあり、このthree.jsを扱えるライブラリもあるのでそれを使っていきます(後述)。

 

 

まずは3Dを作成する

とりあえず、何かしらの方法で3Dを作ります。

個人的にオススメなのはモデリングソフトの『Blender』です。無料なのに機能が非常に多く、これがあれば何にでもなれると思います。しかし、機能が多いぶんユーザーインターフェースがゴチャついているという欠点があり、ある程度の慣れが必要です。ただ、最近(というか半年前くらい?)バージョンアップしてv2.8になり、だいぶ操作しやすくなった印象です。慣れてくると「これが無料でいいのか!?」と感動すること請け合いです。

Content image

 

作成したら、glTFという形式でエクスポート(出力)します。

glTFというのは3Dファイルのフォーマットの一種で、簡単に言うと使い勝手のいいやつです。ファイル拡張子には .gltf.glb という二つがありますが、.glb の方がファイルサイズを低く抑えられるのでこっちが推奨らしいです。

出力先はReactプロジェクトのpublicディレクトリにしましょう(他のディレクトリだとReact側で認識してくれないらしい…)。

 

 

3DをReactで表示させる

※Node.jsとnpm(もしくはyarnなど)とReactがインストールされていて、かつReactプロジェクトで何かしら表示するところまでいっている前提で進めます。

まずは必要なライブラリをインストールしましょう。

npm install three react-three-fiber

ライブラリ名からも分かる通り、 react-three-fiber がthree.jsとReactを繋げてくれます。

 

これを使ってReactのプロジェクトに実装していきましょう。


import React, { Suspense } from 'react'
import { Canvas, useLoader } from 'react-three-fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'


const LoadModel = () => {
	const gltf = useLoader(GLTFLoader, "/sample.glb")
	return (
		<primitive object={gltf.scene} dispose={null} />
	)
}

const UseModel = () => {
	return (
		<Suspense fallback={null}>
			<LoadModel />
		</Suspense>
	)
}

const App = () => {
	return (
		<Canvas>
			<mesh>
				<UseModel />
			</mesh>
		</Canvas>
	)
}

LoadModelコンポーネントで3Dファイルを読み込んでいます。useLoader()の第一引数にthree.js標準のモジュールGLTFLoaderを指定して、第二引数には作成した3Dファイル(.glb)を指定しています(前述しましたが、publicディレクトリ内のファイルじゃないとエラーになります)。

UseModelコンポーネントで実際に表示させるための準備のようなことをしています。Suspenseは3Dモデルをロードしている最中に他のオブジェクトを代わりに表示しといてくれるモジュールです(公式によると現時点ではまだ実験的な機能だとのこと)。fallback={null} という箇所に本来であれば何かしらの3Dオブジェクトを入れますが、今回はシンプルに説明するためにあえてnullにしてます(つまり、ロード中には何も表示されない)。

そして最後のAppコンポーネントで表示させています。Canvasというのが3dを表示させるためのまさにキャンバスのような存在で必須です。

 

 

ブラウザで確認

さあ、これで準備は整いました!

 

npm start とかでローカルのサーバーを立ち上げて http://localhost:3000 にアクセスしましょう。

 

Content image

このようにブラウザ上に表示されます。

 

 

おまけでサタデーナイトな雰囲気も演出してみました。↓

Content image

 

 

コードを改めて眺めてみるとあっさりしていますが、 react-three-fiber の情報がそこまで多くないので実は結構苦戦しました。

 

ご自身のブログやホームページなどがある方は、スパイス的な位置づけで3Dを活用してみるというのもアリなんじゃないでしょうか。

Supporter profile iconSupporter profile iconSupporter profile icon
Article tip 3人がサポートしています
獲得ALIS: Article like 66.27 ALIS Article tip 32.22 ALIS
おはぐろ氏's icon'
  • おはぐろ氏
  • @hideckies
今になって花粉症になりました。

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
クリプト

約2年間ブロックチェ-ンゲームをして

Like token Tip token
61.20 ALIS
Eye catch
クリプト

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

Like token Tip token
121.79 ALIS
Eye catch
テクノロジー

オープンソースプロジェクトに参加して自己肯定感を高める

Like token Tip token
85.05 ALIS
Eye catch
クリプト

Bitcoin史 〜0.00076ドルから6万ドルへの歩み〜

Like token Tip token
947.13 ALIS
Eye catch
他カテゴリ

機械学習を体験してみよう!(難易度低)

Like token Tip token
124.82 ALIS
Eye catch
クリプト

17万円のPCでTwitterやってるのはもったいないのでETHマイニングを始めた話

Like token Tip token
46.60 ALIS
Eye catch
テクノロジー

なぜ、素人エンジニアの私が60日間でブロックチェーンゲームを制作できたのか、について語ってみた

Like token Tip token
270.93 ALIS
Eye catch
クリプト

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

Like token Tip token
159.32 ALIS
Eye catch
他カテゴリ

ALISのシステム概観

Like token Tip token
5.00 ALIS
Eye catch
テクノロジー

彼女でも分かるように解説:ディープフェイク

Like token Tip token
32.10 ALIS
Eye catch
クリプト

Uniswap v3を完全に理解した

Like token Tip token
18.92 ALIS
Eye catch
テクノロジー

iOS15 配信開始!!

Like token Tip token
7.20 ALIS