-
Three.js基础探寻二-安度博客
时间:2019-02-04 14:52:50 作者: 来源: 阅读:105 评论:0内容摘要: 本篇主要先容照相机中的正交投影照相机。 第一篇传送门:Three.js基础探寻一1.照相机 图形学中的照相机界说了三维空间到二维屏幕的投影方式。 针对投影方式照相机分为正交投影照相机和透视投影照相机。2.两种相机的区别与适用规模 正交投影: 透视投影: 正交投......本篇主要先容照相机中的正交投影照相机。
第一篇传送门:Three.js基础探寻一
1.照相机
图形学中的照相机界说了三维空间到二维屏幕的投影方式。
针对投影方式照相机分为正交投影照相机和透视投影照相机。
2.两种相机的区别与适用规模
正交投影:
透视投影:
正交投影就像数学课上画的;而透视投影有一个基本点,就是远处的物体比近处的物体小,远大近小。
对于制图、建模软件通常使用正交投影;而对于其他大多数应用,通常使用透视投影。
3.正交投影照相机
正交投影照相机的结构函数:
Three.OrthographicCamera(leftrighttopbottomnearfar)
六个参数划分代表正交投影照相机拍摄到的六个面的位置。
其中,near体现近平面与相机中心点的垂直距离;far体现远平面与相机中心点的垂直距离。
图片泉源
若要保持照相机的横纵比例,(right-left)与(top-bottom)的比例需与canvas的宽高比例一致。
由图可见near与far的值应为正值,且far>near。如果最后两个值是(0,0),也就是near和far值相同了,视景体深度没有了,整个视景体都被压成个平面了,就会显示不正确。
4.正交投影照相机实例
源码:
<!DOCTYPE html><html> <head> <me
ta charset=&#39;UTF-8&#39;><title>3.js测试二</title> </head> <body on load=&#39;init()&#39;> <canvas id=&#39;mainCanvas&#39; width=&#39;400px&#39; height=&#39;300px&#39; ></canvas> <sc ript type=&#39;text/ja vasc ript&#39; src=&#39;js/three.min.js&#39;></sc ript> <sc ript type=&#39;text/ja vasc ript&#39;> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById(&#39;mainCanvas&#39;) }); 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 wirefr ame: true }) ); scene.add(cube); // render renderer.render(scene camera); } </sc ript> </body></html> 带详细注释的请参考第一篇。
其中,THREE.MeshBasicMaterial(基础网格材质)的wirefr
ame属性如果为true,则将材质渲染成线框。 可以看到当前位置后面的边会与前面的完全重合:
4.1 改变视景体长宽比例
这里canvas的宽高比为4:3,照相机的水平距离为4,垂直距离为3,因此长宽比例保持稳定(1:1)。
若将照相机的水平距离减小为2,
var camera = new THREE.OrthographicCamera(-111.5-1.5110);
物体会被拉长:
照相机的视野规模变窄了,导致正方体在视野规模内的横向比例增加了,因此体现为正方体变宽了。
4.2 改变相机位置
例子中的相机位置是(005),由于照相机默认是面向z轴负偏向放置的,所以能看到原点处的正方体。
将照相机的位置向右移动1个单元:
var camera = new THREE.OrthographicCamera(-221.5-1.5110);camera.position.set(105);
照相机面临着物体,所以照相机右移,所照的物体向左移:
4.3 改变视景体位置
将视景体设置的更靠右:
var camera = new THREE.OrthographicCamera(-131.5-1.5110);camera.position.set(105);
和右移照相机一样。
4.4 改变照相机角度
camera.position.set(4-35);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)。
下一篇会先容透视投影照相机。
最近更新
-
02-08Nodejs之MEAN栈开发(八) 用户认证与会话管理详解-安度博客
-
02-08使用echarts开发电子屏数据展示页面-安度博客
-
02-08ajax实例-安度博客
-
02-08前端资源多个产品整站一键打包&包版本管理(二)如何在bower的配置文件加上注释-安度博客
-
02-04Three.js基础探寻一-安度博客
-
02-04校招季 献给前端求职路上的你们(JS)-安度博客
-
02-04十分钟玩转 jQuery 实例大全-安度博客
-
02-04Javascript 如何生成Less和Js的Source map-安度博客
-
02-04jquery之别踩白块游戏的实现-安度博客
-
02-04jQuery.Deferred 源码分析-安度博客
精彩推荐
阅读排行
-
12-31京东2018年度账单开启!快来看看你一年花了多少钱 - 京东,年度账单 - IT之家-安度博客
-
12-2712306候补购票操作指南 - 12306,火车票,候补购票 - IT之家-安度博客
-
01-11Vue.js之初印象-安度博客
-
12-28微软零售店也遭抢劫了:几个月损失了5万美元 - Microsoft Store,微软,抢劫 - IT之家-安度博客
-
02-01AngularJS基础知识1-安度博客
-
02-04Three.js基础探寻四立方体 平面与球体-安度博客
-
12-31权健董事长登上《财富》封面?官方回应:靠PS - 权健,封面,财富 - IT之家-安度博客
-
01-06除夕火车票今日正式开抢!别错过这五大捡漏机会 - 火车票,春运,春节 - IT之家-安度博客
-
01-31Three.js快速入门-安度博客
-
01-09重磅!联通手机营业厅App开放互联网套餐变更:可在线换腾讯王卡、蚂蚁宝卡等 - 腾讯王卡,联通,互联网套餐 - IT之家-安度博客