Overview

In the following article, I introduced the Aleph 3D viewer.

After further investigation, I also discovered the following repository.

https://github.com/aleph-viewer/aleph-r3f

It is described as follows, with the key difference being its use of react-three-fiber and shadcn/ui.

Aleph is a 3D object viewer and annotation/measurement tool built with react-three-fiber and shadcn/ui

The annotation features also appeared to be improved, as shown below.

In this article as well, I use 3D data of the “Ishibuchi Family Globe” published in the Kikuchi City Digital Archive.

https://adeac.jp/kikuchi-city/catalog/e0001

Usage

You can view it at the following URL.

https://iiif-aleph-r3f.vercel.app/

In the Annotations tab, I was able to add annotations.

It is possible to import/export annotation data, and the JSON format export result was as follows.

[
  {
    "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": "初めてのアノテーション"
  }
]

Customization

To display the “Ishibuchi Family Globe,” I needed to edit the source code as follows.

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',
...

Also, for deployment to Vercel, I needed to modify tailwind.config.js as follows.

I referenced the following GPT answer.

This error indicates that the tailwind.config.js file is being treated as an ECMAScript module (ESM), and therefore module.exports is not defined. This commonly occurs in environments where ESM is the default or enforced (e.g., some configurations of Vite or Vercel).

/** @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],
};

Summary

Going forward, I would like to try customizations such as referencing IIIF manifest files.