Making Hotspots adapt to scale

[ewajs]

Hi!
Thanks for this amazing component!
I'm trying to tackle a problem and wanted to know if there's a standard approach as it seems likely.
I'm building a small editor that builds upon model-viewer's features. One of the options the user has is to input the real dimensions (in case the 3D model represents a real product, let's say a chair or a wardrobe) so that the model can be represented accurately (aspect ratio wise), of course, if the aspect ratios of the provided dimensions do not match to the model's intrinsic ones then the model will be compressed or stretched along some axes (some of these are generated by AI and seems to always bound the outputs between a 1x1x1 cube, regardless of the real size of an object, so it will happen quite often).

I can achieve this by caching the original dimensions of the model with a thin wrapper around MV and expose a setDimensions method that will ultimately change the scale parameter of each dimension to match. This works without a hitch.

The issue is with Hotspots, if you had previously placed hotspots on the editor and then go and change the height, the hotspots remain anchored where they were. I've tried providing both a surface and a position and normal and (undenstandably) this doesn't work.

My question is, how can I compute the transformation that would be needed to be done to the hotpsots position in order to "rescale" them, ie, place them on the same part of the model as it was prior to changing the scale?

Intuitively I'd think the surface approach won't work at all and that I should be able to scale the position by the same amount as the model itself on that dimension but it hasn't worked for me...

Any pointers??

Thanks a lot again for this amazing resource!

[ewajs]

Ok, I've solved it. As always the issue was behind the keyboard.

I'll share my approach here in case it is useful for someone, assume the model-viewer starts without any scale (1 1 1):

1. On load, store the models original dimensions: modelViewer.getDimensions()

const originalDimensions = modelViewer.getDimensions();

2. Add a hotspot using positionAndNormalFromPoint.

// e is a click event of a click handler
const {position, normal} = modelViewer.positionAndNormalFromPoint(e.clientX, e.clientY);

3. Store it's position relative to the original dimensions and current scale:

function getScale(modelViewer) {
        const scaleArray = modelViewer.scale.split(' ').map(parseFloat);
        return { x: scaleArray[0], y: scaleArray[1], z: scaleArray[2] };
}
// position here is the position output of positionAndNormalFromPoint
function getPositionRelativeToModel(position, modelViewer, originalDimensions) { 
        const scale = getScale(modelViewer);
        const {x, y, z} = originalDimensions;
        return {
            x: 2 * (position.x / scale.x) / x,
            y: 2 * (position.y / scale.y) / y,
            z: 2 * (position.z / scale.z) / z,
        };
 }

5. Whenever the scale of the model viewer is updated, update the hotspot positions, taking into account the new scale, the relative position and the models semi height/width/depth (as it is centered in 0,0,0 by default):

 function updateHotspotPosition(hostspotSlot, relativePosition, modelViewer, originalDimensions) {
        const scale = getScale(modelViewer);
        const {x, y, z} = originalDimensions;
        const newPosition = {
            x: relativePosition.x * x / 2 * scale.x, 
            y: relativePosition.y * y / 2 * scale.y,
            z: relativePosition.z * z /2 * scale.z,
        };
        modelViewer.updateHotspot({name: hotspotSlot, position: `${newPosition.x}m ${newPosition.y}m ${newPosition.z}m`});
    }

Here's a sample model with some hotspots before and after scaling with this method, the hotspots stay attached to the same point in the mesh as they were prior to scaling.

Hotspots original position

Hotspots after scaling the model (different x/y/z scales)