3

基础知识

  1. 右手坐标系
    右手坐标系
  2. 相机默认是由正z轴看像-z轴(相机镜头对着-z轴方向拍),就是我们由屏幕外向屏幕内看一样。
  3. 相机默认y轴为上方

定义

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

camera种类

PerspectiveCamera(透视相机)

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

  2. 代码示例

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

    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();
    
    }
  4. 构造函数

    PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
    • fov: 可视角度
    • aspect: 为width/height,通常设置为canvas元素的高宽比。
    • near: 近端距离
    • far: 远端距离
  5. 透视投影
    透视投影

OrthographicCamera(正交相机)

使用这种投影模式,无论物体离照相机的距离是多少,物体的大小始终保持不变。这在渲染2d场景、UI元素以及其他场景是很有用的。
  1. 演示

  2. 代码示例

    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 );
  3. 源码

    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();
    
    }
  4. 构造函数

    OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
    • left: 视锥左侧面
    • right: 视锥右侧面
    • top: 视锥上侧面
    • bottom: 视锥下侧面
    • near: 近端距离
    • far: 远端距离
  5. 正交投影
    正交投影

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

WebGLRenderTargetCube 中渲染6个照相机
  1. 演示

  2. 代码示例

    const cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
    scene.add( cubeCamera );
  3. 构造函数

    CubeCamera( near : Number, far : Number, cubeResolution : Number )
    • near: 近端距离
    • far: 远端距离
    • cubeResolution: 立方体的长度
  4. 源码解读

    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";
    
    }
  5. 立方体相机
    cubeCamera
  6. 参考

StereoCamera(3D相机)

双相机,被用于需要3d立体效果,视差栅栏的场景
  1. 演示

  2. 代码示例

    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 );
  3. 源码

    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;
    
    }
  4. 构造函数

    StereoCamera( )
  5. 3D相机
    3D相机

wangfulin
6.1k 声望107 粉丝

引用和评论

0 条评论