Google model-viewer Hotspots problem

[sirVitli]

Hello,

I've watched some tutorials. Im new to model-viewer, I'm getting some troubles with Hotspots, in the model-viewer editor Preshow my configurated Hotspots shows at the right place, as soon I uploaded it to my hosting/virtual web server the hotspots are not in right position, they are all in the center off the model. Whats the problem?

Model-viewer snippet:

<model-viewer src="model.gltf" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="poster.webp" shadow-intensity="1" environment-image="pillars_1k.hdr" exposure="0.51" camera-orbit="-15.62deg 84.47deg 29.56m" field-of-view="30deg" auto-rotate>
    <button class="Hotspot" slot="hotspot-1" data-surface="17 0 817 819 818 0.283 0.223 0.493" data-visibility-attribute="visible">
        <div class="HotspotAnnotation">Schwengel.</div>
    </button><button class="Hotspot" slot="hotspot-2" data-surface="76 0 908 909 910 0.662 0.103 0.235" data-visibility-attribute="visible">
        <div class="HotspotAnnotation">Ruder</div>
    </button>
</model-viewer>

I realized in older Videos I watched the editor produces not data-surface, its produced data-position's, could these be the problem? And how can my editor do the same?

Greets,
David

[pixlbndr]

I am also having a similar issue. The editor no longer gives data-position and data-normal values. Now it only gives data-surface values but I can not find documentation on how to use this new attribute. Would it be possible to add a check box to the editor to allow for the older portion & normal values if wanted? If that isn't doable then were can I find documentation on data-surface?

[elalish]

I take it you used to use data-normal for this? I think for your workflow, positionAndNormalFromPoint() (the old way the editor generated hotspots) is preferable to surfaceFromPoint(). Perhaps the editor should have a toggle. Of course you can also set up your own page to do this, but the point of the editor is to make it easy after all.

[pixlbndr]

I used the following code to get my camera to animated to Hotspot targets when clicked.

const modelViewer = document.querySelector("#model");
        
        // Adds Camera Views - ability to animate camera framing
       const annotationClicked = (annotation) => {
        let dataset = annotation.dataset;
        modelViewer.cameraTarget = dataset.target;
        modelViewer.cameraOrbit = dataset.orbit;
    };

        modelViewer.querySelectorAll('button').forEach((hotspot) => {
        //console.log("hello hotspot", hotspot); // To check that hotspots are detected correctly
        hotspot.classList.add('hide'); //Hides hotspots on load
        hotspot.addEventListener('click', () => annotationClicked(hotspot));
    });

and I added the following attributes to each hotspot button

<button 
	class="Hotspot"
	slot="hotspot-1"
	data-position="0m -1.8m 6.7m"
	data-normal="6.199501049735222e-14m 0.6424315337543653m 0.7m"
	data-orbit="50deg 80deg 10m" //This set camera angle and zoom
	data-target="0m -1.8m 6.7m" //This set camera position in world space
	data-visibility-attribute="visible">
	<div class="HotspotAnnotation">Button Text</div>
</button>

I love the new implementation of using data-surface so the hotspots animate with the model, however I can not figure out how to get the camera to move to the hotspot as before, zooming works but the camera only moves to the origin of the world space I think and not were the hotspot is.

What am I missing here? I am assuming I need to query the current world position of the hotspot and pass it on to the camera when the hotspot button is clicked, so that not matter where the hotspot is in world space the camera can animate to it.

I loved the Camera Views example because it helped me understand what i needed to do. Will this example be updated for those that would prefer to use data-surface ?

Thanks for all the amazing work you are doing on this project, it really is incredible!

[elalish]

Thanks for the detail: what you want is queryHotspot.

[elalish]

I think if you follow https://modelviewer.dev/examples/annotations/index.html#animatedHotspots, but use .position and .normal of queryHotspot instead of canvasPosition, it should work fine.

[pixlbndr]

Thank you @elalish

For the benefit of anyone else this is the code I found to resolve my issue. This allows use of hotspots animating with the model and having the camera view move to the updated hotspot location with both position and orbit values.

const modelViewer = document.querySelector("#model"); 
        
        modelViewer.querySelectorAll('button').forEach((hotspot) => {
        //console.log("hello hotspot", hotspot); // To check that hotspots are detected correctly
        hotspot.classList.add('hide'); //Hides hotspots on load
        hotspot.addEventListener('click', () => annotationClicked(hotspot));
    });

    // Adds Camera Views - ability to animate camera framing
    const annotationClicked = (annotation) => {
        
        let camAngle = annotation.dataset.orbit; //Pulls orbit values from clicked hotspot
        
        let hsPos = modelViewer.queryHotspot(annotation.slot).position.toString();//Pulls world-space position values from clicked hotspot
        //console.log("hsPos",hsPos);
        //console.log("annotation",annotation);
        //console.log("orbit angle",camAngle);

        modelViewer.cameraTarget = hsPos;//Moves camera to clicked hotspot world-space position
        modelViewer.cameraOrbit = camAngle;//Orbits camera to pre-defined angle stored in clicked annotation
  };