WebGL学习----Three.js学习笔记（1）

webgl介绍

WebGL是一种3D绘图协议，它把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染。

WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏。
原生的WebGl比较复杂，主要通过对顶点着色器和片元着色器的操作，来实现渲染，但实现起来比较复杂，需要一定的数学基础，但更多的是需要学习基础的耐心。

Three.js介绍

Three.js是一个js的开源框架，它把webgl的所有东西都封装好了，我们不再需要去了解webgl那些比较麻烦的细节，直接在此框架上进行开发，既方便，又快捷，而且很容易就能学习，相对于原生的webgl花100多行代码画几个三角形，Three.js只需要几行代码就能实现更复杂的3D效果。

下载地址： https://github.com/mrdoob/thr...。

环境搭建

为了以后的学习方便，首先是搭建一个万能框架，所有的three.js开发都可以在此框架上进行。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Three.js</title>    <script src="../../../Import/three.js"></script>    <script src="../../../Import/stats.js"></script>    <script src="../../../Import/Setting.js"></script>    <style type="text/css">        div#canvas-frame {            border: none;            cursor: pointer;            width: 100%;            height: 850px;            background-color: #333333;        }    </style>    <script>        let renderer;        function initThree() {           //TODO        }        let camera;        function initCamera() {           //TODO        }        let scene;        function initScene() {           //TODO        }        let light;        function initLight() {           //TODO        }        let cube;        function initObject() {           //TODO        }                //提前定义好的一个功能文件，方便以后的每一个程序调用        function initSetting() {        loadAutoScreen(camera,renderer);//自适应屏幕        loadFullScreen();//网页全屏播放        loadStats();//性能检测插件        }        function threeStart() {            initSetting();            initThree();            initCamera();            initScene();            initLight();            initObject();            animation();        }                function animation(){            renderer.clear();            renderer.render(scene,camera);            stats.update();            requestAnimationFrame(animation);        }    </script></head><body onload="threeStart()"><div id="canvas-frame"></div></body></html>

其中Setting.js是我写在另一个文件里面的功能文件，把一些常用的功能放在里面，方便以后写的程序可以直接去调用
Setting.js的代码如下：

//进入全屏模式的函数function loadFullScreen() {    //进入全屏    function requestFullScreen(element) {        let de = document.querySelector(element) || document.documentElement;        if (de.requestFullscreen) {            de.requestFullscreen();        } else if (de.mozRequestFullScreen) {            de.mozRequestFullScreen();        } else if (de.webkitRequestFullScreen) {            de.webkitRequestFullScreen();        }    }//退出全屏    function exitFullscreen(element) {        let de = document.querySelector(element) || document.documentElement;        if (de.exitFullscreen) {            de.exitFullscreen();        } else if (de.mozCancelFullScreen) {            de.mozCancelFullScreen();        } else if (de.webkitCancelFullScreen) {            de.webkitCancelFullScreen();        }    }    //监听事件    document.onkeydown = function (ev) {        keydownForScreen(ev);    }    //按键检测，112对应键盘的F2，可以检测其他的键位    function keydownForScreen(ev) {        if (ev.keyCode == 113) {            requestFullScreen();            requestFullScreen('body');            requestFullScreen('#main');        }    }}//加载性能监视器的函数function loadStats() {    stats = new Stats();    stats.domElement.style.position = 'absolute';    stats.domElement.style.left = '8px';    stats.domElement.style.top = '8px';    let body = document.getElementsByTagName('body');    body[0].appendChild(stats.domElement);}//屏幕适应的函数function loadAutoScreen(camera, renderer) {    window.addEventListener('resize', onResize, false);    function onResize() {        camera.aspect = window.innerWidth / window.innerHeight;        camera.updateProjectionMatrix();        renderer.setSize(window.innerWidth, window.innerHeight);    }}

还有另一个引入的文件stats.js的下载地址：https://github.com/mrdoob/sta...

至此，一个万能的架子就已经搭建完成，可以开始编写第一个three.js程序