Move Environment Image with Camera

[garsidestephen]

Is it possible to move the environment image along with the camera as a user rotates around the model? I want the user to see how the shadows fall across the surface of the model as they rotate around it. Can anybody advise?

[elalish]

By default, the model is fixed in the environment and the camera moves relative to both. This example shows how you can turn the environment instead. You should be able to adjust that example to get the behavior you want. However, I'd recommend doing a quick test with that sample first; we use environment lighting, so the self shadowing comes from your AO channel. You may not see much difference either way.

[EffakT]

We are wanting to do the same, which we managed to get working using the following code:

modelViewer.dataset.lastX = false;
modelViewer.dataset.lastY = false;
modelViewer.dataset.lastTheta = false;
modelViewer.dataset.panning = false;
modelViewer.dataset.skyboxAngle = 0;
modelViewer.dataset.radiansPerPixel = 0;

function startPan() {
  const orbit = modelViewer.getCameraOrbit();
  const radius = orbit.radius;
  modelViewer.dataset.radiansPerPixel = radius / modelViewer.getBoundingClientRect().height;


  modelViewer.interactionPrompt = 'none';
};

function updatePan(thisX, thisY) {
  const deltaX = (thisX - parseFloat(modelViewer.dataset.lastX)) * parseFloat(modelViewer.dataset.radiansPerPixel);
  const deltaY = -1 * (thisY - parseFloat(modelViewer.dataset.lastY)) * parseFloat(modelViewer.dataset.radiansPerPixel);
  modelViewer.dataset.lastX = thisX;
  modelViewer.dataset.lastY = thisY;
  // modelViewer.dataset.skyboxAngle += deltaX;
  modelViewer.dataset.skyboxAngle = parseFloat(modelViewer.dataset.skyboxAngle) + deltaX;

  const orbit = modelViewer.getCameraOrbit();


  orbit.theta += deltaX;

  orbit.phi += deltaY;
  modelViewer.resetTurntableRotation(parseFloat(modelViewer.dataset.skyboxAngle));
  modelViewer.cameraOrbit = orbit.toString();

}

modelViewer.addEventListener('mousedown', function (event) {
  modelViewer.dataset.panning = true;
  if (modelViewer.dataset.panning == "false")
    return;

  modelViewer.dataset.lastX = event.clientX;
  modelViewer.dataset.lastY = event.clientY;
  startPan();
}, true);

modelViewer.addEventListener('touchstart', function (event) {
  const targetTouches = event.targetTouches;
  modelViewer.dataset.panning = true;
  if (modelViewer.dataset.panning == "false")
    return;

  modelViewer.dataset.lastX = 0.5 * (targetTouches[0].clientX + targetTouches[1].clientX);
  modelViewer.dataset.lastY = 0.5 * (targetTouches[0].clientY + targetTouches[1].clienty);
  startPan();
}, true);

self.addEventListener('mousemove', function (event) {
  if (modelViewer.dataset.panning == "false")
    return;

  updatePan(event.clientX, event.clientY);
}, true);

modelViewer.addEventListener('touchmove', function (event) {
  if (modelViewer.dataset.panning == "false")
    return;

  const targetTouches = event.targetTouches;
  const thisX = 0.5 * (targetTouches[0].clientX + targetTouches[1].clientX);
  const thisY = 0.5 * (targetTouches[0].clientY + targetTouches[1].clientY);
  updatePan(thisX, thisY);
}, true);

self.addEventListener('mouseup', function (event) {
  modelViewer.dataset.panning = false;
}, true);

modelViewer.addEventListener('touchend', function (event) {
  modelViewer.dataset.panning = false;
}, true);

The issue we have now is that we have buttons that the user can click that animates to a preset cameraOrbit & cameraTarget using the following code

const orientation = $(e.target).attr('data-orientation');
const target = $(e.target).attr('data-camera-target');
const maxCameraOrbit = $(e.target).attr('data-max-camera-orbit');
    
modelViewer.cameraTarget = target;
modelViewer.cameraOrbit = orientation;
modelViewer.fieldOfView = "auto";

Unfortunately due to the fact that the example only works on drag, this does not work with the automatic movement that happens when setting the cameraOrbit.

We have tried hooking into the camera-change event only when the event source is "none", though as expected this got stuck in an infinite loop as it triggers the camera-change event when changing the cameraOrbit as part of the update function.

Are you aware of any way to handle this?

[elalish]

That seems like a lot of code to mostly duplicate what we do by default. Have you tried removing all of that and just having your camera-change event listener update the turntable rotation based on theta? I think if you do that regardless of the event source, it should just work, for both user interaction and when clicking a button.

[EffakT]

Yes, when setting the turntableRotation to match theta, it disables the X rotation of the model, and only rotates the environment. See the below example.
Which was the why we added the rest of the code. Is there another way to handle this? Or are we misunderstanding what you mean by this?

modelViewer.addEventListener('camera-change', function (event) {
  const orbit = modelViewer.getCameraOrbit();

  modelViewer.resetTurntableRotation(orbit.theta);
});

If we calculate the delta change using the previous snippet in this instance, the model is not visible.

modelViewer.addEventListener('camera-change', function (event) {

  const orbit = modelViewer.getCameraOrbit();
  if (modelViewer.dataset.lastTheta == "false") {
    modelViewer.dataset.lastTheta = orbit.theta;
  }
  const delta = orbit.theta - parseFloat(modelViewer.dataset.lastTheta);

  modelViewer.dataset.skyboxAngle = parseFloat(modelViewer.dataset.skyboxAngle) + delta;

  modelViewer.resetTurntableRotation(parseFloat(modelViewer.dataset.skyboxAngle));

  modelViewer.dataset.lastTheta = orbit.theta;
});

Basically to explain the effect we are after:
Currently, the camera moves around the model, instead we want to rotate the model, and the camera stays static (or at least simulate this effect).

[elalish]

Oh right, I see why that doesn't work now. I wonder if that should be a new feature of model-viewer? Would you be interested in making a PR for this instead? Maybe a static-environment attribute that causes cameraOrbit.theta to stay fixed and instead put its motion into turntable rotation.

[EffakT]

Hmm, yep that sounds like it might work. I'll have to have a go when I have time, though it might take a while as I am not very knowledgeable when it comes to the inner workings of model-viewer.

[elalish]

No problem! Feel free to open a draft PR with questions if you need any pointers.