Zenn
🐡

Kompakkt Standalone Viewerを試す

2025/01/05に公開
3d
tech

概要

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を使用せずにビューアを利用することができます。

リポジトリ

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

https://github.com/Kompakkt/StandaloneViewer

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

https://kompakkt.github.io/StandaloneViewer/

表示例

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

https://kompakkt.github.io/StandaloneViewer/?state=eyJyZXNvdXJjZSI6Imh0dHBzOi8vc3VraWxhbS5hd3MubGRhcy5qcC9maWxlcy9vcmlnaW5hbC8yNTNlZmRmMzQ0Nzg0NTk5NTRhZTA0ZjZiM2JlZmE1ZjM4MjJlZDU5LmdsYiIsImFubm90YXRpb25zIjpbeyJfaWQiOiI2NzcwYTE1NDRjZTFmZDAyMzQ4OGVkODAiLCJib2R5Ijp7InR5cGUiOiJhbm5vdGF0aW9uIiwiY29udGVudCI6eyJ0eXBlIjoidGV4dCIsInRpdGxlIjoibXkgdGl0bGUiLCJkZXNjcmlwdGlvbiI6Im15IGRlc2NyaXB0aW9uIiwicmVsYXRlZFBlcnNwZWN0aXZlIjp7ImNhbWVyYVR5cGUiOiJhcmNSb3RhdGVDYW0iLCJwb3NpdGlvbiI6eyJ4IjoyLjI5NzE5OTgyNzA3MzIxLCJ5IjoxLjA0NjMzMzI0ODg4Njk0LCJ6IjoxLjYzNjAwODMyNDk5NDF9LCJ0YXJnZXQiOnsieCI6MS4wMTMxMDUwMzQ4MjgxOSwieSI6MS4xNzkwMzM5OTQ2NzQ2OCwieiI6MS4wMTQ0NDIwMjY2MTUxNH0sInByZXZpZXciOiJwcmV2aWV3cy9hbm5vdGF0aW9uLzY3NzBhMTU0NGNlMWZkMDIzNDg4ZWQ4MC5wbmcifX19LCJjcmVhdGVkIjoiMjAyNC0xMi0yOVQwMTowOTo0MC4yODZaIiwiY3JlYXRvciI6eyJ0eXBlIjoicGVyc29uIiwibmFtZSI6IlNhdG9ydSBOYWthbXVyYSIsIl9pZCI6IjY3NWE5Y2U0N2QxZmIyNDUzZjBmYjNjMSJ9LCJnZW5lcmF0ZWQiOiIyMDI0LTEyLTI5VDAxOjA5OjQyLjk3NFoiLCJnZW5lcmF0b3IiOnsidHlwZSI6InNvZnR3YXJlIiwibmFtZSI6IktvbXBha2t0IiwiX2lkIjoiNjc1YTljZTQ3ZDFmYjI0NTNmMGZiM2MxIiwiaG9tZXBhZ2UiOiJodHRwczovL2dpdGh1Yi5jb20vS29tcGFra3QvS29tcGFra3QifSwiaWRlbnRpZmllciI6IjY3NzBhMTU0NGNlMWZkMDIzNDg4ZWQ4MCIsImxhc3RNb2RpZmljYXRpb25EYXRlIjoiMjAyNC0xMi0yOVQwMToxMToyNC4zNjBaIiwibGFzdE1vZGlmaWVkQnkiOnsiX2lkIjoiNjc1YTljZTQ3ZDFmYjI0NTNmMGZiM2MxIiwibmFtZSI6IlNhdG9ydSBOYWthbXVyYSIsInR5cGUiOiJwZXJzb24ifSwibW90aXZhdGlvbiI6ImRlZmF1bHRNb3RpdmF0aW9uIiwicmFua2luZyI6MSwidGFyZ2V0Ijp7InNvdXJjZSI6eyJyZWxhdGVkRW50aXR5IjoiNjc3MDllODYwY2I4ZDA2NGZhMDc1NWI3IiwicmVsYXRlZENvbXBpbGF0aW9uIjoiIn0sInNlbGVjdG9yIjp7InJlZmVyZW5jZVBvaW50Ijp7Il9pc0RpcnR5Ijp0cnVlLCJfeCI6MC40MzI0MjIyMjQwNDc5MDksIl95IjoxLjY3NDQzMTE3MTYxNjA1LCJfeiI6MS42NTQ2MTgxODc1NDE1OH0sInJlZmVyZW5jZU5vcm1hbCI6bnVsbH19LCJ2YWxpZGF0ZWQiOnRydWV9XX0%253D

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

また、アノテーションが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モデルの表示はできましたが、アノテーションはうまく表示させることができませんでした。

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

Discussion