ThreeJS入门

最近也是刚刚又看了一下threeJS,之前的时候也看过，刚一拿到这个官网的文档，第一反应就是这个是什么鬼啊，根本无法下手，确实是对于一个从没有接触过的新者来说确实有点挑战。 然后我去看了看webgl的官网，这家伙，全tm是收费的。好在一个初级教程视频是免费的，于是我先看了前期的几个视频，后面的设计到算法什么的较为复杂我就没有看了，然后现在也是初见雏形吧，把这点小小的成就与大家分享一下，看了本片文章你就会感觉threejs其实也没有那么困难

threeJS三大要素

一、 摄像机

//创建摄像机   
//	PerspectiveCamera 透视摄像机 
//	参数 ：  
//		1. 视野角度 无论在什么时候,都能在显示器看到的场景的范围,值是一个角度
//		2. 长宽比   宽度/长度  比如咱们看到的电视人物被压扁
//		3. 剩下的两个值是  远剪切面和近剪切面   也就是说当物体所在的位置离摄像机的远剪切面远或者比摄像机的近剪切面近的时候,物体不被渲染
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 
//指定一个位置 万一新物体没在这个范围内呢  
	camera.position.set(0, 1, 10);	

二、 场景

scene = new THREE.Scene();

三、 渲染器

//创建渲染器    
renderer = new THREE.WebGLRenderer();
//设置渲染器的大小  对于分辨率比较低的设备  可以传入第三个参数为false
renderer.setSize(window.innerWidth, window.innerHeight);

上面的三大元素创建好之后