three的初步探索之表象篇

首先three.js是啥？用来干啥的？首先在谈这个之前，先说下canvas，canvas是h5新生的一个功能，可以用来画图，表达许多更绚丽的特效，然后canvas目前有个软当，就是只能2d，不支持三维世界的，那么如果我们要在canvas做出3d效果咋办，这时候需要一个东西，叫WebGL,这玩意是啥？百度定义：WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。如果不理解，那就认为他是个让js做出3D效果的标准，那么three.js是什么，他是WebGL的一个框架，可以理解为jquery之于js；好了这里three.js是啥，用来干啥的都理解七八层了；然后看下，它里面有什么东西？

three.js它主要有三个对象，场景，相机，渲染器，把相机和场景通过渲染器渲染，从而实现页面的3d效果；场景里包含模型，和灯光

直接demo，来先初步理解下

首先，我们需要个场景，于是代码如下

var scene = new THREE.Scene()

这时候我们一个场景就有了，但是这是空的，里面什么都没有，连光都没有，好于是，我先给这个场景补光，加光源代码如下

    var light= new THREE.PointLight(‘white‘)//这里光色为白色，这里是个点光源，点光源一共三个参数，颜色，强度，距离，如果距离为0，则点光源与距离无关
    light.position.set(300,400,200)，这里是光源的位置,注意这里三个数值分别对应x,y,z轴的位置，三个值为0就看不见了，具体对应变化，自己调试
    scene.add(light)，把光添加到场景中

光有了，没东西啊，我们加东西，代码如下，以最基础的网格模型为例

    var gel= new THREE.BoxGeometry(100,100,100)，注意这里是这个模型的几何大小形状
    var metail = new THREE.MeshLambertMaterial({color:‘red‘})//这里是它的颜色
    var mash = new THREE.Mesh(gel,metail);
    scene.add(mash);

物质有了光有了，场景出现了，但是没相机，拍不下来，所以添加相机

    var carmea=new THREE.PerspectiveCamera(40,800/600,1,1000)//这里第一个参数是视角，第二个是是场景的长宽比，第三个是近距离，第四个是远离了，如果近距离太大会看不见
    carmea.position.set(200,200,200)设置相机位置
    carmea.lookAt(scene.position)//相机对着场景中心点，默认原点

好了拍好了，要咋才能看到呢，要冲洗，所以需要渲染了，代码如下

    var render=new THREE.WebGLRenderer()
    render.render(scene,carmea)
    document.body.appendChild(render.domElement)

　　ok这时候运行，一个three的案例就生成了