搞清相机和坐标的关系在threejs初期很重要，否则有可能会出现写了代码，运行时一片漆黑的现象，这种情况就有可能是因为你相机没弄对。
先来看一下threejs中的坐标(世界坐标)
![[threejs]相机与坐标,threejs,threejs](https://imgs.yssmx.com/Uploads/2023/08/626408-1.png)
坐标轴好理解，大家只需要知道在three中不同颜色代表的轴就行，再就是坐标有正负之分。向前，向右，向上(天）的为正数，相反的为负数。
看一下相机：
![[threejs]相机与坐标,threejs,threejs](https://imgs.yssmx.com/Uploads/2023/08/626408-2.png)
threejs中的相机（3维建模软件的相机同理）有near和far概念，他们是相机镜头所在方向的前方的距离，只有near和far之间部分物体，才会显示出来（这就是为什么图3只显示了盒子内部的一部分）。后面我会用专题来介绍这个东西。
下面是为了帮助大家理解通过建模软件截取的图片，通过前视图的视角来介绍相机和坐标由于距离之间的效果。
这里用的是世界坐标，蓝色的z轴，红色为x轴，绿色为y轴。
灰色的是立方体盒子，黑黄边的三角是相机
图1：设置相机在z轴5米的，通过前视图可以看出相机在z轴上，头朝下正对着盒子顶部面。由于相机镜头是长方形并且离着盒子比较远，所以最后一个图会发现镜头没有完全包裹住盒子顶部，相机智能拍摄到盒子顶面部分(想象一下距离与可视范围的关系)。
![[threejs]相机与坐标,threejs,threejs](https://imgs.yssmx.com/Uploads/2023/08/626408-3.png)
图2：将同样放在z轴上的相机与盒子的距离调整到3米，从前视图可以看出，与图1相比，相机距离与盒子更近了，效果就是由于相机离着盒子顶面太近了，相机无法完全看到盒子整个顶部面，只能拍摄到盒子顶面的一部分了。
![[threejs]相机与坐标,threejs,threejs](https://imgs.yssmx.com/Uploads/2023/08/626408-4.png)
图3：我们将相机放到坐标的中心点，也就是相机的那个橘黄色小圆点与坐标的中心点重合，这时相机已经穿透到盒子内部了，有意思的事情发生了，图1图2看到的只是一个面，现在我们能看到的不再是一个面了，而是5个面了，3D世界产生了。
![[threejs]相机与坐标,threejs,threejs](https://imgs.yssmx.com/Uploads/2023/08/626408-5.png)
通过上面3个图可以看出：在3维世界中，你能看到什么跟相机与物体所在的坐标位置是有关系的。不通的位置导致有可能你看到的物体是2维的后者是3维的。
下面，通过运行threejs的代码，再来看一下相机与坐标的关系：
我们通过const axesHelper = new THREE.AxesHelper();来生成一个坐标系对象，来帮助我们理解坐标和相机。
代码1：
![[threejs]相机与坐标,threejs,threejs](https://imgs.yssmx.com/Uploads/2023/08/626408-6.png)
上面代码中，我在页面上添加了一个坐标，但奇怪的是为什么一边漆黑呢？问题点就在于默认相机与坐标系的圆点重合了，相机镜头默认沿着z轴朝下，所以坐标系不在相机的可是范围之内（可以理解为相机镜头进地底下了）。如下图：
![[threejs]相机与坐标,threejs,threejs](https://imgs.yssmx.com/Uploads/2023/08/626408-7.png)
所以要想显示出坐标系，只要把相机向z轴正向移动（向天），让镜头在坐标系之上就行了，看下面代码
代码2：
![[threejs]相机与坐标,threejs,threejs](https://imgs.yssmx.com/Uploads/2023/08/626408-8.png)
现在我打开代码19行的注释，让相机向z正方向移动（向天），就会看到坐标系了。绿色是y轴，红色是x轴。(思考1：如果把代码19行改成camera.position.x=5能看到坐标系么？最后给出答案)
为什么看不到蓝色的z轴呢？想象一下，你现在在很高的地方拿着相机朝着地面上拍摄，相机镜头本身就在z轴上，所以自然看不到代表z轴这条线了。
如果想看到z轴怎么办呢？只要让镜头从别的位置对着z轴就行了，如下图：
![[threejs]相机与坐标,threejs,threejs](https://imgs.yssmx.com/Uploads/2023/08/626408-9.png)
相机沿着x轴移动一段距离了，然后让镜头朝着原点就可实现。
看下面代码：
![[threejs]相机与坐标,threejs,threejs](https://imgs.yssmx.com/Uploads/2023/08/626408-10.png)
通过代码19行，将相机位置沿着x轴进行了5米的移动，然后通过代码20行将相机镜头朝向坐标原点，然后就能看到蓝色的z轴了，但是x轴是不是就又没了，至于原因如果不懂请留言。
那么现在想3个坐标系都看到咋办呢？在移动下相机位置不就成了，如下图：
![[threejs]相机与坐标,threejs,threejs](https://imgs.yssmx.com/Uploads/2023/08/626408-11.png)
看代码的实现和效果：
![[threejs]相机与坐标,threejs,threejs](https://imgs.yssmx.com/Uploads/2023/08/626408-12.png)
代码中通过19到21行设置相机位置，然后可以看到3个坐标系了。大家可以尝试修改和注释19到21行的代码来查看区别，有助于你理解相机和坐标的关系。
下面再看一个问题，是不是感觉显示的坐标系有点小呀，咋办呢？我们说过相机镜头离着物体越近显示的看到的物体就越大，同理，我们让相机离着坐标系近一些不就成了，修改代码19到21行，如下：
![[threejs]相机与坐标,threejs,threejs](https://imgs.yssmx.com/Uploads/2023/08/626408-13.png)
由于相机离着坐标系近了，显示出的坐标轴就大了。
坐标与相机的关系就介绍到这了，很好的理解相机与坐标位置还有相机镜头朝向，对于后面开发threejs至关重要，否则你很难理解一些3D效果的显示问题。
最后，回答【思考1】的答案：
如果将代码2中的19行的camera.position.z=5改成camera.position.x=5最后还是会看不到坐标系，还是一片漆黑，用下图说明原因：
![[threejs]相机与坐标,threejs,threejs](https://imgs.yssmx.com/Uploads/2023/08/626408-14.png)
文章来源：https://www.toymoban.com/news/detail-626408.html
相机在x轴移动，但是镜头默认还是朝下的(z轴），这时镜头看到的还是地，不是坐标轴这个对象，所以一片漆黑。文章来源地址https://www.toymoban.com/news/detail-626408.html
到了这里，关于[threejs]相机与坐标的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
