前言
“哈？要搞3D？”
“恩，之后一个项目要建造一栋楼，要靠你了少年！”
于是我默默的打开了 webgl新手入门手册 http://www.hewebgl.com/article/getarticle/27
后来，我成功的完成了这个这个3d楼层。http://wisdom.pppppc.com/home/index/threes.html
这个过程中，我经历了很多。接下来我将分享我过程中的心得。
第一步：新手教程
方法一：进入webgl官网 three.js新手教程。（我就是这样干的，花了3-4天通了遍基础）
方法二：找之前大神的基础教程。
方法三：加webgl相关QQ群，假扮萌妹，求帮助~~
以下是个画网格的例子，通过这个例子，我给大家分析画一个3d的需要（不是导入模型~）
var renderer,camera,scene,light; var width,height; //物体 var cube; //初始化渲染器函数 function initThree(){ width = document.getElementById("canvas3d").clientWidth; height = document.getElementById("canvas3d").clientHeight; //初始化渲染器 （花括号里面为：锯齿优化） renderer = new THREE.WebGLRenderer({antialias:true}); //大小 renderer.setSize(width,height); document.getElementById("canvas3d").appendChild(renderer.domElement); //背景颜色 renderer.setClearColor(0xFFFFFF,1.0); } //初始化相机函数 function initCamera(){ camera = new THREE.PerspectiveCamera(45,width/height,1,5000); camera.position.x=0; camera.position.y=1000; camera.position.z=0; camera.up.x = 0; camera.up.y = 0; camera.up.z = 1; camera.lookAt({x:0,y:0,z:0}); } //初始化场景函数 function initScene(){ scene = new THREE.Scene(); } //初始光函数 function initLight(){ light = new THREE.DirectionalLight(0xff0000,1.0,0); light.position.set(200,200,200); scene.add(light); } //初始化物体函数 function initObj(){ var geometry = new THREE.Geometry(); var material = new THREE.LineBasicMaterial({vertexColors:true}); var color1 = new THREE.Color("#444444"),color2= new THREE.Color("#ff0000"); var p1 = new THREE.Vector3(-500,0,0); var p2 = new THREE.Vector3(500,0,0); geometry.vertices.push(p1); geometry.vertices.push(p2); geometry.colors.push(color1,color2); for(var i=0;i<21;i++){ var line = new THREE.Line(geometry,material,THREE.LinePieces); line.position.z=(i*50)-500; scene.add(line); var line = new THREE.Line(geometry,material,THREE.LinePieces); line.position.x=(i*50)-500; line.rotation.y=90*Math.PI/180; scene.add(line); } } //整体初始化 function threeStart(){ initThree(); initScene(); initLight(); //对象 initObj();
initCamera();
renderer.clear();
renderer.render(scene, camera);
}
对应着代码，我解释一下：
1，变量：renderer 渲染器
首先我们的最终目标是要将我们代码画的物体渲染到网页上！
渲染的实现就是 ：
renderer.render(scene, camera);
2. 变量 ： camera 相机 （废话，我们tm要你翻译？）
这玩意叫相机，就相当于我们的眼睛。它是代替我们在3D世界里面看的东西。它有视野大小，视野最近/最远，位置坐标的定义。一般情况，我们移动它位置和方向来控制我们的视野。
3.变量：scene 场景 （这就是我们看到的一切）
场景里面主要有2个东西，
①物体，用three画的\加载的模型等，一般情况，我会将所要的物体全部放到initObj()里面。
②光，没有光，那么物体确实存在在那儿，但是你看不到~~
这些物体和光都需要在渲染前放到场景内。
scene.add(light); scene.add(line);
总结：
一个3d效果的流程：
①初始化渲染器
initThree();
②初始化场景
initScene();
③初始化物体、光 add到场景中
initLight();
initObj();
④把我们的眼睛（相机）给放好位置（初始化）（相机初始位置最终渲染前就行）
initCamera();
⑤最后把场景和相机放到渲染器中，咔咔咔咔咔咔~~噗 页面就出来了。
renderer.render(scene, camera);
哈哈哈哈哈哈哈，详细的那些相机~~光啊~~~什么的建议看webgl官网或者这个大神的博客：http://blog.csdn.net/birdflyto206/article/category/6132005
下一次，我主要这个楼宇项目的起步。
