three.js基础教程学习之camera的理解

最近学习了three.js基础教程，由于WebGL中文网中对camera的解说不够详细，自己又找了几篇博文看，以下是我对camera的理解，有错误的地方希望得到大佬们的指出，同时也希望能帮到像我一样的小白。
首先camera的使用如下：

 var camera;
function initCamera() {camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);//创建一个透视投影相机/*camera.position(x, y, z)表示相机的位置*/camera.position.x = 0;camera.position.y = 1000;//表示相机所在位置camera.position.z = 0;/*camare.up(x, y, z)表示相机朝着哪个方向看*/camera.up.x = 0;camera.up.y = 1;//表示相机镜头朝着y轴看,也就是视线跟y轴平行camera.up.z = 0;/*看向原点*//* camera.lookAt({x : 0,y : 0,z : 0});*/camera.lookAt(0, 0, 0);//由于three.js版本问题，我这样使用lookAt()才能在自己的网页中看到预期效果
}

下面用在坐标系中画网格深入理解camera,代码如下：

 function initObject() {/*先创几何向量点*/var geometry = new THREE.Geometry();geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );//作为向量的起始点geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );//作为向量的终止点/*循环绘制向量以画出网格*/for ( var i = 0; i <= 20; i ++ ) {var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );//两个点连成线且平行于x轴line.position.z = ( i * 50 ) - 500;//垂直于z轴等距平铺所画出的线scene.add( line );var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );//再画一条线line.rotation.y = 90 * Math.PI / 180;//把新画的线绕着y轴旋转90度，此时平行于z轴line.position.x = ( i * 50 ) - 500;//垂直于x轴平铺处理后的线scene.add( line );}
}

效果如下：

总结：这个例子可以理解为我站在y轴距离原点1000的地方即 camera.position（0,1000,0），拿着相机，镜头对着y轴的负方向即camare.up(0, 1, 0)，视野平行于y轴，看向原点即camera.lookAt(0, 0, 0)，那么此时在我的视野中，我所看到的是x-z平面，y轴在这个平面上是一个点，然后画出来的网格就投射在这个平面上。可以根据自己需求相应改变这些参数的。
网格实例的完整代码，这里所给的参数值跟本文给的参数值有所不同，不过都能达到预期效果，我改变参数值是为了更好理解camera，更方便对网格实例进行说明。
O(∩_∩)O哈哈哈~感觉自己像是在初中课堂上给初中生描述这个实例的立体图一样，没办法，对于我这种抽象思维不好的人，只能这样理解了。

three.js基础教程学习之camera的理解相关推荐

js基础教程学习笔记
document.write(); document.getElementById(); <script type="text/javascript"></scr ...
黑马程序员最新版JavaWeb基础教程-学习笔记
da@黑马程序员最新版JavaWeb基础教程-学习笔记 day06-HTML&CSS HTML HTML(HyperTest Markup Language):超文本标记语言是一门语言,所有 ...
Ember.js Essential Training Ember.js基础教程 Lynda课程中文字幕
Ember.js Essential Training 中文字幕 Ember.js基础教程中文字幕Ember.js Essential Training Ember.js是一个流行的开源JavaSc ...
linux磁盘符变化autofs,Linux基础教程学习笔记之Autofs自动挂载
Linux基础教程学习笔记之Autofs自动挂载 Autofs自动挂载: yum -y install autofs vim /etc/auto.master 在文件中添加下面行 /home/gue ...
网络存储 linux 访问,Linux基础教程学习笔记28——使用Samba访问网络存储
Linux基础教程学习笔记28--使用Samba访问网络存储 SMB用于Windows和类Linux系统直接的文件共享安装samba client包: [root@linuxidc~]# yum i ...
GSAP JS基础教程--动画的控制及事件
好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...
SQL基础教程学习第六站：数据更新
仅用于记录学习,欢迎批评指正,共同交流,共同进步,大神勿喷系列文章 SQL基础教程学习第一站:PostgreSQL下载安装以及如何创建并登录数据库: SQL基础教程学习第二站:数据库基本知识: SQ ...
批量加水印加logo#ps入门基础教程学习ps视频教程
批量加水印加logo#ps入门基础教程学习ps视频教程修图后期
Python基础教程学习笔记：第一章基础知识
Python基础教程第二版学习笔记 1.python的每一个语句的后面可以添加分号也可以不添加分号:在一行有多条语句的时候,必须使用分号加以区分 2.查看Python版本号,在Dos窗口中输入&q ...

three.js基础教程学习之camera的理解

three.js基础教程学习之camera的理解相关推荐

最新文章

热门文章