Model-viewer: How to get camera-orbit from user interaction?

[fasteater]

I am trying to get the latest user camera orbit like this

                document.getElementById('test').addEventListener('camera-change', function(e){
            console.log(e.currentTarget.cameraOrbit);
        });

this keeps on returning me the default camera orbit value not the latest from user interaction, what did I do wrong?

thanks

[cdata]

@fasteater thanks for filing this issue! For performance and API sanity reasons this is a little counter-intuitive. In order to set camera properties, you will assign to the property. But, if you want to get the real-time value of the camera properties you need to invoke an access method. So, for camera-orbit that looks like:

modelViewer.cameraOrbit = '1deg 2deg 3m'; // Set the value
const cameraOrbit = modelViewer.getCameraOrbit(); // Get the (possibly changed) value

// Note that `cameraOrbit` is an object that looks like:
{
  theta: /* number in radians */,
  phi: /* number in radians */,
  radius: /* number in meters */
}

And we have similar pairings for other related properties e.g., fieldOfView/getFieldOfView(), cameraTarget/getCameraTarget().

If you are interested, this is a summary of the rationale for this design choice:

• The type of camera-orbit/cameraOrbit (and other similar properties) is a string (e.g., "1deg 2deg 3m"
• Most of the time when you are reading these values, you want numbers (not strings)
• It is comparatively very expensive for us to serialize the internal value to string at 60+FPS (e.g., when the user is interacting with the model), especially if no-one is reading those strings most of the time
• It would be especially wasteful if we serialized to a string at 60+FPS only for users to re-parse the strings (probably less correctly than we do internally)
• It would be really confusing if these properties were strings some of the time, and numbers or objects at other times
• Accessor methods give you an efficient middle-ground to access raw numbers without worrying about string serialization/parsing (sometimes at 60+FPS)

[fasteater]

thank you @cdata, it works well when use interact with the model viewer, theta and phi update accordingly, but the value for radius never change, even if I use the scroll button to change the camera distance. Is this meant to be the case? if so, how do I calculate camera distance?

[cdata]

@fasteater as of v0.10.0, depending on where you are along the zoom distance, you should notice either fieldOfView or cameraOrbit.radius changing cc @elalish

[elalish]

@fasteater In addition, we've changed the default zoom behavior in v0.10.0 to change both the radius and field of view simultaneously. Before that we were only changing the field of view, which might be why you saw no radius change. You can control how much each is used by changing their min and max values, but be careful with radius. If you choose a min radius less than our default, your camera is likely to enter the model when you zoom in.

[fasteater]

sweet, I was using 0.9.0, just upgraded now camera distance works as well. Thanks for your support, great work!