资讯专栏INFORMATION COLUMN

three.js中两种常用的摄像机模式

fish / 2474人阅读

摘要:中常用的有两种,透视投影相机与正交投影相机。这里的投影是指将三维空间中的物体坐标投影到二维平面上。正交投影是只考虑所有点的坐标,每一个二维空间中的点都是与轴平行的直线在观察平面上的投影。所看到的物体大小不会受到距离远近的影响。

three.js中常用的camera有两种,透视投影相机(PerspectiveCamera)与正交投影相机(OrthographicCamera)。
这里的投影是指将三维空间中的物体坐标投影到二维平面上。

图片来源:https://www.script-tutorials....

透视投影是将每个点都投影到三维空间中,看起来更符合真实世界看到的物体。
正交投影是只考虑所有点的XY坐标,每一个二维空间中的点都是与Z轴平行的直线在观察平面上的投影。所看到的物体大小不会受到距离远近的影响。这种相机模式常见于一些旧的2D游戏(比如红警)

PerspectiveCamera(fov, aspect, near, far) 有四个参数:
fov - field of view,视野角,下图中绿色英文标注的地方,是距离观测点near长度处,最上端与最下端之间的角度
aspect - 画面横宽比
near - 相机最近范围内可以看到的物体的距离
far - 相机最远范围内可以看到的物体的距离


图片来源:https://www.youtube.com/watch...

OrthographicCamera(left, right, top, bottom, near, far)有六个参数
left, right, top, bottom - 分别是红色点距离左右上下边框的距离,对应图中XY轴的值;
near - 场景开始渲染并可以显示的起点,对应图中Z轴坐标的值,通常为负;
far - 场景结束渲染的终点,对应图中Z轴坐标的值,通常为正;

图片来源:https://www.youtube.com/watch...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107241.html

相关文章

  • three.js 简介

    摘要:对于自身不能发光的物体,需要给场景添加光源从而达到可视的效果。中渲染阴影的开销比较大,所以默认物体是没有阴影的,需要单独开启。主要用于检测动画运行时的帧数,可以显示表示每秒多少帧和每帧多少毫秒,越大越好,但太大会影响性能,一般为左右。 一、WebGL 与 three.js WebGL(Web Graphics Library)是一种3D绘图协议,它允许把JavaScript和OpenG...

    yankeys 评论0 收藏0
  • vue-threeJS数据驱动三维图形可视化

    摘要:数据驱动的三维图形可视化在信息暴涨的年间,冷暴力的扁平化确实有效降低用户的信息焦虑感,使有限的精力更高效处理过多的信息流。 数据驱动的三维图形可视化 在信息暴涨的2010-2016年间,冷暴力的扁平化确实有效降低用户的信息焦虑感,使有限的精力更高效处理过多的信息流。二维平面化扁平化在苹果等大头引领下,成为大众用户机器交流默认的语言。然后,随着PC、平板、手机、智能家居等用户持有终端的性...

    SegmentFault 评论0 收藏0
  • WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    摘要:学习笔记使用粒子系统模拟时空隧道本例的运行结果如图时空隧道演示地址的粒子系统的粒子系统主要是依靠精灵体来创建的,要实现中的粒子系统创建,一般有两种方式。 WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图:showImg(https://img-blog.csdnimg.cn/20190426222855492.png?x-oss-process=ima...

    Guakin_Huang 评论0 收藏0
  • Three.jsThree.js学习记录

    摘要:上帝觉得缺少了些生气,便用泥巴捏了一个小人儿,不叫亚当,她叫小芳。接下来预先恭喜你,你可以成为这网页世界的一个小上帝。使用可以向场景中发射光线。在下述案例中,从摄像机的位置向场景中鼠标的点击位置发射光线。 先得摆出几个关键词:场景、灯光、模型、材质、贴图与纹理、相机、渲染器。然后我开始装模作样地解释: 上帝说,要有场景!于是就有了场景,场景去纳这万事万物。 上帝说,要有光!于是就有了光...

    chanthuang 评论0 收藏0

发表评论

0条评论

fish

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<