三个js摄像头定位

Question

我希望用鼠标进行的相机移动与本网站上的相同。 https://bruno-simon.com/

我的代码，但它不起作用：

      document.addEventListener("mousedown", function (event) { 
        previousMousePosition.x = event.clientX;
        previousMousePosition.y = event.clientY;
        $("body").removeClass("grab");
        $("body").addClass("grabbing");
      });

      document.addEventListener("mouseup", function () {
        $("body").removeClass("grabbing");
        $("body").addClass("grab"); 
          var deltaMove = {
            x: event.clientX - previousMousePosition.x,
            y: event.clientY - previousMousePosition.y,
          };

          // Kameranın pozisyonunu güncelle
          camera.position.x -= deltaMove.x * 0.05;
          camera.position.z -= deltaMove.y * 0.05;

          // Önceki fare konumunu güncelle
          previousMousePosition = {
            x: event.clientX,
            y: event.clientY,
          };
     
      });

Answer 1

您不必自己制作类似地图的控件。 Three.js 有 MapControls

import { MapControls } from 'three/addons/controls/MapControls.js';

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 20, 100 );

const controls = new MapControls( camera, renderer.domElement );
controls.enableDamping = true;

function animate() {

    requestAnimationFrame( animate );

    // required if controls.enableDamping or controls.autoRotate are set to true
    controls.update();

    renderer.render( scene, camera );

}

这里是地图控件的文档