Rotate 3D model using calc() CSS

[lucacv]

Hello developers,

I am trying to rotate my 3D model in the Y axis parallel to the ground and at the same time create a slight zoom while scrolling the web page.

Using the example in the documentation "Use CSS-like calc() to sync camera orbit with scroll position":

<model-viewer camera-controls touch-action="pan-y" camera-orbit="calc(-1.5rad + env(window-scroll-y) * 4rad) calc(0deg + env(window-scroll-y) * 180deg) calc(5m - env(window-scroll-y) * 10m)" src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut"></model-viewer>

By modifying it, I was able to get what I was looking for, a model that rotated around the straight Y-axis, parallel to the ground:

<model-viewer camera-target="0m 0m 0" camera-orbit="calc(-1.5rad + env(window-scroll-y) * 4rad) calc(var(0deg)) calc(10m - env(window-scroll-y) * 20m * (1 + ((1.5 - 1) * 0.5))"
src="earth-1.glb">

But the model starts enlarged and takes up the whole viewport and also, it doesn't do the "zoom" effect I want.

How can I achieve the zoom effect + the rotation effect using the calc() function?

Thank you very much!

[elalish]

It looks like you're close - I think just keep adjusting the numbers until you get the behavior you desire. You might also want to set field-of-view to a different value; we default to 30deg, but larger will look more zoomed out.

[lucacv]

Thanks @elalish for your help.

I'm still trying to figure out.

Meanwhile I've tested some code using Javascript and this is what I'm doing:

const modelViewer = document.querySelector('model-viewer');
const maxRotationSpeed = 5; // maximum rotation speed in degrees per frame
const rotationMultiplier = 0.05; // rotation multiplier
const scrollStopDelay = 100; // time in ms before resuming autorotation after scroll stop

let currentRotationSpeed = 0;
let previousScrollPosition = window.scrollY;
let isUserScrolling = false;
let scrollStopTimeout;
	
// Function to temporarily stop autorotation when the user starts scrolling
function stopRotationOnScroll() {
  isUserScrolling = true;

  clearTimeout(scrollStopTimeout);
  scrollStopTimeout = setTimeout(() => {
    isUserScrolling = false;
  }, scrollStopDelay);
}

window.addEventListener('scroll', () => {
  const scrollPosition = window.scrollY;
  
  // Checks whether the user is scrolling the page
  if (isUserScrolling) {
    stopRotationOnScroll();
    return;
  }

  // Calculates the difference of scroll position from the last frame
  const scrollDifference = previousScrollPosition - scrollPosition;

  // Calculates the rotation speed based on the current scroll position and the sign of the scroll difference
  currentRotationSpeed = Math.abs(scrollDifference) * rotationMultiplier;
  
  // Limit the maximum rotation speed based on maxRotationSpeed
  if (currentRotationSpeed > maxRotationSpeed) {
    currentRotationSpeed = maxRotationSpeed * Math.sign(currentRotationSpeed);
  }

  // Calculates the new orbit position based on the current rotation speed
  const scrollDirection = scrollDifference >= 0 ? -1 : 1; // determines the sliding direction
	const currentRotation = parseFloat(modelViewer.cameraOrbit);
	const newRotation = currentRotation + (currentRotationSpeed * scrollDirection);

  // Update the cameraOrbit attribute with the new orbit position
  modelViewer.cameraOrbit = `${newRotation}deg`;

  // Saves the current scroll position as the previous one for the next frame
  previousScrollPosition = scrollPosition;
});

This is perfectly working as you can see in the video below 👇 .
BUT I'm still having the issue how to zoom in and zoom out during scrolling 😢 ...
I'm thinking about using some variables to change the cameraOrbit (like the example here). I would like to have this zoom effect but when I'm scrolling the page 🤔.
If anyone has any hint, please help let me know. Thanks.

screen-capture.webm

[lucacv]

note: the background-like grey band showing in the end of scrolling is just the next section of the website, nothing do to with that model. Don't worry 👍

[lucacv]

Is min-camera-orbit a variabile I can put inline into the model-viewer tag?

[WadeMorrison]

@lucacv Yes, the values you'll want to play with, but you can set it up like so:
min-camera-orbit="-180deg 0deg auto" max-camera-orbit="180deg 180deg auto"
If I'm not mistaking I believe the first numbers are the Yaw (-180/180), and the second numbers are the Pitch (0/180).

[lucacv]

Thanks @WadeMorrison, I'm going to trying using this and let you all know.

Thanks for support.

[elalish]

or min-camera-orbit="auto auto 0m", etc.

[lucacv]

Update:

I've tried using calc() but is not working as I want. Probably I'm not "skilled" as I was thinking 😅
I've accepted to use JS to trigger the rotation effect.

If anyone has tried something similar or tried to solve this problem, please let me know, I hope this discussion will help someone.

Thanks all.