💡
aleph-r3fを試す

2024/12/29に公開
React
Tailwind CSS
iiif
tech
 概要以下の記事で、Aleph 3D viewerを紹介しました。
https://zenn.dev/nakamura196/articles/bcf04151aff5b0
その後調べた結果、以下のリポジトリの存在も知りました。
https://github.com/aleph-viewer/aleph-r3f
以下のように説明されており、react-three-fiberとshadcn/uiを使用している点に違いがあるようでした。
Aleph is a 3D object viewer and annotation/measurement tool built with react-three-fiber and shadcn/ui
以下のように、アノテーション付与機能なども改良されているようでした。
今回の記事でも、菊池市デジタルアーカイブで公開されている「石淵家地球儀」の3Dデータを使用します。
https://adeac.jp/kikuchi-city/catalog/e0001

 使い方以下で閲覧いただけます。
https://iiif-aleph-r3f.vercel.app/
アノテーションタブで、アノテーションの付与を行うことができました。
アノテーションデータのインポート/エクスポートを行うことができ、JSON形式でのエクスポート結果は以下でした。
[
  {
    "position": {
      "x": -0.06690392681702004,
      "y": 0.6256817352784154,
      "z": -0.7424544387001097
    },
    "normal": {
      "x": -0.11627753958254597,
      "y": 0.6430031011979032,
      "z": -0.7569851687044529
    },
    "cameraPosition": {
      "x": -0.15922188799592055,
      "y": 1.1767071158114843,
      "z": -1.4378842144444104
    },
    "cameraTarget": {
      "x": -0.0023649930953979492,
      "y": -0.0009789466857910165,
      "z": -0.011684000492095947
    },
    "rotation": {
      "isEuler": true,
      "_x": 0,
      "_y": 0,
      "_z": 0,
      "_order": "XYZ"
    },
    "label": "大西洋",
    "description": "初めてのアノテーション"
  }
]

 カスタマイズ「石淵家地球儀」を表示するにあたり、以下のようにソースコードを編集する必要がありました。
App.tsx
import './App.css';
import { useEffect, useRef } from 'react';
...
  const [{ src }, _setLevaControls] = useControls(() => ({
    src: {
      options: {
        // 'Measurement Cube': {
        //   url: 'https://cdn.glitch.global/afd88411-0206-477e-b65f-3d1f201de994/measurement_cube.glb?v=1710500461208',
        //   label: 'Measurement Cube',
        // },
        石淵家地球儀: 'https://sukilam.aws.ldas.jp/files/original/253efdf34478459954ae04f6b3befa5f3822ed59.glb',
        'Flight Helmet':
          'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/FlightHelmet/glTF/FlightHelmet.gltf',
...
また、Vercelへのデプロイにあたり、以下のように、tailwind.config.jsを修正する必要がありました。
GPTによる以下の回答を参考にしました。
このエラーは、tailwind.config.jsファイルがECMAScriptモジュール（ESM）として扱われており、そのためにmodule.exportsが定義されていないことを示しています。これは、ESMがデフォルトまたは強制されている環境（例えば、ViteやVercelの一部の設定）でよく発生します。
tailwind.config.js
/** @type {import('tailwindcss').Config} */
import tailwindcssAnimate from 'tailwindcss-animate';
export default {
  darkMode: ['class'],
  content: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}'],
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      keyframes: {
        'accordion-down': {
          from: { height: 0 },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: 0 },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
  plugins: [tailwindcssAnimate],
};

 まとめ今後、IIIFマニフェストファイルの参照などのカスタマイズにも試みたいと思います。
概要

使い方

カスタマイズ

まとめ

Discussion
