WebGL学习教程之Three.js学习笔记(第一篇)

程序员文章站 2023-11-14 14:34:16

webgl介绍 webgl是一种3d绘图协议，它把javascript和opengl es 2.0结合在一起，通过增加opengl es 2.0的一个javascript...

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效果。

下载地址：。

环境搭建

为了以后的学习方便，首先是搭建一个万能框架，所有的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的下载地址：

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

总结

以上所述是小编给大家介绍的webgl学习教程之three.js学习笔记,希望对大家有所帮助

上一篇： Android自定义简单的顶部标题栏

下一篇：在Python中使用zlib模块进行数据压缩的教程

WebGL学习教程之Three.js学习笔记(第一篇)