2024.05.21 マークアップ

React Three Fiberで3Dモデルを読み込む

 


デモはこちら

React Three Fiber（R3F）で簡単な3Dアプリケーションを構築しました。
※モデルはBlenderkitより使用させていただいております。

3Dモデルのスクリーンの位置に<iframe>を設置することで、
まるで3Dモデル上でwebサイトを表示させているように描写することができます。
また、実際にシーン上でwebサイトを閲覧することもできたり、ページ内をドラッグすることでモデルを操作することが可能です。

React Three Fiber（R3F）ではReactのようにコンポーネントを並べてプロパティを記述していけばよいので、Three.jsでコードを記述するより圧倒的に手軽に3Dグラフィックスを構築することができます。

React Three Fiber（R3F）とは

R3Fは、ReactでThree.jsを使って3Dシーンを描画するためのライブラリです。
Reactはフロントエンド開発で非常に人気のあるJavaScriptフレームワークで、
Three.jsはWebGLを使って3Dグラフィックスをレンダリングするためのライブラリです。
R3Fは、この2つの強力な技術を組み合わせることで、Reactのコンポーネントベースのアプローチを使って3Dシーンを構築できるようにします。

デモのコード

index.jsx

import './style.css';
import ReactDOM from 'react-dom/client';
import { Canvas } from '@react-three/fiber';
import Scene from './Scene.jsx';

const root = ReactDOM.createRoot(document.querySelector('#root'));

root.render(
  <Canvas
    camera={{
      fov: 45,
      near: 0.1,
      far: 2000,
      position: [-0.4, 1.2, 4],
    }}
  >
    <Scene />
  </Canvas>
);

Scene.jsx

import {
  ContactShadows,
  Environment,
  Float,
  Html,
  PresentationControls,
} from '@react-three/drei';
import { useLoader } from '@react-three/fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

export default function Scene() {
  const model = useLoader(GLTFLoader, './pc.gltf');
  return (
    <>
      <mesh>
        <Environment preset="city" />
        <PresentationControls
          global
          rotation={[0.13, 0.1, 0]}
          polar={[-Math.PI / 8, Math.PI / 8]}
          azimuth={[-Math.PI / 8, Math.PI / 8]}
          config={{ mass: 2, tension: 400 }}
          snap={{ mass: 4, tension: 400 }}
        >
          <Float rotationIntensity={0.3}>
            <primitive
              object={model.scene}
              scale={[5, 5, 5]}
              position-y={-0.8}
            />
            <Html
              transform
              wrapperClass="iframeWrapper"
              distanceFactor={0.76}
              position={[0.12, 0.4, 0.1]}
              rotation-x={-0.2}
              rotation-y={0}
            >
              <iframe src="https://www.flying-h.co.jp/"></iframe>
            </Html>
          </Float>
        </PresentationControls>
        <ContactShadows position-y={-1.5} blur={2} />
      </mesh>
    </>
  );
}

・PresentationControlsコンポーネント
@react-three/dreiで提供されている3Dオブジェクトの操作を制御するためのコンポーネントです。カメラの視点を変えるためのアニメーションや、ユーザーによる操作を制御する機能を持っています。
polarとazimuthで回転を制限することができます。

・Floatコンポーネント
@react-three/dreiのコンポーネントで、React Three Fiber（R3F）を使った3Dシーンでオブジェクトを浮遊させる、またはゆらゆらとした動きを与えることができます。

・Htmlコンポーネント
3D空間にHTML要素を表示: Htmlを使うと、シーン内にHTMLを埋め込むことができ、3Dオブジェクトと連携してUIを提供したり、情報を表示したりすることができます。
wrapperClassプロパティを使用することでiframeの大きさをCSSでコントロールできます。

ポイント

3Dのためxyz軸を考慮しなければならないので、
iframeの位置をモデルの画面にフィットさせるのが少し手間がかかりました。
カメラやモデルやiframeの各プロパティで調整しました。

その他のポイントとしてはモデルの裏側まで回転させることができてしまうと、
モデルであるモニターの背面が見えるはずがiframeが優先されてwebサイトが浮いてるように見えてしまうので、polarとazimuthで回転を制限させて、モデルの背面を見えないようにしています。

R3Fには今回使用したもの以外にもとても便利なプロパティやコンポーネントが用意されているので、
ぜひ下記ドキュメントやGitHubを確認してみてください。

参考

・React Three Fiber Documentation - Pmndrs.docs
・https://github.com/pmndrs/drei

東京のホームページ制作・Web制作のお問い合わせ、お見積り依頼、相談、質問は
こちらのお問い合わせフォームよりお願いいたします

メールお問い合わせはこちら