我的three.js学习记录（一）

在之前因为项目需要使用WebGL技术做网页应用，但是苦于自己没有接触，只是使用过OpenGL。然后接触到了thre.js这个第三方库之后我突然心情很愉快，这将节省我很多时间。

过了这个项目之后，就再也没有看过它了，最近翻开我的个人记录发现了在角落边缘堆尘的three.js决定再看一下，然后记录下来以便以后翻看，毕竟多一个技能也挺好的。

three.js简介

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。

这个项目的目标是创建一个易于使用的,轻量级,3 d库。这个库提供<canvas>,< svg >,CSS3D和WebGL渲染器。

以上来自百度百科和Github上面的简介（如果我没有翻译错）

https://baike.baidu.com/item/three.js/7896801?fr=aladdin

https://github.com/mrdoob/three.js/blob/dev/README.md

本人入门three.js时的链接地址

http://www.hewebgl.com/

https://threejs.org/examples/

http://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html

https://www.qcloud.com/community/article/924964?fromSource=gwzcw.149972.149972.149972

http://www.ituring.com.cn/book/1272

http://www.cnblogs.com/zjf-1992/p/6276779.html

http://www.cnblogs.com/amy2011/

基础知识

首先三维的存在需要有一个空间可以让我们的物体加载进去，这就是我们three.js中的场景（scene），这个是我们三维的空间，比如我们画一个立方体，画完了就放在这个场景中给渲染出来。

除了一个空间，当然还要一个摄像机（camera），这个相当于我们的眼睛，我们能看到东西不仅仅是因为它的存在，而是我们还看到了，这点很重要，但是在three.js中照相机的坐标表示是使用的右手坐标

当然了看的到的也需要真实的存在，这里就需要我们加入物体。

加入了物体之后就需要我们渲染出我们的这个三维世界了，这里就需要用到我们的渲染器（renderer）它可以将我们的场景渲染出来

入门之一个点

经过以上的陈述自己也知道有些什么是必备的，所以现在我们来画出一个点

初始化渲染器

			var renderer, width = window.innerWidth, height = window.innerHeight;

			 //创建一个div可供放置渲染器
			var container = document.createElement('div');
			//将这个div置入body
			document.body.appendChild(container);
			//新建渲染器，其中设置antialias为true
			renderer = new THREE.WebGLRenderer({
			  antialias: true //这里是抗锯齿，比如我们看到一条斜线有很多跟锯子形状的齿，这里可以弱化那些锯齿
			});
			//设置渲染器的尺寸
			renderer.setSize(width, height);
			//将我们的渲染器嵌入之前创建的div容器
			container.appendChild(renderer.domElement);
			//设置渲染器的颜色（白色）以及alpha值（这里可以理解为透明度，颜色深浅）
			renderer.setClearColor(0xFFFFFF, 1.0);

初始化相机

			var camera;
			//这里采用了透视投影相机，看到的东西类似于人眼，越远越小
            //参数1: fov 广角，也就是看到的平面的大小到你眼睛的角度，越大看到的越多
            //参数2: aspect 平面的宽高比
            //参数3: near 近处你可以看见的距离
            //参数4: far 远处可以看见的距离
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
            //设置相机的位置
            camera.position.x = 0;
            camera.position.y = 1000;
            camera.position.z = 0;
            //设置相机的朝向，z为1跟我们头朝上一样（这里是右手坐标系）
            camera.up.x = 0;
            camera.up.y = 0;
            camera.up.z = 1;
            //设置相机对焦的点，跟我们眼球盯住的点一样
            camera.lookAt({
                x: 0,
                y: 0,
                z: 0
            });

初始化场景和点并渲染

var scene;
scene = new THREE.Scene();
//new THREE.CubeGeometry(5, 5, 5)确定我们的形状，这是一个几何体，画出来是正方形，这里我们用足够小的正方形表示一个点
//new THREE.MeshBasicMaterial({color: 0xFF0000})确定我们的材质
//new THREE.Mesh(geometry, material)这就是我们的物体了，这是用网格来体现的
//点成线，线成面，面成体Mesh就是由很多点线组成的
var point = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), new THREE.MeshBasicMaterial({
   color: 0xFF0000
}));
//向场景中添加物体point
scene.add(point);
//渲染场景
renderer.render(scene, camera);

这里的代码显得有点乱，不过具体的流程已经给出来了，并且有注释，入门应该是很方便的，最后我也会贴出代码

入门之一条线

画一条线跟一个点的差别不大，只需要改变创建物体的那一段代码就行，如下：

var geometry = new THREE.Geometry();
            var material = new THREE.LineBasicMaterial({vertexColors: THREE.VertexColors});
            var color1 = new THREE.Color(0x444444), color2 = new THREE.Color(0xFF0000);

            // 线的材质可以由2点的颜色决定
            var p1 = new THREE.Vector3(-100, 0, 100);
            var p2 = new THREE.Vector3(100, 0, -100);
            geometry.vertices.push(p1);
            geometry.vertices.push(p2);
            geometry.colors.push(color1, color2);

            var line = new THREE.Line(geometry, material, THREE.LinePieces);
            scene.add(line);

产品展示

经过奋战，入门了点和线之后结果如下显示

以上的代码已经上传Github