什么是three.js

1 2	Three.js 是一款 webGL 框架，由于其易用性被广泛应用。 Three.js 在 WebGL 的 API 接口基础上，又进行的一层封装。

什么是WebGL

WebGL（Web 图形库）是一种 JavaScript API，用于在任何兼容的 
Web 浏览器中呈现交互式 3D 和 2D 图形，而无需使用插件。WebGL 
通过引入一个与 OpenGL ES 2.0 紧密相符合的 API，
可以在 HTML5 <canvas> 元素中使用。

Three.js和webGL的关系

WebGL 原生 API 是一种非常低级的接口，而且还需要一些数学和图形学的相关技术。
对于没有相关基础的人来说，入门真的很难，Three.js 将入门的门槛降低了一大截，
对 WebGL 进行封装，简化我们创建三维动画场景的过程。
简而言之：WebGL 和 Three.js 的关系，相当于 JavaScript 和 jQuery 的关系。

Three.js的基础知识

基础三大组件：

场景（scene）、相机（camera）、渲染（render）

三大组件关系：

场景是一个物体的容器，开发者把需要的物体放在场景中，相机的作用就是把场景里的物体拍下来，渲染器就是把相机拍下来的图片放在浏览器中显示。

三大组件介绍：

场景（scene）

场景就只有一种，用THREE.Scene来表示，构建一个场景的代码如下：var scene = new THREE.Scene();场景是所有物体的容器，你需要把显示的内容，放入到场景里面，才有机会被相机拍到，从而渲染到web页面上。

相机（camera）

相机决定了场景中哪个角度的景色会显示出来，就像你在屋里摆了个摄像头，照着哪里，就显示哪里。相机有两种：正投影相机（对象和相机之间的距离不会影响渲染效果，无远近之分）和透视相机（距离相机越远的地方，被渲染的越小）。

渲染器（render）

渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。

开发工具

Three.js 是一个 JavaScript 库，所以，我们不需要搭建复杂的开发环境，只需要有一个可以编辑 JavaScript 的编辑器和支持 Three.js 的浏览器（主要有：Google Chrome 9+、Firefox 4+、Opera 15+、Safari 5.1+、Internet Explorer 11 和 Microsoft Edge）就可以使用 Three.js 来创建 WebGL 应用。
推荐：WebStorm
我自己用的是sublime text3

案例学习

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Stats插件案例</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body onload="init()">
    <!-- 引入资源文件 -->
<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
<script src="http://www.wjceo.com/lib/js/libs/stats.min.js"></script>
<script>
    //声明一些全局变量
    var renderer, camera, scene, geometry, material, mesh, stats;

    //初始化渲染器
    function initRenderer() {
        renderer = new THREE.WebGLRenderer(); //实例化渲染器 THREE.WebGLRenderer，这是一个基于WebGL渲染的渲染器
        renderer.setSize(window.innerWidth, window.innerHeight); //设置浏览器窗口的宽和高  
        document.body.appendChild(renderer.domElement); 
        //实例化渲染器时生成的一个canvas画布 添加到dom
    }

    //初始化场景
    function initScene() {
        scene = new THREE.Scene(); //实例化场景
    }

    //初始化相机
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //实例化相机
// 实例化了一个透视相机，效果是近大远小，需要四个值分别是视野，宽高比，近裁面和远裁面。我们分别介绍一下这四个值：
// 视野：当前相机视野的宽度，值越大，渲染出来的内容也会更多。
// 宽高比：默认是按照画布的显示的宽高比例来设置，如果比例设置的不对，会发现渲染出来的画面有拉伸或者压缩的感觉。
// 近裁面和远裁面：这个是设置相机可以看到的场景内容的范围，如果场景内的内容位置不在这两个值内的话，将不会被显示到渲染的画面中。

        camera.position.set(0, 0, 15);
     // camera.position.set函数是设置当前相机的位置，函数传的三个值分别是x轴坐标，y轴坐标和z轴坐标。

    }

    //创建模型
    function initMesh() {
        geometry = new THREE.BoxGeometry( 2, 2, 2 ); //创建几何体  实例化了一个THREE.BoxGeometry立方体的几何体对象，实例化的三个传值分别代表着立方体的长度，宽度和高度。我们全部设置的相同的值，将渲染出一个标准的正立方体。
        material = new THREE.MeshNormalMaterial(); //创建材质  这种材质的特点是，它会根据面的朝向不同，显示不同的颜色。

        mesh = new THREE.Mesh( geometry, material ); //创建网格  THREE.Mesh实例化需要传两个值，分别是几何体对象和材质对象，才可以实例化成功。
        scene.add( mesh ); //将网格添加到场景
    }

    //运行动画
    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 ); //渲染界面  渲染的render方法需要两个值，第一个值是场景对象，第二个值是相机对象。这意味着，你可以有多个相机和多个场景，可以通过渲染不同的场景和相机让画布上显示不同的画面。
    }

    //性能检测框
    function initStats() {
        stats = new Stats();
        document.body.appendChild(stats.dom);
    }

    //初始化函数，页面加载完成是调用
    function init() {
        initRenderer();
        initScene();
        initCamera();
        initMesh();
        initStats();

        animate();
    }
</script>
</body>
</html>

在场景当中，我们能够看到左上角会有一个性能检测的小框：
前面的数值代表当前每秒的渲染帧率，后面的括号内的值是当前的场景渲染的帧率范围。