CameraManager

相机管理器类，负责管理3D场景中的相机和轨道控制器，提供相机控制、视点管理、鼠标样式控制等功能。支持透视相机和正交相机，集成了轨道控制器用于用户交互。

类定义

javascript

class CameraManager extends EventManager

属性

container

容器DOM元素，用于计算相机宽高比。

类型: {Element}
只读: true

renderDom

渲染器DOM元素，用于设置鼠标样式。

类型: {Element}
只读: true

perspectiveCamera

透视相机实例，用于3D场景的透视投影。

类型: {THREE.PerspectiveCamera}
只读: true

orthographicCamera

正交相机实例，用于正交投影。

类型: {THREE.OrthographicCamera}
只读: true

orbitCtrl

轨道控制器实例，用于相机交互控制。

类型: {OrbitControl}
只读: true

mouseType

鼠标样式配置，包含各种操作对应的鼠标样式的对象。

类型: {Object}
只读: true

viewPoint

视点标记对象，用于显示相机旋转中心。

类型: {ViewPoint}
只读: true

ACTION

相机控制动作枚举，包含各种相机控制动作的枚举对象。

类型: {Object}
只读: true

属性:

NONE {number} - 无动作，值为0
ROTATE {number} - 旋转动作，值为1
TRUCK {number} - 平移动作，值为2
OFFSET {number} - 偏移动作，值为3
DOLLY {number} - 推拉动作，值为4
ZOOM {number} - 缩放动作，值为5
TOUCH_ROTATE {number} - 触摸旋转动作，值为6
TOUCH_TRUCK {number} - 触摸平移动作，值为7
TOUCH_OFFSET {number} - 触摸偏移动作，值为8
TOUCH_DOLLY {number} - 触摸推拉动作，值为9
TOUCH_ZOOM {number} - 触摸缩放动作，值为10
TOUCH_DOLLY_TRUCK {number} - 触摸推拉平移组合动作，值为11
TOUCH_DOLLY_OFFSET {number} - 触摸推拉偏移组合动作，值为12
TOUCH_ZOOM_TRUCK {number} - 触摸缩放平移组合动作，值为13
TOUCH_ZOOM_OFFSET {number} - 触摸缩放偏移组合动作，值为14

示例:

javascript

// 检查当前动作类型
if (cameraManager.orbitCtrl.currentAction === cameraManager.ACTION.ROTATE) {
    console.log('正在执行旋转操作');
}

// 使用触摸动作枚举
if (cameraManager.orbitCtrl.currentAction === cameraManager.ACTION.TOUCH_DOLLY) {
    console.log('正在执行触摸推拉操作');
}

activeViewPoint

是否激活视点标记，控制是否显示旋转中心标记。

类型: {boolean}
默认值: true

activeMouseControlStyle

是否激活鼠标样式控制，控制是否根据操作类型改变鼠标样式。

类型: {boolean}
默认值: true

方法

setVisibleOfViewPoint(boolean)

设置视点标记的可见性，控制旋转中心标记的显示和隐藏状态。

参数:

boolean {boolean} - true显示视点标记，false隐藏视点标记

示例:

javascript

// 显示视点标记
cameraManager.setVisibleOfViewPoint(true);

// 隐藏视点标记
cameraManager.setVisibleOfViewPoint(false);

setRotateSpeed(value)

设置旋转控制速度，设置相机绕目标点旋转的速度，包括方位角和极角旋转速度。

参数:

value {number} - 旋转速度，取值范围[0,1]，0为最慢，1为最快

返回值:

{number} 返回设置的速度值

示例:

javascript

// 设置较慢的旋转速度
cameraManager.setRotateSpeed(0.3);

// 设置较快的旋转速度
cameraManager.setRotateSpeed(0.8);

setDollySpeed(value)

设置缩放控制速度，设置相机靠近或远离目标点的速度。

参数:

value {number} - 缩放速度，取值范围[0,1]，0为最慢，1为最快

返回值:

{number} 返回设置的速度值

示例:

javascript

// 设置较慢的缩放速度
cameraManager.setDollySpeed(0.2);

// 设置较快的缩放速度
cameraManager.setDollySpeed(0.9);

setTruckSpeed(value)

设置平移控制速度，设置相机在屏幕平面内平移的速度。

参数:

value {number} - 平移速度，取值范围[0,1]，0为最慢，1为最快

返回值:

{number} 返回设置的速度值

示例:

javascript

// 设置较慢的平移速度
cameraManager.setTruckSpeed(0.4);

// 设置较快的平移速度
cameraManager.setTruckSpeed(0.7);

setDampingFactor(value)

设置控制阻尼系数，设置轨道控制器的阻尼系数，影响相机运动的平滑程度和惯性。

参数:

value {number} - 阻尼系数，值越大运动越平滑，惯性越强

返回值:

{number} 返回设置的阻尼系数值

示例:

javascript

// 设置高阻尼，运动更平滑
cameraManager.setDampingFactor(0.1);

// 设置低阻尼，运动更直接
cameraManager.setDampingFactor(0.05);

fitToSphere(sphere, enableTransition)

将相机适配到包围球，设置相机位置和轨道控制点，使相机能够完整查看包围球内的所有内容。

参数:

sphere {THREE.Sphere} - 包围球对象，包含center和radius属性
enableTransition {boolean} - 是否启用平滑过渡动画

示例:

javascript

// 创建包围球
const sphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0), 100);

// 相机适配到包围球，启用平滑过渡
cameraManager.fitToSphere(sphere, true);

// 相机适配到包围球，无过渡动画
cameraManager.fitToSphere(sphere, false);

orbitCtrlInit(sphere)

初始化轨道控制器，根据包围球初始化相机位置和轨道控制器参数，设置合适的视角和缩放范围。

参数:

sphere {THREE.Sphere} - 包围球对象，用于计算初始相机位置

返回值:

{Promise<THREE.Vector3>} 返回Promise，resolve时返回相机位置

示例:

javascript

// 初始化相机控制器
const sphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0), 50);
cameraManager.orbitCtrlInit(sphere).then(cameraPosition => {
    console.log('相机初始化完成，位置:', cameraPosition);
});

setOrbitCtrlPoint(vec3)

设置轨道控制的目标点，设置相机围绕旋转的中心点，同时更新视点标记的位置。

参数:

vec3 {THREE.Vector3} - 目标点的三维坐标

示例:

javascript

// 设置旋转中心为原点
cameraManager.setOrbitCtrlPoint(new THREE.Vector3(0, 0, 0));

// 设置旋转中心为特定位置
cameraManager.setOrbitCtrlPoint(new THREE.Vector3(10, 5, -3));

reverseDollyDirection(boolean)

反转缩放方向，控制鼠标滚轮缩放的方向，可以反转滚轮向上/向下时的缩放行为。

参数:

boolean {boolean} - true为正方向，false为反方向

示例:

javascript

// 设置正常缩放方向（滚轮向上放大）
cameraManager.reverseDollyDirection(true);

// 设置反向缩放方向（滚轮向上缩小）
cameraManager.reverseDollyDirection(false);

reverseRotate(boolean)

反转鼠标按键控制，交换鼠标左键和右键的功能，可以改变旋转和平移的控制方式。

参数:

boolean {boolean} - true为反转模式，false为正常模式

示例:

javascript

// 正常模式：左键旋转，右键平移
cameraManager.reverseRotate(false);

// 反转模式：左键平移，右键旋转
cameraManager.reverseRotate(true);

dispose()

销毁相机管理器，清理相机管理器的所有资源，包括事件监听器和控制器。

示例:

javascript

// 清理相机管理器资源
cameraManager.dispose();

使用场景

相机控制

管理透视相机和正交相机
提供相机位置和角度的控制
支持相机的自动定位

交互控制

集成轨道控制器
支持鼠标和触摸交互
提供直观的相机操作

视点管理

显示相机旋转中心
帮助用户理解当前视点
提供视觉反馈

动画过渡

平滑的相机位置变化
自动的相机定位
改善用户体验

CameraManager ​

类定义 ​

属性 ​

container ​

renderDom ​

perspectiveCamera ​

orthographicCamera ​

orbitCtrl ​

mouseType ​

viewPoint ​

ACTION ​

activeViewPoint ​

activeMouseControlStyle ​

方法 ​

setVisibleOfViewPoint(boolean) ​

setRotateSpeed(value) ​

setDollySpeed(value) ​

setTruckSpeed(value) ​

setDampingFactor(value) ​

fitToSphere(sphere, enableTransition) ​

orbitCtrlInit(sphere) ​

setOrbitCtrlPoint(vec3) ​

reverseDollyDirection(boolean) ​

reverseRotate(boolean) ​

dispose() ​

使用场景 ​

相机控制 ​

交互控制 ​

视点管理 ​

动画过渡 ​

相关链接 ​

CameraManager

类定义

属性

container

renderDom

perspectiveCamera

orthographicCamera

orbitCtrl

mouseType

viewPoint

ACTION

activeViewPoint

activeMouseControlStyle

方法

setVisibleOfViewPoint(boolean)

setRotateSpeed(value)

setDollySpeed(value)

setTruckSpeed(value)

setDampingFactor(value)

fitToSphere(sphere, enableTransition)

orbitCtrlInit(sphere)

setOrbitCtrlPoint(vec3)

reverseDollyDirection(boolean)

reverseRotate(boolean)

dispose()

使用场景

相机控制

交互控制

视点管理

动画过渡

相关链接