3D世界中的“眼睛”（1） ---照相机

姘搁『发布于2019-08-21 10:38 / 3367人阅读

摘要：但是对于的世界，仅仅依靠自己的眼睛还是不够，因为其中存在的面是无穷无尽的，所以我们需要一只特殊的眼睛照相机，来帮助我们浏览世界。

3D世界中的“眼睛”（1） ---照相机

相信很多人都看过微软2015开发者大会，其中有一段讲解window holographic让我觉得特别惊讶，我一直以为虚拟投影暂时还是人们幻想中的一种技术，现在确实是展示在我面前，也让我有一种想要弄懂其中奥秘的激情。从2D到3D的视觉转换到底有什么不同呢？作为一名菜鸟级别的前端开发者，我决定从Three.js方面入手，去理解3D世界的构成。

相对于2D的网页，我们可以仅仅依靠我们自己的眼睛来浏览页面。但是对于3D的世界，仅仅依靠自己的眼睛还是不够，因为其中存在的“面”是无穷无尽的，所以我们需要一只特殊的眼睛“照相机”，来帮助我们浏览3D世界。

在讲解相机之前，我们需要给3D的世界来一个定位，在2D页面中，我们一般会将页面的左上角作为一个原点，这样一来，整个页面都可以通过X、Y来定位，同样的3D也是这样，下图为3D世界的坐标定位。

以下内容会涉及到具体代码的实现，如果有读者只想了解相机的原理，那么可以直接跳到最后一段的总结上面。

正交投影照相机

正交投影相机的效果比较直观，相当于三视图中的主（正）视图，由6个参数和相机定位决定相机的位置和可视区域，其中(right-left)代表相机的宽度，(top-bottom)代表相机的高度，near代表相机的最近点，far代表相机的最远点。其代码设置如下：

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

效果图如下，其中灰色部分代表可视区域，可视区域代表你能看到的地方。

基本设置

设置相机的基本属性:

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

在原点位置创建边长为1的正方体，使用wireframe作为透视观察。

var geometry = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({
        color: 0xff0000,
        wireframe: true
    })
);
scene.add(geometry);

最后得到的效果如下，这里我们只看到一个矩形，是因为生成的正方体默认在于原点，相机初始化的位置在(0,0,5)，镜头默认对向-Z轴，这样一来的话，相当于看到正方体的一个侧面，也就是主视图。

假如将相机的near属性变为6，此时的正方体将超出相机的可视区域，效果如下

长宽比例的影响

这里相机的宽度和高度分别是4和3，假如将宽度设置为2，即

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

得到的效果图如下：

可以看到水平方向被拉大

位置的影响

之前相机设置在(0,0,5)的位置，由于相机是默认面向-Z轴，可以看到正方体，假如将相机往右平移1个单位，得到效果如下：

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

可以看到物体向左平移了，其实这个也不难理解，就好像一个相对运动的原理一样，你往右走，对于物体来讲，实际是往左移动。

同样的我们可以将相机默认的6个参数(-2, 2, 1.5, -1.5, 1, 10)改变为(-1, 3, 1.5, -1.5, 1, 10)，通过观察，可以发现和上图的效果是一样的。也说明了left、right和top、bottom的数值只决定相机的宽度和高度，一般宽度和高度的比例和渲染区域的宽高比例是一致的，不然会出现压缩或者拉伸的现象。

改变观察角度

为了能观察到整个立方体的结构，将相机的位置设为(4, -3, 5)，由于相机默认拍摄的方向是Z的负轴，此时是观察不到立方体，我们可以设置相机，让它指定原点进行拍摄

camera.position.set(4, -3, 5);
camera.lookAt(new THREE.Vector3(0, 0, 0));

效果如下：

需要注意的是lookAt接受的是THREE.Vector3的实例，不能直接设置camera.lookAt(0, 0, 0)，不然无法得到理想中的结果。

透视投影照相机

创建代码如下：

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

fov，代表竖直方向的张角（角度制）。
aspect，代表水平长度和竖直长度的比值（一般是渲染区域的长和宽）。
near，代表拍摄的最近距离。
far，代表拍摄的最远距离。

基本设置

创建透视投影照相机代码：

var camera = new THREE.PerspectiveCamera(45, 400 / 300, 1, 10);
camera.position.set(0, 0, 5);
scene.add(camera);

创建边长为1的正方体：

var cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({
        color: 0xff0000,
        wireframe: true
    })
);
scene.add(cube);

得到的效果：

竖直方向张角的比例

将原来相机竖直张角45改成60，得到的效果图如下：

可以看到，得到的物体变小，原因是因为其张角变大，导致可视区域变大，相对于物体来说就变小。

位置影响

将相机所在的位置向右平移一位，代码设置和效果图如下，为了结果更加清晰，取消透视。

var camera = new THREE.PerspectiveCamera(45, 1000 / 1000, 1, 10);
camera.position.set(1, 0, 5);
scene.add(camera);

var cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({
        color: 0xff0000,
        wireframe: false
    })
);

可以从结果上面看出，物体向左平移了，原理和正交相机一样，不同的就是，物体旋转了一定的角度，但是正交投影相机并没有旋转。原因是因为正交投影相机“观察”物体的原理其实就是平行投影，而透视投影照相机的成像原理是透视投影。

总结

由于笔者文笔水平有限，可能有人看到这里还是不明白相机的作用，举个简单的例子，假如你面前有一个立方体，那么无论你怎么去旋转这个立方体，你最多就只能看到3个面，而无法看到背面，这时候我们就需要一个特殊的“眼睛”，来帮助我们观察立方体的背面，而相机就是用来做这种事情的。下面有一些笔者自己写的demo演示，没有什么特别酷炫的效果：)。

http://ol.weixin.qq.com/protect/users/shijiezou/three/spreads.html

http://ol.weixin.qq.com/protect/users/shijiezou/three/earth.html

http://ol.weixin.qq.com/protect/users/shijiezou/three/audio.html
(上传音频文件，基本功能实现了，但是还没做优化)

相关资料：
官方文档
中文资料

GPU云服务器云服务器保护眼睛眼睛神秘的眼睛眼睛的颜色

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

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

带你玩转css3的3D！

摘要：透视即是以现实的视角来看屏幕上的事物，从而展现的效果。旋转则不再是平面上的旋转，而是三维坐标系的旋转，就包括轴，轴，轴旋转。必须与属性一同使用，而且只影响转换元素。可自由转载引用，但需署名作者且注明文章出处。 showImg(https://segmentfault.com/img/bVzJoZ); 话不多说，先上demo 酷炫css3走马灯/正方体动画： https://bupt-...

Panda 2019-08-29 11:03 评论0 收藏0
带你玩转css3的3D！

摘要：透视即是以现实的视角来看屏幕上的事物，从而展现的效果。旋转则不再是平面上的旋转，而是三维坐标系的旋转，就包括轴，轴，轴旋转。必须与属性一同使用，而且只影响转换元素。可自由转载引用，但需署名作者且注明文章出处。 showImg(https://segmentfault.com/img/bVzJoZ); 话不多说，先上demo 酷炫css3走马灯/正方体动画： https://bupt-...

archieyang 2019-08-01 15:32 评论0 收藏0
比人眼更精准，详解云识客双目活体检测技术

摘要：双活体，依然是前最可靠的防攻击段之。详解云识客活体检测技术以下，我们分析一种多重人脸区域共享的深度学习算法。光流法辅助单目活体判断最后，针对单目活体，云识客也采用光流法辅助活体判断的校验机制。以下这张照⽚，是真⼈实拍还是对着照⽚翻拍的？ showImg(https://segmentfault.com/img/bVbuoHD); 如果告诉你，这张照⽚，是对着照⽚翻拍的照⽚，你会不会惊...

whidy 2019-07-31 10:37 评论0 收藏0
CSS3 变换

摘要：概览变换也叫转换，主要包括以下几种旋转扭曲缩放和移动以及矩阵变形。变换没有扭曲操作，有移动，旋转，缩放。三，取消的变换，将变换应用到上并置于缩放前，改变缩放值，没有任何变化。概览 CSS3 变换也叫 2D/3D转换，主要包括以下几种：旋转(rotate) 、扭曲 (skew) 、缩放(scale) 和移动(translate) 以及矩阵变形(matrix) 。transform ...

wayneli 2019-08-28 18:22 评论0 收藏0
css3 做一个类似于翻书特效的3D动画

摘要：我们来看下做一个动画需要哪些东西。说明各个属性的作用代表物体距离浏览器是。下面我们做一个向下翻页的数字，和一个向做翻页的数字。我们来看下做一个css3 3D动画需要哪些东西。前面我们已经使用transition和transform做了一些简单的操作。设置3D场景做3D动画，我们首先要设置3D场景。3D场景我们通常用perspective和perspective-origin两个属...

jiekechoo 2019-08-29 16:41 评论0 收藏0