我不想做webgl2:three js初步学习1

参考链接：

1. link https://blog.csdn.net/qq_25909453/article/details/80161083
2. link http://www.yanhuangxueyuan.com/Three.js/

基础知识

通过 < script src=“three.js”>< /script> 来引入js文件，可以达到分文件的效果

常用基本函数

渲染器

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);//设置渲染区域尺寸
  renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
  document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
  //执行渲染操作   指定场景、相机作为参数
  renderer.render(scene, camera);

周期渲染

为了实现周期性渲染，可以通过浏览器全局对象window对象的一个方法setInterval(),可以通过window对象调用该方法window.setInterval()，也可以直接以函数形式调用setInterval()。

// 间隔20ms周期性调用函数fun
setInterval("render()",20)

/ 渲染函数
function render() {
    renderer.render(scene,camera);//执行渲染操作
    mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
}
//间隔20ms周期性调用函数fun,20ms也就是刷新频率是50FPS(1s/20ms)，每秒渲染50次
setInterval("render()",20);

渲染频率

调用渲染方法.render()进行渲染的渲染频率不能太低，比如执行setInterval(“render()”,200);间隔200毫秒调用渲染函数渲染一次，相当于每秒渲染5次。渲染频率除了不能太低，也不能太高，太高的话计算机的硬件资源跟不上，函数setInterval()设定的渲染方式也未必能够正常实现。一般调用渲染方法.render()进行渲染的渲染频率控制在每秒30~60次，人的视觉效果都很正常，也可以兼顾渲染性能。

//设置调用render函数的周期为200ms，刷新频率相当于5你能明显的感受到卡顿
setInterval("render()",200);

函数requestAnimationFrame()

前面讲解threejs动画效果，使用了setInterval()函数，实际开发中，为了更好的利用浏览器渲染，可以使用函数requestAnimationFrame函数 requestAnimationFrame()和setInterval()一样都是浏览器window对象的方法。
requestAnimationFrame()参数是将要被调用函数的函数名，requestAnimationFrame()调用一个函数不是立即调用而是向浏览器发起一个执行某函数的请求， 什么时候会执行由浏览器决定，一般默认保持60FPS的频率，大约每16.7ms调用一次requestAnimationFrame()方法指定的函数，60FPS是理想的情况下，如果渲染的场景比较复杂或者说硬件性能有限可能会低于这个频率。

function render() {
        renderer.render(scene,camera);//执行渲染操作
        mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
        requestAnimationFrame(render);//请求再次执行渲染函数render
    }
render();

均匀旋转

在实际执行程序的时候，可能requestAnimationFrame(render)请求的函数并不一定能按照理想的60FPS频率执行，两次执行渲染函数的时间间隔也不一定相同，如果执行旋转命令的rotateY的时间间隔不同，旋转运动就不均匀，为了解决这个问题需要记录两次执行绘制函数的时间间隔。

使用下面的渲染函数替换原来的渲染函数即可，rotateY()的参数是0.001t，也意味着两次调用渲染函数执行渲染操作的间隔t毫秒时间内，立方体旋转了0.001t弧度，很显然立方体的角速度是0.001弧度每毫秒(0.0001 rad/ms = 1 rad/s = 180度/s)。

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();

相机

相机构造函数的的前四个参数定义的是拍照窗口大小， 就像平时拍照一样，取景范围为大，被拍的人相对背景自然变小了。camera.position.set(200, 300, 200);和camera.lookAt(scene.position);定义的是相机的位置和拍照方向，可以更改camera.position.set(200,300,200);参数重新定义的相机位置，把第一个参数也就是x坐标从200更改为250， 你会发现立方的在屏幕上呈现的角度变了，这就像你生活中拍照人是同一个人，但是你拍照的位置角度不同，显示的效果肯定不同。

var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);

场景

几何体

//创建一个立方体几何对象Geometry
var geometry = new THREE.BoxGeometry(100, 100, 100);
//创建一个球体几何对象
var geometry = new THREE.SphereGeometry(60, 40, 40);

材质Material

var material=new THREE.MeshLambertMaterial({color:0x0000ff});

光源

参数0xffffff定义的是光照强度

var point=new THREE.PointLight(0xffffff)；