Three.js学习之正交投影照相机


Posted in Javascript onAugust 01, 2016

前言

Three.js是一个3Djs库,webGL开源框架中比较优秀的一个。除了webGL以外,Three.js还提供了基于Canvas、SVG标签的渲染器,调试建议使用Chrome或者Firefox。

1.照相机

图形学中的照相机定义了三维空间到二维屏幕的投影方式。

针对投影方式照相机分为正交投影照相机和透视投影照相机。

2.两种相机的区别与适用范围

正交投影:

 Three.js学习之正交投影照相机

透视投影:

 Three.js学习之正交投影照相机

正交投影就像数学课上画的;而透视投影有一个基本点,就是远处的物体比近处的物体小,远大近小。

对于制图、建模软件通常使用正交投影;而对于其他大多数应用,通常使用透视投影。

3.正交投影照相机

正交投影照相机的构造函数:

Three.OrthographicCamera(left,right,top,bottom,near,far)

六个参数分别代表正交投影照相机拍摄到的六个面的位置。

其中,near表示近平面与相机中心点的垂直距离far表示远平面与相机中心点的垂直距离

 Three.js学习之正交投影照相机

若要保持照相机的横纵比例,(right-left)(top-bottom)的比例需与canvas的宽高比例一致。

由图可见near与far的值应为正值,且far>near。如果最后两个值是(0,0),也就是near和far值相同了,视景体深度没有了,整个视景体都被压成个平面了,就会显示不正确。

4.正交投影照相机实例

源码:

<!DOCTYPE html>

<html>

  <head>

   <meta charset="UTF-8">

<title>3.js测试二</title>  

  </head>

  <body onload="init()">

    <canvas id="mainCanvas" width="400px" height="300px" ></canvas>

    <script type="text/javascript" src="js/three.min.js"></script>

    <script type="text/javascript">

      function init() {

        var renderer = new THREE.WebGLRenderer({

          canvas: document.getElementById('mainCanvas')

        });

        renderer.setClearColor(0x000000);

        var scene = new THREE.Scene();

        // 设置照相机

        var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);

        camera.position.set(0, 0, 5);

        //camera.lookAt(new THREE.Vector3(0, 0, 0));

        scene.add(camera);

        // 创建立方体

        var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),

            new THREE.MeshBasicMaterial({

              color: 0xff0000,

              wireframe: true

            })

        );

        scene.add(cube);

        // render

        renderer.render(scene, camera);

      }

    </script>

  </body>

</html>

其中,THREE.MeshBasicMaterial(基础网格材质)的wireframe属性如果为true,则将材质渲染成线框。

可以看到当前位置后面的边会与前面的完全重合:

 Three.js学习之正交投影照相机

4.1 改变视景体长宽比例

这里canvas的宽高比为4:3,照相机的水平距离为4,垂直距离为3,因此长宽比例保持不变(1:1)。

若将照相机的水平距离减小为2,

var camera = new THREE.OrthographicCamera(-1,1,1.5,-1.5,1,10);

物体会被拉长:

 Three.js学习之正交投影照相机

照相机的视野范围变窄了,导致正方体在视野范围内的横向比例增加了,因此表现为正方体变宽了。

4.2 改变相机位置

例子中的相机位置是(0,0,5),由于照相机默认是面向z轴负方向放置的,所以能看到原点处的正方体。

将照相机的位置向右移动1个单位:

var camera = new THREE.OrthographicCamera(-2,2,1.5,-1.5,1,10);

camera.position.set(1,0,5);

照相机面对着物体,所以照相机右移,所照的物体向左移:

 Three.js学习之正交投影照相机

4.3 改变视景体位置

将视景体设置的更靠右:

var camera = new THREE.OrthographicCamera(-1,3,1.5,-1.5,1,10);

camera.position.set(1,0,5);

和右移照相机一样。

 Three.js学习之正交投影照相机

4.4 改变照相机角度

camera.position.set(4,-3,5);

camera.lookAt(new THREE.Vector3(0, 0, 0));

但是现在照相机沿z轴负方向观察的,因此观察不到正方体,只看到一片黑。我们可以通过lookAt函数指定它看着原点方向:

camera.lookAt(new THREE.Vector3(0, 0, 0));

注意,lookAt函数接受的是一个THREE.Vector3的实例,不要写成camera.lookAt(0, 0, 0)

好了,以上就是Three.js学习之正交投影照相机的全部内容,希望给大家学习Three.js有所帮助,小编陆续还会更新关于Three.js的文章,请大家继续关注三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 #Javascript
JQuery之proxy实现绑定代理方法
Aug 01 #Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 #Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 #Javascript
Javascript OOP之面向对象
Jul 31 #Javascript
JavaScript的字符串方法汇总
Jul 31 #Javascript
javascript 数组的正态分布排序的问题
Jul 31 #Javascript
You might like
利用PHP如何实现Socket服务器
2015/09/23 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
jQuery中读取json文件示例代码
2013/05/10 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
浅析Python基础-流程控制
2016/03/18 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
python图像和办公文档处理总结
2019/05/28 Python
python设置随机种子实例讲解
2019/09/12 Python
wxPython实现绘图小例子
2019/11/19 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
快速创建python 虚拟环境
2020/11/28 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
最新计算机专业自荐信
2013/10/16 职场文书
工地门卫岗位职责
2013/12/30 职场文书
个人求职信范文分享
2014/01/31 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
论群众路线学习笔记
2014/11/06 职场文书