threejs 透视相机PerspectiveCamera

实例

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

构造函数

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面
只有离相机的距离大于near值,小于far值,且在相机的可视角度之内,才能被相机投影到。

视锥

图片定点对应的发射线和两个裁切平面一起定义了一个截断的金字塔,也就是视锥。

视锥

想象拿着一根直棍子的一端对着相机并拍照。如果棍子正对着照片的中心,垂直于相机镜片,那么相机上只会看到一个圆;除了棍子的近端其它部分会被遮挡。如果将棍子向上移,慢慢能看见棍子的远端,但是将棍子向上翘起又会将远端隐藏起来。继续向上移动并向上调整棍子角度,圆形的端点最终会到达照片的边缘。在这个点上,现实世界中所有在棍子所在线上方的物体在照片中都不会出现。

物体在视锥中移动

常用属性与方法

  1. position: Vector3
    摄像机位置坐标


    设置摄像机位置
camera.position.set(0,100,0);
//camera.position.x = 0;
//camera.position.y = 100;
//camera.position.z = 0;
  1. aspect: Float
    摄像机视锥体的长宽比,通常是使用画布的宽/画布的高。默认值是1(正方形画布)。
    页面大小变化更新摄像机视锥体的长宽比和渲染器输出画布的大小
onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
  1. fov: Float
    摄像机视锥体垂直视野角度,从视图的底部到顶部,以角度来表示。默认值是50
    不知从哪儿粘来的一段鼠标滚轮事件
  onmousewheel(event) {
    event.preventDefault();
    if (event.wheelDelta != 0) {
      camera.fov += event.wheelDelta > 0 ? 1 : -1;
      if (camera.fov > 150) {
       camera.fov = 150;
      }
      else if (camera.fov < 30) {
        camera.fov = 30;
      }
      camera.updateProjectionMatrix();
    }
  }
  1. lookAt(vector: Vector3 | number, y?: number, z?: number): void
    相机默认是由正z轴看像-z轴(相机镜头对着-z轴方向拍),就是我们由屏幕外向屏幕内看一样。设置相机位置后记得更新相机的朝向。
 camera.lookAt(0, 0, 0);
  1. updateProjectionMatrix(): void;
    更新摄像机投影矩阵。在任何参数被改变以后必须被调用。
camera.updateProjectionMatrix();
  1. 等等属性与方法。暂时只记录用到的。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容