three.js入门

要准备开始做3D展示的H5，所以准备在下班后和周末开始提前练习，学习。

做一个3d h5，直接从webGL开始，不太现实，于是准备先练习使用框架，在three.js和Babylon纠结了一下后，考虑到：本人新手，three年代久远，社区活跃，于是选择了three。

three中文社区：http://www.webgl3d.cn      在上面可以按步骤下载源码，和环境安装，本人家里用的windows，所以直接iis本地服务。

three搭建界面基本元素，套路如下：

1.创建一个场景（scene），场景相对于一块画布

2.创建模型材质对象（geometry），材质对象相当于画布里面画画的内容，创建完后，scene add geometry

3.创建光源（light），光源的作用是影响材质对面显示的样子，就像现实生活中不同光源下看到的东西不一样，光源有分很多种，比如：点光，环境光，创建完成后，scene add light

4.创建摄像机（camera），摄像机顾名思义，就是找一个角度去观看物体，画面呈现的角度就是摄像机决定的，相机也分种类：正交和透视，正交可见区域是一个立方体，远近模型大小都一样，和人眼看到的不一样；透视则类似人眼，近大远小，创建完成后，

5.创建渲染器对象（renderer）渲染操作，指定场景相机作为参数  renderer add  scene   add camera

 

下面开始实际代码：

//创建场景

var scene = new THREE.Scene()；

 

//创建材质对象

var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry

var material = new THREE.MeshLambertMaterial({

      color: 0x0000ff

}); //材质对象Material

 var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

 scene.add(mesh); //网格模型添加到场景中

 

//注意：此处坐标系如果用屏幕作为标准：向右是x轴正，向左反之，想上是y轴正，向下反之，屏幕向外是z轴正，向里反之。

 

//创建光源

//点光源

 var point = new THREE.PointLight(0xffffff);

 point.position.set(400, 200, 300); //点光源位置

 scene.add(point); //点光源添加到场景中

 //环境光

var ambient = new THREE.AmbientLight(0x444444);

 scene.add(ambient);

 

//创建相机

var width = window.innerWidth; //窗口宽度

var height = window.innerHeight; //窗口高度

var k = width / height; //窗口宽高比

var s = 900; //三维场景显示范围控制系数，系数越大，显示的范围越大

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

camera.position.set(200, 300, 200); //设置相机位置

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

 

//创建渲染器

var renderer = new THREE.WebGLRenderer();

renderer.setSize(width, height);//设置渲染区域尺寸

renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色

document.body.appendChild(renderer.domElement); //body元素中插入canvas对象 //执行渲染操作   指定场景、相机作为参数

 renderer.render(scene, camera);

 

 

 

如此，一个简单的展示3D立方体的网页就出来了。