WebGL three.js學習筆記建立three.js代碼的基本框架

時間 2019-11-10

標籤 webgl three.js 學習筆記建立代碼基本框架欄目 JavaScript 简体版

原文原文鏈接

WebGL學習----Three.js學習筆記（1）

webgl介紹

WebGL是一種3D繪圖協議，它把JavaScript和OpenGL ES 2.0結合在一塊兒，經過增長OpenGL ES 2.0的一個JavaScript綁定，WebGL能夠爲HTML5 Canvas提供硬件3D加速渲染。javascript

WebGL技術標準免去了開發網頁專用渲染插件的麻煩，可被用於建立具備複雜3D結構的網站頁面，甚至能夠用來設計3D網頁遊戲。
原生的WebGl比較複雜，主要經過對頂點着色器和片元着色器的操做，來實現渲染，但實現起來比較複雜，須要必定的數學基礎，但更多的是須要學習基礎的耐心。css

Three.js介紹

Three.js是一個js的開源框架，它把webgl的全部東西都封裝好了，咱們再也不須要去了解webgl那些比較麻煩的細節，直接在此框架上進行開發，既方便，又快捷，並且很容易就能學習，相對於原生的webgl花100多行代碼畫幾個三角形，Three.js只須要幾行代碼就能實現更復雜的3D效果。html

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

環境搭建

爲了之後的學習方便，首先是搭建一個萬能框架，全部的three.js開發均可以在此框架上進行。git

<!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的代碼以下：github

//進入全屏模式的函數
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...web

至此，一個萬能的架子就已經搭建完成，能夠開始編寫第一個three.js程序canvas