Without the specifics of your project, it appears that creating your own stroller module is necessary.
How do we go about this, Teo?
To achieve this task, we simply need to develop a function that facilitates the vertical movement of the camera, as per your request.
So, you're saying that using OrbitControls adds unnecessary complexity?
Indeed, if the sole camera movement required is as you described.
Lets put this plan into action.
Initially, we incorporate
window.addEventListener('wheel', onMouseWheel, false);
to monitor the mouse wheel. Then, we utilize the
event.preventDefault(); method to prevent zooming.
Next, we determine the scroll modifier with
camera.position.y += event.deltaY / 1000;
. Here, we employ the delta in the Y-axis. To ensure smooth scrolling, I divided the value by
1000 in this instance.
Finally, we introduce
camera.position.clampScalar(0, 10);
to restrict scrolling beyond specified bounds.
let camera, scene, renderer;
let geometry, material, mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 1;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('wheel', onMouseWheel, false);
window.addEventListener('resize', onWindowResize, false);
}
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
}
function onMouseWheel(ev) {
event.preventDefault();
camera.position.y += event.deltaY / 1000;
// prevent scrolling beyond a min/max value
camera.position.clampScalar(0, 10);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>