百度 验证网站,编程代码大全,电子商务网站设计原理知识点,域名商的网站搞清相机和坐标的关系在threejs初期很重要#xff0c;否则有可能会出现写了代码#xff0c;运行时一片漆黑的现象#xff0c;这种情况就有可能是因为你相机没弄对。
先来看一下threejs中的坐标(世界坐标) 坐标轴好理解#xff0c;大家只需要知道在three中不同颜色代表的轴…搞清相机和坐标的关系在threejs初期很重要否则有可能会出现写了代码运行时一片漆黑的现象这种情况就有可能是因为你相机没弄对。
先来看一下threejs中的坐标(世界坐标) 坐标轴好理解大家只需要知道在three中不同颜色代表的轴就行再就是坐标有正负之分。向前向右向上(天的为正数相反的为负数。
看一下相机 threejs中的相机3维建模软件的相机同理有near和far概念他们是相机镜头所在方向的前方的距离只有near和far之间部分物体才会显示出来这就是为什么图3只显示了盒子内部的一部分。后面我会用专题来介绍这个东西。 下面是为了帮助大家理解通过建模软件截取的图片通过前视图的视角来介绍相机和坐标由于距离之间的效果。
这里用的是世界坐标蓝色的z轴红色为x轴绿色为y轴。
灰色的是立方体盒子黑黄边的三角是相机
图1设置相机在z轴5米的通过前视图可以看出相机在z轴上头朝下正对着盒子顶部面。由于相机镜头是长方形并且离着盒子比较远所以最后一个图会发现镜头没有完全包裹住盒子顶部相机智能拍摄到盒子顶面部分(想象一下距离与可视范围的关系)。 图2将同样放在z轴上的相机与盒子的距离调整到3米从前视图可以看出与图1相比相机距离与盒子更近了效果就是由于相机离着盒子顶面太近了相机无法完全看到盒子整个顶部面只能拍摄到盒子顶面的一部分了。 图3我们将相机放到坐标的中心点也就是相机的那个橘黄色小圆点与坐标的中心点重合这时相机已经穿透到盒子内部了有意思的事情发生了图1图2看到的只是一个面现在我们能看到的不再是一个面了而是5个面了3D世界产生了。 通过上面3个图可以看出在3维世界中你能看到什么跟相机与物体所在的坐标位置是有关系的。不通的位置导致有可能你看到的物体是2维的后者是3维的。
下面通过运行threejs的代码再来看一下相机与坐标的关系 我们通过const axesHelper new THREE.AxesHelper();来生成一个坐标系对象来帮助我们理解坐标和相机。 代码1 上面代码中我在页面上添加了一个坐标但奇怪的是为什么一边漆黑呢问题点就在于默认相机与坐标系的圆点重合了相机镜头默认沿着z轴朝下所以坐标系不在相机的可是范围之内可以理解为相机镜头进地底下了。如下图 所以要想显示出坐标系只要把相机向z轴正向移动向天让镜头在坐标系之上就行了看下面代码
代码2 现在我打开代码19行的注释让相机向z正方向移动向天就会看到坐标系了。绿色是y轴红色是x轴。(思考1如果把代码19行改成camera.position.x5能看到坐标系么最后给出答案)
为什么看不到蓝色的z轴呢想象一下你现在在很高的地方拿着相机朝着地面上拍摄相机镜头本身就在z轴上所以自然看不到代表z轴这条线了。
如果想看到z轴怎么办呢只要让镜头从别的位置对着z轴就行了如下图
相机沿着x轴移动一段距离了然后让镜头朝着原点就可实现。
看下面代码 通过代码19行将相机位置沿着x轴进行了5米的移动然后通过代码20行将相机镜头朝向坐标原点然后就能看到蓝色的z轴了但是x轴是不是就又没了至于原因如果不懂请留言。
那么现在想3个坐标系都看到咋办呢在移动下相机位置不就成了如下图 看代码的实现和效果 代码中通过19到21行设置相机位置然后可以看到3个坐标系了。大家可以尝试修改和注释19到21行的代码来查看区别有助于你理解相机和坐标的关系。
下面再看一个问题是不是感觉显示的坐标系有点小呀咋办呢我们说过相机镜头离着物体越近显示的看到的物体就越大同理我们让相机离着坐标系近一些不就成了修改代码19到21行如下 由于相机离着坐标系近了显示出的坐标轴就大了。
坐标与相机的关系就介绍到这了很好的理解相机与坐标位置还有相机镜头朝向对于后面开发threejs至关重要否则你很难理解一些3D效果的显示问题。 最后回答【思考1】的答案
如果将代码2中的19行的camera.position.z5改成camera.position.x5最后还是会看不到坐标系还是一片漆黑用下图说明原因 相机在x轴移动但是镜头默认还是朝下的(z轴这时镜头看到的还是地不是坐标轴这个对象所以一片漆黑。
