How to make the model tilt when scrolling

Questions
1

Hello,

I’m trying to make my model tilt on page scroll, but so far it tilts only on the mouse hover. You can see it live here.

I’m using document.onmousemove for mouse hover, but for page scroll, I tried document.onscroll and it doesn’t work. The model immediately disappears when scrolling.

I would like if it worked like in this example.
So, when a user scrolls the page, the model would tilt, not on mouse hover.

My code :

  
const loader = new THREE.GLTFLoader();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.getElementById("mountain").appendChild(renderer.domElement);

camera.position.y = 10;
camera.position.z = 60;

loader.load(
  "https://holesa.github.io/staging/poly/models/mountains.glb",
  function (glb) {
    glb.scene.scale.set(0.01, 0.01, 0.01);
    glb.scene.rotateX(101);
    glb.scene.rotateY(0.2);
    scene.add(glb.scene);
  },
  function (xhr) {
    console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
  },
  function (error) {
    console.log("An error happened");
  }
);

const lightA = new THREE.AmbientLight(0x404040); // soft white light
scene.add(lightA);

const lightP = new THREE.PointLight(0x557bc9, 1);
lightP.position.set(-10, 30, 500);
scene.add(lightP);

var mouseTolerance = 0.3;

document.onmousemove = function (e) {
  var centerX = window.innerWidth * 0.4;
  var centerY = window.innerHeight * 0.4;

  //scene.rotation.y = ((e.clientX - centerX) / centerX) * mouseTolerance;
  scene.rotation.x = ((e.clientY - centerY) / centerY) * mouseTolerance;
};

const animate = function () {
  requestAnimationFrame(animate);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.render(scene, camera);
};

animate();

Thank you.

2

It should work - also, it might be easier to do the tilting with mousewheel event first, since it gives you the delta automatically (example.)

It’s possible that your model disappeared because you might have given it an invalid rotation value (undefined or a NaN, if centerY was 0 for example :thinking: .)

1 Like
3

Thanks. Your comment helped me to fix it. This code works for me:

window.onscroll = (e) => {
    scene.rotation.x = this.scrollY / 700.0;
  };