THREE.js学习笔记4——Cameras

这一小节主要学习相机。
在之前的小节里面，创建了透视相机ProspectiveCamera，但是还有在THREE.js中还有很多其他的相机。

ArrayCamera

ArrayCamera可用于使用一组预定义的相机高效地渲染场景。这是渲染 VR 场景的一个重要性能方面。

StereoCamera

StereoCamera双透视相机用于 3D Anaglyph 或视差屏障等效果。通过两个模仿眼睛的相机渲染场景，创建视差效果。

CubeCamera

CubeCamera方块相机有六个渲染目标，就是方块的六个面。Creates 6 cameras that render to a WebGLCubeRenderTarget.可以渲染环境地图、反射或阴影贴图。

CubeCamera

OrthographicCamera使用正投影的摄像机。
在这种投影模式下，物体在渲染图像中的大小将保持不变，而与相机的距离也无关。
这对于渲染 2D 场景和 UI 元素等非常有用。

PerspectiveCamera

PerspectiveCamera有四个参数

const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

fov - 相机的垂直视场。以度数为单位，数字越大，视场就越大，可以类比于相机的广角。建议的数值在45-75。
aspect - 相机渲染范围的长宽比。
near - 相机近平面。
far - 相机远平面。
第三和第四个参数称为近和远，对应于接近的程度以及相机能看到多远。任何比近平面更近或比远平平面更远的物体或物体的部分都不会出现。
不要使用0.0001和9999999等极端值来防止z-fighting，就是在这种情况下，两个极端靠的太近了，GPU很难分辨谁的那一面更靠前，看起来就像两个物体在争辩z面一样。

OrthographicCamera

OrthographicCamera有六个参数

const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );

left - 相机左平面。
right - 相机右平面。
top - 相机上平面。
bottom - 相机下平面。
near - 相机近平面。
far - 相机远平面。

这样渲染出来的立方体看起来是扁的。
这是因为我们正在将方形区域渲染成矩形画布。
如果要渲染正常，我们就需要使用画布比例（宽度与高度）,只需要在左右两个参数上乘以宽高比就行

const aspectRetio = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(-1 * aspectRetio, 1 * aspectRetio, 1, -1, 0.1, 100);

控制相机

使用鼠标来控制相机，首先我们需要页面上的鼠标坐标，使用addEventHandler收听mousemove事件并检索Events.clientX和Events.clientY

addEventListener('mousemove', (event) => {
    console.log(event.clientX, event.clientY);
})

此时打印的这些值以像素为单位，最好调整它们，我们想要幅度为1的值(就是无论屏幕有多大，从左到右，从上到下，都是从0到1)，并且同时可以是负的，正的。
只需要将它们除以窗口的宽度和高度然后再减去0.5就行，这样就确保了这个坐标是以画面中央开始的。

const cursor = {
    x: 0,
    y: 0
}
addEventListener('mousemove', (event) => {
    // console.log(event.clientX, event.clientY);
    cursor.x = event.clientX / window.innerWidth -0.5；
    cursor.y = event.clientY / window.innerHeight -0.5；
    console.log(cursor.x, cursor.y);
})

探索不一样的效果,这个很适合数字大屏

const cursor = {
    x: 0,
    y: 0
}
addEventListener('mousemove', (event) => {
    // console.log(event.clientX, event.clientY);
    cursor.x = event.clientX / window.innerWidth - 0.5
    cursor.y = event.clientY / window.innerHeight - 0.5
})
function render() {
    const elapesdTime = clock.getElapsedTime();
    camera.position.set(cursor.x * 0.5, -cursor.y * 0.5, 4)
    camera.lookAt(cube.position)
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

旋转起来

camera.position.set(
    Math.sin(cursor.x * Math.PI * 2) * 10,
    cursor.y * 5,
    Math.cos(cursor.x * Math.PI * 2) * 10
    )
camera.lookAt(cube.position)

相机控件 - Controls

使用THREE.js中内置的控件

ArcballControls
通过ArcballControls，可以用虚拟轨迹球控制相机，并提供全面的触摸支持和先进的导航功能。
DragControls
该类可用于提供拖放交互。就是可以拖东西。
FirstPersonControls
该类是 FlyControls 的另一种实现。
FlyControls
FlyControls可实现与 Blender 等 DCC 工具中的飞行模式类似的导航功能。您可以在三维空间中任意变换摄像机，不受任何限制（例如，聚焦于特定目标）。
MapControls
MapControls 用于从鸟瞰视角在地图上变换摄像机。该类与 OrbitControls 分享其实现，但使用特定的预设进行鼠标/触摸交互，并默认禁用屏幕空间平移。
OrbitControls
轨道控制允许摄像机围绕目标运行。
PointerLockControls
该类的实现基于指针锁定 API。PointerLockControls 是第一人称 3D 游戏的最佳选择。
TrackballControls
TrackballControls 类似于 OrbitControls。不过，它不会保持恒定的摄像头向上矢量。这意味着，如果摄像头在 “北 ”极和 “南 ”极上空运行，它不会翻转以保持 “右侧朝上”。
TransformControls
该类通过采用类似于 Blender 等 DCC 工具的交互模型，可用于在三维空间中变换对象。与其他控件不同的是，它并不用于转换场景的摄像机。

创建并使用 OrbitControls

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
const controls = new OrbitControls(camera, renderer.domElement);
function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render()

为了使画面看起来更加的丝滑，可以为控件加上阻尼,将enableDamping设置为true，然后在渲染函数中添加控件更新代码controls.update()

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true
function render() {
    controls.update()
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render()