Three.js 项目，在自上而下视图中保持相机位于对象中心

Question

我正在编写一个自上而下的游戏，带有Three.js单方块运动，就像Frogger其他经典街机游戏一样。当主角移动时，我很难将相机保持在主角的中心。现在我正在使用MapControls.js关键控件，但是平移将相机移动一定数量的像素，并且角色通过将其位置设置为 +-10z或x方向来移动，并且它们并不总是匹配，所以到了当您朝一个方向到达板的末端时，角色几乎离开屏幕，并且摄像机移动得太远。我可以以某种方式连接相机，向下看 y 轴，同时仍然保持平移效果移动吗？

Answer 1

为什么不直接将玩家的 x 和 z 复制到相机的 x 和 z 呢？或者，每帧复制一部分。

 camera.position.lerp(player.position, 0.03);

例子。运行它，单击它，然后使用箭头键

 camera.position.lerp(player.position, 0.03);

'use strict';

/* global THREE */

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas: canvas});

  const fov = 45;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  // make the camera look down
  camera.position.set(0, 10, 0);
  camera.up.set(0, 0, -1);
  camera.lookAt(0, 0, 0);
  
  const scene = new THREE.Scene();
  scene.background = new THREE.Color('black');

  scene.add(new THREE.GridHelper(40, 40));
     
  let player;
  {
    const cubeSize = 1;
    const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
    const cubeMat = new THREE.MeshBasicMaterial({color: 'red'});
    player = new THREE.Mesh(cubeGeo, cubeMat);
    player.position.set(.5, .5, .5);
    scene.add(player);
  }

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render() {

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }
    
    camera.position.lerp(player.position, 0.03);
    camera.position.y = 10; // keep the elevation;

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
  
  window.addEventListener('keydown', (e) => {
    e.preventDefault();
    switch (e.keyCode) {
      case 38: // up
        player.position.z -= 1;
        break;
      case 40: // down
        player.position.z += 1;
        break;
      case 37: // left
        player.position.x -= 1;
        break;
      case 39: // right
        player.position.x += 1;
        break;
    }
  });
}

main();

html, body {
  margin: 0;
  height: 100%;
}
#c {
  width: 100%;
  height: 100%;
  display: block;
}

将 0.03 增大到一个较大的数字可以让相机追得更快。