three.js 之 Camera

时间 2019-11-09

标签 three.js camera 栏目 JavaScript 繁體版

原文原文链接

基础知识

右手坐标系
相机默认是由正z轴看像-z轴（相机镜头对着-z轴方向拍），就是咱们由屏幕外向屏幕内看同样。
相机默认y轴为上方

定义

照相机就是这样一个抽象，它定义了三维空间到二维屏幕的投影方式，用“照相机”这样一个类比，能够使咱们直观地理解这一投影方式。而针对投影方式的不一样，照相机又分为正交投影照相机与透视投影照相机。html

camera种类

PerspectiveCamera(透视相机)

这种投影模式是被设计用来模拟人类眼睛观察事物的方式。这是3d渲染中最常用的投影模式

演示web

代码示例canvas

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
scene.add( camera );

源码api

function PerspectiveCamera( fov, aspect, near, far ) {
    // 继承 Camera 的方法和属性
    Camera.call( this );
    // 设置相机类型为 PerspectiveCamera
    this.type = 'PerspectiveCamera';
    
    // 没有设置可视角度，默认视角为50度
    this.fov = fov !== undefined ? fov : 50;
    // 设置 zoom 为 1
    this.zoom = 1;
    
    // 没有设置近端距离，默认为 0.1
    this.near = near !== undefined ? near : 0.1;
    // 没有设置远端距离，默认为 2000
    this.far = far !== undefined ? far : 2000;
    // 设置 focus 为 10
    this.focus = 10;
    
    // 没有设置宽/高比，默认设置为 1
    this.aspect = aspect !== undefined ? aspect : 1;
    this.view = null;

    // 胶片尺寸，默认35mm镜头
    this.filmGauge = 35;    // width of the film (default in millimeters)
    // 水平偏移，单位mm，默认值0
    this.filmOffset = 0;    // horizontal film offset (same unit as gauge)

    // 调用 updateProjectionMatrix 方法，更新相机的投影矩阵
    this.updateProjectionMatrix();

}

构造函数函数
```
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
```
- fov: 可视角度
- aspect: 为width/height,一般设置为canvas元素的高宽比。
- near: 近端距离
- far: 远端距离
透视投影

OrthographicCamera(正交相机)

使用这种投影模式，不管物体离照相机的距离是多少，物体的大小始终保持不变。这在渲染2d场景、UI元素以及其余场景是颇有用的。

演示webgl
- 正方体
- 可交互正方体

代码示例this

const width = window.innerWidth;
const height = window.innerHeight;
const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );

源码spa

function OrthographicCamera( left, right, top, bottom, near, far ) {
    // 继承 Camera 的方法和属性
    Camera.call( this );

    // 设置相机类型为 OrthographicCamera
    this.type = 'OrthographicCamera';
    
    // 缩放比例设置为1，视角设置为 null
    this.zoom = 1;
    this.view = null;

    // 设置左，右，上，下侧面的位置
    this.left = left;
    this.right = right;
    this.top = top;
    this.bottom = bottom;

    // 设置近端距离和远端距离。默认分别为0.1 和 2000
    this.near = ( near !== undefined ) ? near : 0.1;
    this.far = ( far !== undefined ) ? far : 2000;
    
    // 调用 updateProjectionMatrix 方法，更新相机的投影矩阵
    this.updateProjectionMatrix();

}

构造函数设计
```
OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
```
- left: 视锥左侧面
- right: 视锥右侧面
- top: 视锥上侧面
- bottom: 视锥下侧面
- near: 近端距离
- far: 远端距离
正交投影

CubeCamera(立方体相机或全景相机)

在 WebGLRenderTargetCube 中渲染6个照相机

演示3d
- 动态cubemap
- 物体

代码示例

const cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
scene.add( cubeCamera );

构造函数
```
CubeCamera( near : Number, far : Number, cubeResolution : Number )
```
- near: 近端距离
- far: 远端距离
- cubeResolution: 立方体的长度

源码解读

function CubeCamera( near, far, cubeResolution ) {
    // 继承 Object3D 的方法和属性
    Object3D.call( this );
    
    // 设置相机类型为 CubeCamera
    this.type = 'CubeCamera';

    // 设置视角为90度，宽/高比为1
    var fov = 90, aspect = 1;

    // 设置6个相机
    // 立方体右侧镜头
    var cameraPX = new PerspectiveCamera( fov, aspect, near, far );
    cameraPX.up.set( 0, - 1, 0 );
    cameraPX.lookAt( new Vector3( 1, 0, 0 ) );
    this.add( cameraPX );

    // 立方体左侧镜头
    var cameraNX = new PerspectiveCamera( fov, aspect, near, far );
    cameraNX.up.set( 0, - 1, 0 );
    cameraNX.lookAt( new Vector3( - 1, 0, 0 ) );
    this.add( cameraNX );

    // 立方体前侧镜头
    var cameraPY = new PerspectiveCamera( fov, aspect, near, far );
    cameraPY.up.set( 0, 0, 1 );
    cameraPY.lookAt( new Vector3( 0, 1, 0 ) );
    this.add( cameraPY );

    // 立方体后侧镜头
    var cameraNY = new PerspectiveCamera( fov, aspect, near, far );
    cameraNY.up.set( 0, 0, - 1 );
    cameraNY.lookAt( new Vector3( 0, - 1, 0 ) );
    this.add( cameraNY );

    // 立方体上侧镜头
    var cameraPZ = new PerspectiveCamera( fov, aspect, near, far );
    cameraPZ.up.set( 0, - 1, 0 );
    cameraPZ.lookAt( new Vector3( 0, 0, 1 ) );
    this.add( cameraPZ );

    // 立方体下侧镜头
    var cameraNZ = new PerspectiveCamera( fov, aspect, near, far );
    cameraNZ.up.set( 0, - 1, 0 );
    cameraNZ.lookAt( new Vector3( 0, 0, - 1 ) );
    this.add( cameraNZ );

    var options = { format: RGBFormat, magFilter: LinearFilter, minFilter: LinearFilter };

    // 建立渲染目标对象，设置它的材质名称为 CubeCamera
    this.renderTarget = new WebGLRenderTargetCube( cubeResolution, cubeResolution, options );
    this.renderTarget.texture.name = "CubeCamera";

}

立方体相机
参考

StereoCamera(3D相机)

双相机，被用于须要3d立体效果，视差栅栏的场景

演示
- 3d立体效果
- 视差栅栏

代码示例

const _stereo = new THREE.StereoCamera();
const size = {
    width: window.innerWidth,
    height: window.innerHeight
};
_stereo.aspect = 0.5;
_stereo.eyeSep = 0.064;
renderer.setScissor( 0, 0, size.width / 2, size.height );
renderer.setViewport( 0, 0, size.width / 2, size.height );
renderer.render( scene, _stereo.cameraL );

renderer.setScissor( size.width / 2, 0, size.width / 2, size.height );
renderer.setViewport( size.width / 2, 0, size.width / 2, size.height );
renderer.render( scene, _stereo.cameraR );

源码

function StereoCamera() {
    // 设置相机类型为 StereoCamera
    this.type = 'StereoCamera';

    // 设置宽高比为 1
    this.aspect = 1;

    this.eyeSep = 0.064;

    this.cameraL = new PerspectiveCamera();
    this.cameraL.layers.enable( 1 );
    this.cameraL.matrixAutoUpdate = false;

    this.cameraR = new PerspectiveCamera();
    this.cameraR.layers.enable( 2 );
    this.cameraR.matrixAutoUpdate = false;

}

构造函数
```
StereoCamera( )
```
3D相机