こんにちは。KENTEMフロントエンドエンジニアのM.Sです。
3Dというのは人間を惹きつけるものがありますよね。
ゲームや映画から、ソフトウェアやWebサイトまで。
Webサイトで商品などをぐるぐる見渡せるエリアがあると、ついぐるぐるしてしまいます。
そこで今回は、普段Reactばかり触っている私でも3Dを扱うことができる、ReactThreeFiberについてご紹介していきたいと思います。
ReactThreeFiberとは？
JavaScriptには、Three.jsという3Dオブジェクトをレンダリングするためのライブラリがあります。
Three.jsはWebGLを利用したJavaScriptベースの3Dレンダリングライブラリです（WebGLの説明は割愛）。
そして、ReactThreeFiberは、Three.jsの機能をReactの簡潔な構文で利用可能にするライブラリです。
インストール
下記コマンドを入力します。
npm install three @react-three/fiber @react-three/drei @types/three
Codepenで動かす場合は、コード上部に下記を追加します。
import React from 'https://esm.sh/react@18.2.0'; import ReactDOM from 'https://esm.sh/react-dom@18.2.0'; import { Canvas,useFrame } from 'https://esm.sh/@react-three/fiber@8.16.1'; import { Box,OrbitControls } from 'https://esm.sh/@react-three/drei@9.105.4';
Codepenの環境構築はこちら↓の記事に非常に助けられました。
CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト３ 3Dモデルアニメーション表示｜siouxcitizen
オブジェクトを表示してみる
ブログ上で動かして欲しかったので今回はCodepenを使って実装しました。
とりあえず静止している立方体を表示してみます。
See the Pen react-three-fiber1 by Shogo Maehata (@shogo61) on CodePen.
OrbitControlsでカメラ操作をしてみる
OrbitControlsを追加するだけでカメラ操作ができるようになります。
ドラッグでカメラ操作できます。
右ドラッグで視点のずらし、ホイールでズームできます。 （Codepen上ではできなさそう。。。）
See the Pen Untitled by Shogo Maehata (@shogo61) on CodePen.
ついでに弊社のロゴも表現してみます。見れば見るほど可愛いですね。
See the Pen react-three-fiber1 by Shogo Maehata (@shogo61) on CodePen.
光を操る
ReactThreeFiber（Three.js）には多くの種類の光が用意されています。
その中でも今回は３つの光をご紹介します。
- 環境光：
<ambientLight /> - 点光源：
<pointLight /> - １方向：
<spotLight />
１つずつみていきましょう
ambientLight
周囲の光を定義します。
ここまででも使っているのでCodepenは割愛します。
intensityを０にしたらオブジェクトが真っ黒になってしまいます。
pointLight
全方向に光を放つ点光源を定義します。
左側から光が当たっているのがわかるかと思います。
See the Pen Untitled by Shogo Maehata (@shogo61) on CodePen.
spotLight
その名の通りいわゆるスポットライトです。
真上から細い光が当たっているのがわかるかと思います。
See the Pen Untitled by Shogo Maehata (@shogo61) on CodePen.
3Dファイルを読み込む
もちろん外部の3Dファイル（glb,gltf）を読み込むこともできます。
今回はThree.jsのサンプルであるSFチックなヘルメットを読み込んでみました。
See the Pen Untitled by Shogo Maehata (@shogo61) on CodePen.
プロの作品達
公式ドキュメントにはプロ（公式）の渾身の作品達がたくさん掲載されています。
オシャレなサイトからゲームのようなものまであり、ReactやJavaScriptの可能性を感じます。
CodeSandboxですぐに動かせるのでよかったら覗いてみてください！
おわりに
KENTEMでは、様々な拠点でエンジニアを大募集しています！
建設×ITにご興味頂いた方は、是非下記のリンクからご応募ください。
recruit.kentem.jp
career.kentem.jp
