threejs

threejs是对webGL的封装，容易上手
github地址
官网地址

特点

掩盖了3D渲染的细节，面向对象，包含数学库，速度快，扩展性强
文档粗糙，学习资源少，不是游戏引擎（需要相关的功能需要进行二次开发Babylon.js）
threejs在线编辑器

入门案例

    //初始化函数，页面加载完成是调用
    function init() {
        initRenderer(); // 渲染器
        initScene(); // 场景
        initCamera(); // 相机
        initMesh(); // 模型

        animate(); // 运行动画
    }

性能监测插件

fps：画面每秒传输的帧数。

stats插件

1. 引入

2. 实例化，添加到页面

    stats = new Stats();
    document.body.appendChild(stats.dom);

3. 更新渲染时间

    //运行动画
    function animate() {
      requestAnimationFrame(animate); //循环调用函数

      mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度
      mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度

      stats.update(); //更新渲染时间
      renderer.render(scene, camera); //渲染界面
    }

scene场景

场景：three.js放内容的容器，（内容：模型、灯光、照相机）。可以多个场景间切换。

Object3D对象

threejs中能够添加到场景的对象，全都继承自基类THREE.Object3D。这些对象又称为3d对象。

全局变量的继承情况

    //创建模型
    function initMesh() {
      geometry = new THREE.BoxGeometry(2, 2, 2);
      material = new THREE.MeshNormalMaterial(); 

      mesh = new THREE.Mesh(geometry, material); //创建3d对象

      mesh.name = 'myMesh'
      scene.add(mesh); //将3d对象添加到场景
      mesh.visible = false; // 不渲染模型
      // scene.remove(mesh); // 删除模型
    }
    //初始化函数，页面加载完成是调用
    function init() {
      initRenderer();
      initScene();
      initCamera();
      initMesh();
      // 打印3d对象
      console.log(scene.getObjectByName('myMesh'))
      animate();
    }