概要

Kompakkt Standalone Viewerを試す機会がありましたので、備忘録です。

以下のように説明されています。

This repository hosts a JavaScript file which can be included on any website to use the Kompakkt Viewer without needing to use the Kompakkt Repository or the Kompakkt Server.

（機械翻訳）このリポジトリには、Kompakkt Viewerを使用するためのJavaScriptファイルが含まれており、このファイルをウェブサイトに組み込むだけで、Kompakkt RepositoryやKompakkt Serverを使用せずにビューアを利用することができます。

リポジトリ

以下で公開されています。

GitHub - Kompakkt/StandaloneViewer: Custom Web Component to embed a standalone version of the Viewer on any website
Custom Web Component to embed a standalone version of the Viewer on any website - Kompakkt/StandaloneViewer
GitHub

またGitHub Pagesでビューアにアクセスすることができます。

kompakkt.github.io
kompakkt.github.io

表示例

以下のように、3Dモデルとアノテーションを表示することができました。

kompakkt.github.io
kompakkt.github.io

ただし、アノテーションに日本語が含まれているとエラーが発生してしまいました。

また、アノテーションが3Dモデル上に表示されないなど、使用方法に誤りが含まれるようでした。

補足

入力するアノテーションのフォーマットとして、Kompakktで付与したアノテーションをエクスポートしたものが利用できるようでした。

例えば、以下です。

[
  {
    "_id": "6770a1544ce1fd023488ed80",
    "body": {
      "type": "annotation",
      "content": {
        "type": "text",
        "title": "aaa",
        "description": "bbb",
        "relatedPerspective": {
          "cameraType": "arcRotateCam",
          "position": {
            "x": 2.29719982707321,
            "y": 1.04633324888694,
            "z": 1.6360083249941
          },
          "target": {
            "x": 1.01310503482819,
            "y": 1.17903399467468,
            "z": 1.01444202661514
          },
          "preview": "previews/annotation/6770a1544ce1fd023488ed80.png"
        }
      }
    },
    "created": "2024-12-29T01:09:40.286Z",
    "creator": {
      "type": "person",
      "name": "Satoru Nakamura",
      "_id": "675a9ce47d1fb2453f0fb3c1"
    },
    "generated": "2024-12-29T01:09:42.974Z",
    "generator": {
      "type": "software",
      "name": "Kompakkt",
      "_id": "675a9ce47d1fb2453f0fb3c1",
      "homepage": "https://github.com/Kompakkt/Kompakkt"
    },
    "identifier": "6770a1544ce1fd023488ed80",
    "lastModificationDate": "2025-01-04T22:47:44.949Z",
    "lastModifiedBy": {
      "_id": "675a9ce47d1fb2453f0fb3c1",
      "name": "Satoru Nakamura",
      "type": "person"
    },
    "motivation": "defaultMotivation",
    "ranking": 1,
    "target": {
      "source": {
        "relatedEntity": "67709e860cb8d064fa0755b7",
        "relatedCompilation": ""
      },
      "selector": {
        "referencePoint": {
          "_isDirty": true,
          "_x": 0.432422224047909,
          "_y": 1.67443117161605,
          "_z": 1.65461818754158
        },
        "referenceNormal": null
      }
    },
    "validated": true
  }
]

ただし、Kompakktでも3Dモデル上にアノテーションが表示されず、使用方法のどこかに誤りがありそうです。

まとめ

3Dモデルの表示はできましたが、アノテーションはうまく表示させることができませんでした。

引き続き調査を行いたいと思いますが、本記事が参考になりましたら幸いです。

動画版（生成AIによる自動生成）: この記事の内容をずんだもん×四国めたんの掛け合いで解説しています。自動生成のため、内容に誤りがある可能性があります。正確な情報は記事本文をご参照ください。