ThreeJS跨场景相机属性复用及自定义设置存储性能优化问询

这个需求我之前做项目时刚好碰到过，分享一套实用的方案给你，核心是只保存关键视角属性，再针对不同宽高比的相机做适配应用：

一、捕获相机关键设置（替代完整对象序列化） #

camera.toJSON()会返回相机的全量序列化数据，我们可以从中提取用户关心的核心属性（剔除冗余信息），这样既减小了存储体积，又能精准复用视角设置。

示例代码：捕获设置 #

function captureCameraSettings(camera) {
  const cameraJSON = camera.toJSON();
  
  // 提取核心属性：位置、视角目标（替代旋转，避免欧拉角问题）、裁剪面、FOV（仅透视相机）
  const settings = {
    position: cameraJSON.object.position,
    near: camera.near,
    far: camera.far,
    // 保存lookAt目标点，比直接存rotation更稳定，避免万向锁
    lookAtTarget: camera.getWorldDirection(new THREE.Vector3())
      .multiplyScalar(10)
      .add(camera.position)
      .toArray()
  };

  // 区分相机类型，添加对应属性
  if (camera.isPerspectiveCamera) {
    settings.fov = camera.fov;
  } else if (camera.isOrthographicCamera) {
    settings.zoom = camera.zoom;
  }

  return settings;
}

// 绑定捕获按钮事件
document.getElementById('capture-btn').addEventListener('click', () => {
  const activeCamera = yourScene.activeCamera; // 替换成你当前的相机实例
  const savedSettings = captureCameraSettings(activeCamera);
  // 保存到本地存储或应用状态中
  localStorage.setItem('userCameraSettings', JSON.stringify(savedSettings));
});

二、将设置应用到新相机（适配不同宽高比） #

应用时要注意：宽高比（aspect）是当前模态框的专属属性，不能复用旧值，需要根据新模态框的尺寸重新计算，再结合保存的视角属性更新相机。

示例代码：应用设置 #

function applyCameraSettings(targetCamera, savedSettings, modalElement) {
  // 1. 恢复位置
  targetCamera.position.set(...savedSettings.position);

  // 2. 恢复视角（用lookAt目标更可靠）
  const targetVector = new THREE.Vector3(...savedSettings.lookAtTarget);
  targetCamera.lookAt(targetVector);

  // 3. 恢复裁剪面
  targetCamera.near = savedSettings.near;
  targetCamera.far = savedSettings.far;

  // 4. 根据相机类型适配宽高比
  const modalAspect = modalElement.clientWidth / modalElement.clientHeight;

  if (targetCamera.isPerspectiveCamera) {
    targetCamera.fov = savedSettings.fov;
    targetCamera.aspect = modalAspect;
    targetCamera.updateProjectionMatrix(); // 必须更新投影矩阵
  } else if (targetCamera.isOrthographicCamera) {
    targetCamera.zoom = savedSettings.zoom;
    // 根据新宽高比重新计算正交相机的视口边界
    const baseSize = 5; // 你的基础视口大小，按需调整
    targetCamera.left = -modalAspect * baseSize * targetCamera.zoom;
    targetCamera.right = modalAspect * baseSize * targetCamera.zoom;
    targetCamera.top = baseSize * targetCamera.zoom;
    targetCamera.bottom = -baseSize * targetCamera.zoom;
    targetCamera.updateProjectionMatrix();
  }
}

// 打开新模态框时调用
const newModal = document.getElementById('new-modal');
const newCamera = new THREE.PerspectiveCamera(); // 或正交相机
const savedSettings = JSON.parse(localStorage.getItem('userCameraSettings'));
applyCameraSettings(newCamera, savedSettings, newModal);

// 将新相机添加到场景
yourScene.add(newCamera);

关键注意点 #

• 优先用lookAt目标而非rotation：欧拉角可能存在万向锁问题，保存相机看向的目标点，应用时直接lookAt()更稳定。
• 必须更新投影矩阵：修改aspect、fov或正交相机边界后，一定要调用updateProjectionMatrix()，否则视角不会生效。
• 相机类型区分处理：透视相机和正交相机的参数逻辑不同，要分开适配，避免出现拉伸或视角错误。

内容的提问来源于stack exchange，提问作者d4rty