学习笔记——Three.js框架（一）

学习笔记——Three.js框架（一）

第一次写文章，纪念一下！！！

特别感谢郭隆邦老师的博客带来的帮助，分享一下链接/

Three.js电子书的网站可能更新了，我就按照之前的代码和中文文档记一下笔记。

Three.js是一个基于WebGL的3Djavascript框架，之所以学是因为我是学gis的，扩充一下专业技能和知识广度，也通过发文章记笔记的方式更深入的学习。

下载好Three.js后引入，创建第一个3D场景

<script src="../build/three.min.js"></script>

首先Three程序主要包括三个大的部分或者说是概念

• 场景 Scene()
• 相机 Camera()
• 渲染器 Renderer()

创建一个三维场景的主要步骤：

1.创建场景对象构造函数new Scene()

var scene=new THREE.Scene();

Scene()构造函数一般不传参数，源码位置为src/scenes/Scene.js，Object3D是基类，Scene是继承它的子类。

2.创建相机对象

再创建相机对象之前先初始化几个参数：

var width=window.innerWidth;//窗口宽度
var height=window.innerHeight;//窗口高度
var k=width/height;//窗口宽高比
var s=200;//三维场景显示范围控制系数，系数越大，显示的范围越大

创建相机的构造函数：

var camera=new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000)

OrthographicCamera()是正交相机，采用的是正交投影，就是物体不随距离而变化，它的基类是Camera()

该构造函数有六个参数，分别定义了照相机的窗口的左右上下近远，一旦渲染的对象超出窗口就会被裁剪掉。

接下来可以设置相机的位置和拍照的方向

camera.position.set(200,300,200);//设置相机位置
camera.lookAt(scene.position);//设置相机方向(指向的场景对象)

3.创建渲染器对象

var renderer=new THREE.WebGLRenderer();

渲染器用来渲染场景

renderer.setSize(width,height);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff,1);//设置背景颜色
document.body.appendChild(renderer.domElement);//body中插入canvas对象
//执行渲染操作 指定场景、相机作为参数
der(scene,camera);

.setSize()方法：设置渲染的区域大小 

.setClearColor():设置背景颜色和透明度，颜色可以是合法的颜色值，透明度为0-1之间

.domElement:一个canvas，渲染器在其上绘制输出。渲染器的构造函数会自动创建(如果没有传入canvas参数)

.render():用相机渲染一个场景或是其它类型的对象

三大部分创建好之后，场景就会被渲染出来，但这时场景中什么东西都没有，接下来给场景中添加一个正方体。

var geometry=new THREE.BoxGeometry(100,100,100);
var material=new THREE.MeshLambertMaterial({color:0x0000ff
});
var mesh=new THREE.Mesh(geometry,material);//网格模型对象
scene.add(mesh);//网格模型添加到场景中

立方体对象通过构造函数BoxGeometry()创建，可传入的参数有六个，分别是XYZ轴的长度和它们的分段数，默认值均为1。其基类是BufferGeometry

材质用的是网格Lambert材质，可以设置颜色。其基类是Material

用Mesh()将立方体和材质结合起来，其基类是Object3D

最后通过scene.add()方法将网格对象添加到场景中

这时你看到场景中的立方体是黑色的，这是因为你没有向场景中添加光源，没有光立方体自然就是黑色的

var point =new THREE.PointLight(0xffffff);
point.position.set(400,200,300);//点光源位置
scene.add(point);//点光源添加到场景中

PointLight()可以创建一个点光源，传入的参数可以是颜色和光照强度。基类是Light

最后设置点光源的位置并将点光源添加到场景中，就可以看到立方体的颜色了。