three.js-- (day01)1.整个程序的结构主要包括，场景，相机，渲染器。场景，相机都有了，通过渲染器可以

1.整个程序的结构

主要包括，场景，相机，渲染器。

场景，相机都有了，通过渲染器可以执行拍照这个动作。

在项目中，需要设置这三种对象，可以为THREE.Scene()、THREE.OrthographicCamera()、THREE.WebGLRenderer()，然后再通过总对象的子对象，属性方法设置。

相机对象和渲染对象相对简单，最难的是场景对象。

这张图很好的诠释了，绘制所需要的场景，相机，渲染器对象和属性。

2. requestAnimationFrame周期性渲染

1.requestAnimationFrame比seInterval 好用，为什么，因为一个是根据浏览器刷新率走的。每一帧执行一次。一个是定期执行。

let T0 = new Date();//上次时间 

function render() { 

let T1 = new Date();//本次时间 

let t = T1-T0;  //时间差 

T0 = T1;  //把本次时间赋值给上次时间 

requestAnimationFrame(render); 

renderer.render(scene,camera);//执行渲染操作

mesh.rotateY(0.001*t);//旋转角速度0.001弧度每毫秒 
} 
render();

这段代码的意思是，让过去的时间段和旋转的角度有个正比关系，过去时间越久，旋转角度越大，保持一个0.001正常的比例。

    function render() {
      renderer.render(scene, camera);//执行渲染操作
      requestAnimationFrame(render);//请求再次执行渲染函数render
    }
    render();
    var controls = new THREE.OrbitControls(camera, renderer.domElement);  //创建控件对象

上述代码什么意思，OrbitControls这是新构造方法，传入camera和元素，通过改变camera来改变视图的旋转，缩放，平移。浏览器会自动检测鼠标键盘的变化，并根据鼠标和键盘的变化更新相机对象的参数。 更新相机对象参数变化之后，还需要实时刷新，不然视图无法发生改变。所以需要使用一个requestAnimationFrame。

注意:开发中不要同时使用requestAnimationFrame()或controls.addEventListener('change', render)调用同一个函数，这样会冲突。

3. 添加物体

...
   var geometry2 = new THREE.SphereGeometry(60, 40, 40);
     var material2 = new THREE.MeshLambertMaterial({
      color: 0xff00ff
      })
      var mesh2 = new THREE.Mesh(geometry2, material2)
        mesh2.translateY(140);
        scene.add(mesh2)
 ...

4.设置透明度

  var material2 = new THREE.MeshLambertMaterial({
      color: 0xff0000,
      opacity: 0.6,
      transparent: false
  });//材质对象

点光源

可以添加多个

// 点光源2  位置和point关于原点对称
    var point2 = new THREE.PointLight(0xffffff);
    point2.position.set(-400, -200, -300); //点光源位置
    scene.add(point2); //点光源添加到场景中

5. 顶点位置数据解析渲染

几何体本质就是若干个三角形拼出来的网格模型。对于球体网格模型而言，同样是通过三角形拼出来一个球面，三角形数量越多，网格模型表面越接近于球形。

6.顶点颜色数据插值计算

顶点位置坐标数据和几何体顶点颜色数据一一对应。

之所以出现渐变是因为Threejs通过底层WebGL进行渲染的时候会对顶点的颜色数据进行插值计算。

相当于从顶点的颜色扩散效果。

7. 顶点法向量数据光照计算

    var normals = new Float32Array([
      0, 0, 1, //顶点1法向量
      0, 0, 1, //顶点2法向量
      0, 0, 1, //顶点3法向量

      0, 1, 0, //顶点4法向量
      0, 1, 0, //顶点5法向量
      0, 1, 0, //顶点6法向量
    ]);
    // 设置几何体attributes属性的位置normal属性
    geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的法向量数据

简单来说，想要模型有点光源效果，棱角分明，需要加入数据光照计算。