WebGL學習教程之Three.js學習筆記(第一篇)

更新時間：2019年04月25日 12:03:58 作者：nsytsqdtn

Three.js是一個js的開源框架，它把webgl的所有東西都封裝好了，我們不再需要去了解webgl那些比較麻煩的細節(jié)，直接在此框架上進行開發(fā)，既方便，又快捷，而且很容易就能學習,感興趣的朋友跟隨小編一起看看吧

webgl介紹

WebGL是一種3D繪圖協(xié)議，它把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染。

WebGL技術標準免去了開發(fā)網(wǎng)頁專用渲染插件的麻煩，可被用于創(chuàng)建具有復雜3D結構的網(wǎng)站頁面，甚至可以用來設計3D網(wǎng)頁游戲。

原生的WebGl比較復雜，主要通過對頂點著色器和片元著色器的操作，來實現(xiàn)渲染，但實現(xiàn)起來比較復雜，需要一定的數(shù)學基礎，但更多的是需要學習基礎的耐心。

Three.js介紹

Three.js是一個js的開源框架，它把webgl的所有東西都封裝好了，我們不再需要去了解webgl那些比較麻煩的細節(jié)，直接在此框架上進行開發(fā)，既方便，又快捷，而且很容易就能學習，相對于原生的webgl花100多行代碼畫幾個三角形，Three.js只需要幾行代碼就能實現(xiàn)更復雜的3D效果。

下載地址： https://github.com/mrdoob/three.js。

環(huán)境搭建

為了以后的學習方便，首先是搭建一個萬能框架，所有的three.js開發(fā)都可以在此框架上進行。

<!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();//網(wǎng)頁全屏播放
    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的代碼如下：

//進入全屏模式的函數(shù)
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();
    }
  }
  //監(jiān)聽事件
  document.onkeydown = function (ev) {
    keydownForScreen(ev);
  }
  //按鍵檢測，112對應鍵盤的F2，可以檢測其他的鍵位
  function keydownForScreen(ev) {
    if (ev.keyCode == 113) {
      requestFullScreen();
      requestFullScreen('body');
      requestFullScreen('#main');
    }
  }
}
//加載性能監(jiān)視器的函數(shù)
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);
}
//屏幕適應的函數(shù)
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/stats.js

至此，一個萬能的架子就已經(jīng)搭建完成，可以開始編寫第一個three.js程序

總結

以上所述是小編給大家介紹的WebGL學習教程之Three.js學習筆記,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章: