google / model-viewer

Easily display interactive 3D models on the web and in AR!
https://modelviewer.dev
Apache License 2.0
6.88k stars 816 forks source link

How to dynamically determine the measuring unit of 3D objects' dimensions? #4813

Closed lemorage closed 3 months ago

lemorage commented 3 months ago

Description

I am referring to the dimensions section in the annotations chapter of the examples part in model-viewer. As the comment shows in the following code cell, the measuring unit is hard-coded by writing cm here. But now i have the case that i have a lot of different sizes of 3D objects (some are in meters, and some are in millimeters) to be put on the website, so i am wondering if there is a way to determine the measuring unit based on our objects dynamically? Otherwise, it seems not possible to get the dimensions of different objects in the right measurement unit.

  modelViewer.addEventListener('load', () => {
    const center = modelViewer.getBoundingBoxCenter();
    const size = modelViewer.getDimensions();
    const x2 = size.x / 2;
    const y2 = size.y / 2;
    const z2 = size.z / 2;

    modelViewer.updateHotspot({
      name: 'hotspot-dot+X-Y+Z',
      position: `${center.x + x2} ${center.y - y2} ${center.z + z2}`
    });

    modelViewer.updateHotspot({
      name: 'hotspot-dim+X-Y',
      position: `${center.x + x2 * 1.2} ${center.y - y2 * 1.1} ${center.z}`
    });
    modelViewer.querySelector('button[slot="hotspot-dim+X-Y"]').textContent =
        `${(size.z * 100).toFixed(0)} cm`; // this part

    modelViewer.updateHotspot({
      name: 'hotspot-dot+X-Y-Z',
      position: `${center.x + x2} ${center.y - y2} ${center.z - z2}`
    });

    modelViewer.updateHotspot({
      name: 'hotspot-dim+X-Z',
      position: `${center.x + x2 * 1.2} ${center.y} ${center.z - z2 * 1.2}`
    });
    modelViewer.querySelector('button[slot="hotspot-dim+X-Z"]').textContent =
        `${(size.y * 100).toFixed(0)} cm`; // this part

    // ......
  });

Live Demo

https://modelviewer.dev/examples/annotations/index.html#dimensions

Version