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.
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;
}<script src="https://cdn.jsdelivr.net/npm/three@0.141/build/three.min.js"></script>