向下滚动时，如何在Y轴周围旋转？

Question

我正在使用three.js来制作3D前端，并且在构造基本布局并添加了一些测试几何后，我想测试相机如何旋转，并且无法弄清楚如何完全使其完全围绕y轴旋转。向上/向下滚动。我正在使用香草JS。如果有人有关于如何处理此问题的提示，请感谢。

Answer 1

使用此简化的实时演示作为代码模板：

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/[email protected]/build/three.min.js"></script>