基础知识
- 右手坐标系
- 相机默认是由正z轴看像-z轴(相机镜头对着-z轴方向拍),就是我们由屏幕外向屏幕内看一样。
- 相机默认y轴为上方
定义
照相机就是这样一个抽象,它定义了三维空间到二维屏幕的投影方式,用“照相机”这样一个类比,可以使我们直观地理解这一投影方式。而针对投影方式的不同,照相机又分为正交投影照相机与透视投影照相机。
camera种类
PerspectiveCamera(透视相机)
这种投影模式是被设计用来模拟人类眼睛观察事物的方式。这是3d渲染中最经常使用的投影模式
-
演示
-
代码示例
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 ); scene.add( camera );
-
源码
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元素以及其他场景是很有用的。
-
演示
-
代码示例
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 );
-
源码
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个照相机
-
演示
-
代码示例
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立体效果,视差栅栏的场景
-
演示
-
代码示例
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相机
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。