Problem

this is my problem with the y scroll

by grano

CSS

body {
  background-color:black;
}

JavaScript

var camera, scene, renderer, geometry, material, mesh, light;
var clicking = false;
let xRotation = 0;
let yRotation = 0;
let zRotation = 0;
//CHANGE TO TRUE TO TEST X-Z SCROLL
var xScroll = false;
init();
animate();

function init() {
  //SCENE
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0, 10, 10);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  scene.add(camera);

  geometry = new THREE.CubeGeometry(4, 4, 4);
  material = new THREE.MeshPhongMaterial({
    color: 0xff0000
  });
  mesh = new THREE.Mesh(geometry, material);
  mesh.recieveShadow = true;
  //  mesh.casty
  scene.add(mesh);

  document.addEventListener('mousedown', function(event) {
    clicking = true;
  }, false);
  document.addEventListener('mouseup', function(event) {
    clicking = false;
  }, false);
  document.addEventListener('mousemove', function(event) {
    if (clicking) onDrag(event);
  }, false);

  renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);
  animate();
}

function onDrag(event) {
  let pos = {
    x: 0,
    y: 0,
    z: 0
  };
  if (xScroll) {
    xRotation -= event.movementX / 100;
    zRotation -= event.movementX / 100;
    if (xRotation < 0) xRotation = 6;
    if (xRotation > 6) xRotation -= 6;

    if (zRotation < 0) zRotation = 6;
    if (zRotation > 6) zRotation -= 6;

    pos.x = Math.sin(xRotation) * 30;
    pos.z = Math.cos(zRotation) * 30;
  } else {
    yRotation -= event.movementY / 100;
    zRotation -= event.movementY / 100;

    pos.z = Math.cos(zRotation) * 30;
    pos.y = Math.sin(yRotation) * 30;
  }
  camera.position.set(pos.x, pos.y, pos.z);
  camera.lookAt(scene.position);
}

function animate() {

  requestAnimationFrame(animate);
  render();

}

function render() {
  renderer.render(scene, camera);
}