【three.js学习笔记】相机

KnewOne 发布于2019-08-22 16:04 / 2816人阅读

摘要：而针对投影方式的不同，照相机又分为正交投影照相机与透视投影照相机。我们需要为自己的程序选择合适的照相机。相机视椎体右面。

相机API

照相机就是这样一个抽象，它定义了三维空间到二维屏幕的投影方式，用“照相机”这样一个类比，可以使我们直观地理解这一投影方式。
而针对投影方式的不同，照相机又分为正交投影照相机与透视投影照相机。我们需要为自己的程序选择合适的照相机。

正交投影照相机

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

left: 相机视椎体（Camera frustum）左面。

right: 相机视椎体（Camera frustum）右面。

top: 相机视椎体（Camera frustum）上面。

bottom:相机视椎体（Camera frustum）下面。

near: 相机视椎体（Camera frustum）前面（靠近相机的这一面）。

far: 相机视椎体（Camera frustum）后面（远离相机的这一面）。

设置照相机

var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
camera.position.set(0, 0, 5);
scene.add(camera);

相机位置

camera.position.set(2, -2, 5);

相机朝向

镜头默认的方向是朝着z轴的负方向

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

lookAt函数接受的是一个THREE.Vector3的实例，因此千万别写成camera.lookAt(0, 0, 0)，否则非但不能得到理想的效果，而且不会报错，使你很难找到问题所在。

相机快门方向

相机快门默认向上，以相机自身为中心画坐标轴(本地坐标轴)默认为(0,0,0);

camera.up.z= 1;
camera.up.x =1;
camera.up.y =-1;

更新相机投影矩阵

camera.fov = fov;
camera.updateProjectionMatrix();

更新相机投影矩阵，必须在参数发生变化后调用。

透视投影照相机

THREE.PerspectiveCamera(fov, aspect, near, far)

视角fov：这个最难理解,我的理解是,眼睛睁开的角度,即,视角的大小,如果设置为0,相当你闭上眼睛了,所以什么也看不到,如果为180,那么可以认为你的视界很广阔,但是在180度的时候，往往物体很小，因为他在你的整个可视区域中的比例变小了。

近平面near：这个呢，表示你近处的裁面的距离。补充一下，也可以认为是眼睛距离近处的距离，假设为10米远，请不要设置为负值，Three.js就傻了,不知道怎么算了,

远平面far：这个呢，表示你远处的裁面,

4、纵横比aspect：实际窗口的纵横比，即宽度除以高度。这个值越大，说明你宽度越大，那么你可能看的是宽银幕电影了，如果这个值小于1，则为竖屏。

设置照相机

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);

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

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

Three.js学习笔记

摘要：和使用的坐标系是右手坐标系。与都是指到照相机位置在深度平面的位置，而照相机不应该拍摄到其后方的物体，因此这两个值应该均为正值。 Three.js是一个3D JavaScript库。Three.js封装了底层的图形接口，使得程序员能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染。一个典型的Three.js程序至少要包括渲染器（Renderer）、场景（Sc...

20171112 2019-08-21 15:12 评论0 收藏0
WebGL three.js学习笔记使用粒子系统模拟时空隧道（虫洞）

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

Guakin_Huang 2019-08-23 17:10 评论0 收藏0
【three.js学习笔记】场景

摘要：对象是所有不同对象的容器，也就是说该对象保存所有物体光源摄像机以及渲染所需的其他对象。对象又是被称为场景图，它不仅仅是一个对象数组，还包含了整个场景图树形结构中的所有节点每个添加到场景的对象，甚至包括本身都是继承自一个名为的对象。 THREE.Scene THREE.Scene 对象是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象。 THREE.S...

codecraft 2019-08-22 16:02 评论0 收藏0