前言
“哈？要搞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
下一次，我主要这个楼宇项目的起步。
three.js探索笔记一
原文地址：https://www.cnblogs.com/baiDog/p/8406173.html