Next.jsでThree.jsをサクッと動かしてみる

はじめに

Three.jsの技術を習得した3次元的なUIを作成できるフロントエンジニアは今後非常に重宝されると思われるため、先んじて技術をキャッチアップしていこうと思っています
Three.js自体はJavaScriptを生のまま書く前提のライブラリのため、フロントエンドのフレームワークではまた書き方が変わってくるため、そのままの形でのThree.jsの導入は現実的ではないとされているのですが、Next.js(React)にはそこをサポートしてくれるライブラリがあるとのことだったので、サクッと動かしてみたのですが、かなり簡単に使用できて感動したので、その使い方を紹介します

Three.js とは?

Three.jsを知らない人向けに一応補足すると、3次元的なUIを作ることができるライブラリです
大きな特徴としてJavaScriptのライブラリのため、Webアプリケーションとの相性が非常によいというのが最大の特徴です
これまでは3次元的なUIはUnityなどで作られ、ゲーム業界でしか長らく使われてこなかったですが、今後はVRの進展に伴って通常のWebサービスにも3次元的な続々と導入されていくことが期待されています
その一翼を担うと期待されているのが、Three.jsです

この説明でイメージがわかない人は、three.jsの公式ドキュメントを見たり、ドキュメントに案内されているLive exampleにアクセスしてまずは動きを確かめてみるのがいいでしょう

Next.jsの導入

まずはNext.jsを導入しましょう
こちらを参考に導入してください
Next.jsのプロジェクトができていてTypeScriptが導入できている前提で話を進めます

導入方法はこちら

Three.jsの導入

react-three-fiberというReact用のライブラリがあるのでこちらをインストールします
ちなみにdreiというライブラリもあるようで、react-three-fiberに満足できなければこちらを試してみるのもよさそうです
では、以下のコマンドで必要なライブラリをインストールしましょう

npm install three @types/three @react-three/fiber

さて、Next.jsとTypeScriptと上記のライブラリがインストール出来たらpages/index.tsxを以下のように書き換えてみましょう

pages/index.tsx

import * as THREE from 'three'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'

function Box(props: JSX.IntrinsicElements['mesh']) {
  const ref = useRef<THREE.Mesh>(null!)
  const [hovered, hover] = useState(false)
  const [clicked, click] = useState(false)
  useFrame((state, delta) => (ref.current.rotation.x += 0.01))
  return (
    <mesh
      {...props}
      ref={ref}
      scale={clicked ? 1.5 : 1}
      onClick={(event) => click(!clicked)}
      onPointerOver={(event) => hover(true)}
      onPointerOut={(event) => hover(false)}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

export default function Home() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Box position={[-1.2, 0, 0]} />
      <Box position={[1.2, 0, 0]} />
  </Canvas>
  )
}

そして実行

yarn dev

すると以下のようば箱オブジェクトを生成したものが回転しているものが表示されました

なお、ジオメトリの引数を変えるとちゃんとオブジェクトの形が変わることが確かめられたりするので後はいろいろ試してみてください
例：<boxGeometry args={[2, 1, 1]} />

以上のように簡単にThree.jsを使い始めることができました

おわりに

Next.jsを使えば思ったよりもかなり簡単にThree.jsを使うことができて驚きました
元々はVue.jsで開発を行おうとしていましたが、Three.jsのVue用ライブラリがVue3.0に対応していないとのことだったので、3次元的なUIを作る場合はNext.js（React）一択になるかと思います(Angularは調べてないです)
とにもかくにもThree.jsは非常に楽しいですね
今後もThree.jsの使い方を調べて発信していこうと思いますのでよろしくお願いします