WebGL three.js学习笔记 创建three.js代码的基本框架

unityd 2019-07-01

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程序

相关推荐