Blenderで弊社ロゴを作ってreact-three-fiber/dreiで表示してみた

早速Blenderでロゴを作ってみた

Blenderは3Dモデルを作ることができる無料のソフトです。
また操作も視覚的で分かりやすく、初めて触る自分でも30分ほど動画を見れば操作できるようになりました。
実際にできたロゴがこちらです。
もう少しこだわりたかったのですが、そこは本題ではないので細かいディティールは妥協することにしました。

Blenderで作ったモデルをエクスポート

エクスポートはgltf形式を選択しますが、binファイルも必要になるため、フォーマットを変更しておきましょう。
エクスポートが完了すれば、binとgltfファイルをプロジェクトのassets/modelsフォルダに格納します。

react-three-fiber/dreiで表示

3Dモデルを表示するThreeModelコンポーネントを作成しました。
ここからさらにライトを足したり、角度や拡大などを調整します。

import { useGLTF } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { motion } from "framer-motion";

const Model = ({ url }: { url: string }) => {
  const { scene } = useGLTF(url);

  return (
    <group>
      <primitive object={scene} />
    </group>
  );
};

const ThreeModel = () => {
  return (
    <div>
      <Canvas>
        <ambientLight></ambientLight>
        <Model url="/src/assets/models/logo.gltf"></Model>
      </Canvas>
    </div>
  );
};

export default ThreeModel;

細かい数値を設定したThreeModelコンポーネントがこちらです。

import { OrbitControls, useGLTF } from "@react-three/drei";
import { Canvas, useFrame } from "@react-three/fiber";
import { useRef } from "react";

const Model = ({
  url,
  scale,
  position,
  rotation,
}: {
  url: string;
  scale: number;
  position: number[];
  rotation: number[];
}) => {
  const groupRef = useRef(null);
  const { scene } = useGLTF(url);

  useFrame((state) => {
    if (groupRef.current) {
      groupRef.current.position.y = Math.sin(state.clock.elapsedTime) * 0.3;
      groupRef.current.rotation.y = Math.sin(state.clock.elapsedTime) * 1;
    }
  });
  return (
    <group ref={groupRef}>
      <primitive
        object={scene}
        scale={scale}
        position={position}
        rotation={rotation}
      />
    </group>
  );
};

const ThreeModel = () => {
  return (
    <div className="h-[550px]">
      <Canvas camera={{ position: [0, 0, 15], fov: 50 }}>
        <ambientLight intensity={3}></ambientLight>
        <Model
          url="/src/assets/models/test.gltf"
          scale={0.9}
          position={[2, 0.5, 0]}
          rotation={[Math.PI / 13, 0, Math.PI / 8]}
        ></Model>
        <OrbitControls />
      </Canvas>
    </div>
  );
};

export default ThreeModel;

できたもの

実際に表示してみた結果です。
回転しているのはuseFrameという、react-three-fiberが用意しているカスタムフックを使用していて勝手に回ってます。
一応マウスドラッグで回転させることもできます。

参考にさせていただいた動画

今回コードはこちらのプログラミングチュートリアルさんの動画を参考にしました。
https://www.youtube.com/watch?v=kHMcIiRSD2g
Blenderの使い方はこの動画がわかりやすかったです。
https://www.youtube.com/watch?v=S6aAvxUx2ko