js 使相机屏幕移动 详细程序

要使用 JavaScript 移动相机屏幕，您需要使用以下步骤：

1. 创建一个包含相机和场景的 Three.js 实例。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

2. 添加一个平面几何体，作为相机移动的参考。

const planeGeometry = new THREE.PlaneGeometry(10, 10, 10);
const planeMaterial = new THREE.MeshBasicMaterial({color: 0xffffff});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);

3. 将相机定位在场景的中心。

camera.position.set(0, 0, 5);
camera.lookAt(scene.position);

4. 创建一个变量来存储相机的目标位置，并将其设置为初始位置。

let targetPosition = new THREE.Vector3(0, 0, 5);

5. 创建一个函数，该函数将根据目标位置更新相机的位置。这个函数应该在渲染循环中被调用。

function moveCamera() {
  const speed = 0.1;
  const distance = targetPosition.distanceTo(camera.position);

  if (distance > 0) {
    const direction = targetPosition.clone().sub(camera.position).normalize();
    const moveVector = direction.multiplyScalar(Math.min(speed, distance));
    camera.position.add(moveVector);
  }
}

6. 在渲染循环中调用 moveCamera 函数，并更新目标位置以反映相机的移动。

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

document.addEventListener('mousemove', (event) => {
  const x = (event.clientX / window.innerWidth) * 2 - 1;
  const y = -(event.clientY / window.innerHeight) * 2 + 1;
  targetPosition.x = x * 5;
  targetPosition.y = y * 5;
});

render();

在这个例子中，我们在鼠标移动时更新目标位置，但您可以根据需要更新它。当相机到达目标位置时，它将停止移动