保存到桌面加入收藏设为首页
java开发
当前位置:首页 > java开发

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> <meta charset=&#39;UTF-8&#39;><title>3.js测试二</title> </head> <body onload=&#39;init()&#39;> <canvas id=&#39;mainCanvas&#39; width=&#39;400px&#39; height=&#39;300px&#39; ></canvas> <script type=&#39;text/javascript&#39; src=&#39;js/three.min.js&#39;></script> <script type=&#39;text/javascript&#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 wireframe: true }) ); scene.add(cube); // render renderer.render(scene camera); } </script> </body></html> 

      带详细注释的请参考第一篇。

      其中,THREE.MeshBasicMaterial(基础网格材质)的wireframe属性如果为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)。

      下一篇会先容透视投影照相机。


最近更新

精彩推荐

阅读排行

本站所有站内信息仅供娱乐参考,不作任何商业用途,不以营利为目的,专注分享快乐,欢迎收藏本站!
所有信息均来自:百度一下 (威尼斯人官网)