Blenderで創造したヘンテコな生き物をサイト内で飼う最もシンプルな方法

公開日: 2026/03/08 / 更新日: 2026/03/08

愛着はあれど、誰かに自慢できるほどではない3Dキャラクターが増えてきたため、自分のWEBサイト内で飼うことにした。

今回はNext.jsで作ったWEBアプリにThree.jsというWeb 3Dの標準ライブラリを組み込んでこれを実現する。

手順はシンプル。アプリ実装・公開、モデル作成・保存。

私の場合は、まずWEbサイト側を作ってから、3Dモデルを作る。なぜなら、3Dモデル作りの挫折を防ぐため。いつでも”公開できる”という点がモチベーションにつながる。

WEBサイトの準備

（node.jsとかnpmがインストールされてる環境で）

まずは適当なディレクトリで、

npx create-next-app

でNext.jsアプリを立ち上げてからの、

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

で必要なライブラリをインストールする。

そしたら、適当な名前（今回はModel.tsx）でコンポーネントfileを作って以下のような中身を実装する。

"use client"
import { Canvas } from "@react-three/fiber"
import { useGLTF, OrbitControls, Center, Environment } from "@react-three/drei"

//見え方の調整はここから
//-----------------------------------------------------------------------
const MODEL_PATH = "/model.glb"; // 呼び出すモデルのファイル名
const BG_COLOR = "#1a1a1a";     // 背景色
const LIGHT_INTENSITY = 1.5;    // 明るさ
const CAMERA_POS = [5, 3, 5] as [number, number, number]; // カメラの位置（型定義も）
const MODEL_SCALE = 1.0;        // 大きさ
//-----------------------------------------------------------------------
//ここまでをいじればいい

export default function Model() {
  return (
    <div className="h-screen w-full">
      <Canvas 
        shadows 
        camera={{ position: CAMERA_POS, fov: 45 }}>

        <color attach="background" args={[BG_COLOR]} />
        <ambientLight intensity={0.5} />
        <directionalLight position={[10, 10, 5]} intensity={LIGHT_INTENSITY} castShadow />
        <Environment preset="city" />
        <Center>
          <Model url={MODEL_PATH} scale={MODEL_SCALE} />
        </Center>
        <OrbitControls makeDefault />

      </Canvas>
    </div>
  )
}

function Model({ url, scale }: { url: string; scale: number }) {
  const { scene } = useGLTF(url)
  return <primitive object={scene} scale={scale} />
}

そしたら、既存のapp/page.tsxから作ったコンポーネント内の関数を呼び出すだけ。

import Model from "@/components/Model";

export default function Home() {
  return (
    <main className="h-screen w-screen">
      <Model />
    </main>
  );
}

ここまでできたら、ターミナルで

npm install --legacy-peer-deps

↑ おまじないの呪文(いらない可能性高い)

npm run dev

してから、ブラウザでhttps://localhost:3000に接続する。

それっぽい画面が出ればウェブサイト側の準備は完了。

3Dモデルのエクスポート

まず頑張ってモデルを作る（一番疲れる）。

その後は簡単で、blender画面で、”File”→”Export”→”glTF2.0(.glb/.gltf)”の順に進み、さっき作ったアプリのpublicディレクトリに3Dモデルのデータをダウンロードするだけ。

ダウンロードができらた、アプリのページを再読み込み。

モデルの写りを確認しながら、components/Model.tsxの設定値を調節する。

あとは、このアプリをVercelなりNetrifyなりでデプロイすれば、晴れてネットに公開されて友達に自分のモデルを自慢できる環境が整う。

ちなみに、このサイトの右の方（スマホなら下の方）にいるやつは、私のblender処女作。