three.js(相机 (Camera))

相机类型:
1透视相机(PerspectiveCamera):透视相机模拟人眼观察物体时的效果,具有近大远小的景深效果。创建透视相机需要设置视角FOV、画布宽高比、近平面和远平面距离等参数。
2正交相机(OrthographicCamera):正交相机消除了透视效果,使物体在屏幕上呈现出相同的大小。创建正交相机需要设置左右、上下、前后裁剪面的位置。
3立方相机(CubeCamera):立方体相机是一种特殊的相机,它能够捕获周围环境,生成立方体贴图,并将其应用到材质上。它通常用于反射和折射效果,例如镜面反射和玻璃表面的折射。
透视相机(PerspectiveCamera)
构造器
●PerspectiveCamera( 摄像机视锥体垂直视野角度, 摄像机视锥体长宽比, 摄像机视锥体近端面, 摄像机视锥体远端面)
属性
.aspect : Float
●摄像机视锥体的长宽比,通常是使用画布的宽/画布的高。默认值是1(正方形画布)。

.far : Float
●摄像机的远端面,默认值是2000。该值必须大于near plane(摄像机视锥体近端面)的值。

.filmGauge : Float
●胶片尺寸,其默认值为35(毫米)。 这个参数不会影响摄像机的投影矩阵,除非.filmOffset被设置为了一个非零的值。

.filmOffset : Float
●水平偏离中心偏移量,和.filmGauge单位相同。默认值为0。

.focus : Float
●用于立体视觉和景深效果的物体的距离。 这个参数不会影响摄像机的投影矩阵,除非使用了StereoCamera。 默认值是10。

.fov : Float
●摄像机视锥体垂直视野角度,从视图的底部到顶部,以角度来表示。默认值是50。

.isPerspectiveCamera : Boolean
●只读标志,用于检查给定对象是否为透视相机类型。

.near : Float
●摄像机的近端面,默认值是0.1。
●其有效值范围是0到当前摄像机far plane(远端面)的值之间。 请注意,和OrthographicCamera不同,0对于PerspectiveCamera的近端面来说不是一个有效值。

.view : Object
●视锥窗口规范。 这个值使用.setViewOffset方法来进行设置,使用.clearViewOffset方法来进行清除。

.zoom : number
●获取或者设置摄像机的缩放倍数,其默认值为1。
方法
.clearViewOffset () : undefined
●清除任何由.setViewOffset设置的偏移量。

.getEffectiveFOV () : Float
●结合.zoom(缩放倍数),以角度返回当前垂直视野角度。

.getFilmHeight () : Float
●返回当前胶片上图像的高,如果.aspect小于或等于1(肖像格式、纵向构图),则结果等于.filmGauge。

.getFilmWidth () : Float
●返回当前胶片上图像的宽,如果.aspect大于或等于1(景观格式、横向构图),则结果等于.filmGauge。

.getFocalLength () : Float
●返回当前.fov(视野角度)相对于.filmGauge(胶片尺寸)的焦距。

.setFocalLength ( focalLength : Float ) : undefined
●通过相对于当前.filmGauge的焦距,设置FOV。
●默认情况下,焦距是为35mm(全画幅)摄像机而指定的。
正交相机(OrthographicCamera)
构造器
●OrthographicCamera( 摄像机视锥体左侧面,摄像机视锥体右侧面,摄像机视锥体上侧面, 摄像机视锥体下侧面 ,摄像机视锥体近端面,摄像机视锥体远端面 )
属性
.bottom : Float
●摄像机视锥体下侧面。

.far : Float
●摄像机视锥体远端面,其默认值为2000。该值必须大于near plane(摄像机视锥体近端面)的值。

.isOrthographicCamera : Boolean
●只读标志,用于检查给定对象是否为正交相机类型。

.left : Float
●摄像机视锥体左侧面。

.near : Float
●摄像机视锥体近端面。其默认值为0.1.
●其值的有效范围介于0和far(摄像机视锥体远端面)之间。
●请注意,和PerspectiveCamera不同,0对于OrthographicCamera的近端面来说是一个有效值。

.right : Float
●摄像机视锥体右侧面。

.top : Float
●摄像机视锥体上侧面。

.view : Object
●这个值是由setViewOffset来设置的,其默认值为null。

.zoom : number
●获取或者设置摄像机的缩放倍数,其默认值为1。

方法
.setViewOffset ( fullWidth : Float, fullHeight : Float, x : Float, y : Float, width : Float, height : Float ) : undefined
fullWidth — 多视图的全宽设置
fullHeight — 多视图的全高设置
x — 副摄像机的水平偏移
y — 副摄像机的垂直偏移
width — 副摄像机的宽度
height — 副摄像机的高度

.clearViewOffset () : undefined
●清除任何由.setViewOffset设置的偏移量。

.updateProjectionMatrix () : undefined
●更新摄像机投影矩阵。在任何参数被改变以后必须被调用。

.toJSON (meta : Object) : Object
●meta -- 包含有元数据的对象,例如对象后代中的纹理或图像
●将摄像机转换为 three.js JSON Object/Scene format(three.js JSON 物体/场景格式)。
立方相机(CubeCamera)
构造器
●CubeCamera(近剪切面的距离,远剪切面的距离,目标多维数据集呈现目标。 )
属性
.renderTarget : WebGLCubeRenderTarget
目标多维数据集呈现目标。(想要展示的目标)
方法
.update ( renderer : WebGLRenderer, scene : Scene ) : undefined
renderer -- 当前的WebGL渲染器
scene -- 当前的场景
相机的位置和朝向
相机的位置可以通过 camera.position.set(x, y, z) 来设置,其中 x、y、z 分别代表相机在三个坐标轴上的位置。相机的朝向可以通过 camera.lookAt(target) 方法来设置,其中 target 是一个表示相机要对准的目标点的 Vector3 对象。

示例代码:

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 设置相机位置

camera.position.set(0, 0, 10);

// 设置相机朝向

const target = new THREE.Vector3(0, 0, 0);

camera.lookAt(target);

上述代码将创建一个透视相机,将其位置设置为 (0, 0, 10),然后将其朝向设置为原点 (0, 0, 0)。
镜头控制器
1OrbitControls:用于旋转镜头、缩放和平移场景。
2FlyControls:用于飞行模拟,可以控制相机的位置和方向。
3PointerLockControls:用于在场景中锁定鼠标指针并控制相机。
4FirstPersonControls:用于第一人称视角,在场景中移动和旋转相机。
下面是使用OrbitControls镜头控制器的代码:

示例代码

// 实例化 OrbitControlsconst

controls = new THREE.OrbitControls(camera, renderer.domElement);

// 设置控制器参数

controls.enableDamping = true; // 启用阻尼效果

controls.dampingFactor = 0.05; // 阻尼系数

controls.rotateSpeed = 0.1; // 旋转速度

controls.zoomSpeed = 0.5; // 缩放速度

controls.panSpeed = 0.2; // 平移速度

// 渲染循环中更新控制器状态

function animate() {

requestAnimationFrame(animate);

controls.update(); // 更新控制器状态

renderer.render(scene, camera);

}

animate();

这样就可以使用 OrbitControls 镜头控制器来控制场景中的镜头了

猜你喜欢

转载自blog.csdn.net/w418856/article/details/130843955