How to rotate around the Y axis when scrolling down?

Question

I am using Three.js to make a 3D frontend and after constructing the basic layout and added some test geometry I want to test how the camera rotates and can't figure out how exactly to make it rotate around the Y axis solely when trying to scroll up/down. I am using Vanilla JS. If anyone has any tips on how to approach this, thanks.

user_5250847 · Answer

Use this simplified live demo as a code template:

let camera, scene, renderer;
let mesh;

init();
render();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 4;

  scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshNormalMaterial();

  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  window.addEventListener('wheel', onMouseWheel);

}

function onMouseWheel(event) {

  mesh.rotation.y += event.deltaY * 0.01;

  render();

}

function render() {

  renderer.render(scene, camera);

}

body {
      margin: 0;
}

How to rotate around the Y axis when scrolling down?

1 Answers