脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Three.js学习笔记

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

 更新时间：2019年04月25日 12:03:58   作者：nsytsqdtn  
Three.js是一个js的开源框架，它把webgl的所有东西都封装好了，我们不再需要去了解webgl那些比较麻烦的细节，直接在此框架上进行开发，既方便，又快捷，而且很容易就能学习,感兴趣的朋友跟随小编一起看看吧

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/three.js。

环境搭建

为了以后的学习方便，首先是搭建一个万能框架，所有的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/stats.js

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

总结

以上所述是小编给大家介绍的WebGL学习教程之Three.js学习笔记,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • Bootstrap 3浏览器兼容性问题及解决方案

    Bootstrap 3浏览器兼容性问题及解决方案

    这篇文章主要为大家详细介绍了 Bootstrap 3 浏览器兼容性问题及其对应的解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 快速上手uni-simple-router

    快速上手uni-simple-router

    这篇文章主要介绍了uni-simple-router,本文通过实例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-11-11
  • JavaScipt中栈的实现方法

    JavaScipt中栈的实现方法

    这篇文章主要介绍了JavaScript数据结构与算法之栈详解,本文讲解了对栈的操作、对栈的实现实例等内容,需要的朋友可以参考下
    2016-02-02
  • JavaScript实现全选取消效果

    JavaScript实现全选取消效果

    这篇文章主要为大家详细介绍了JavaScript实现全选取消效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-12-12
  • HTML中不支持静态Expando的元素的问题

    HTML中不支持静态Expando的元素的问题

    HTML中不支持静态Expando的元素的问题...
    2007-03-03
  • js图片放大镜效果实现方法详解

    js图片放大镜效果实现方法详解

    这篇文章主要为大家详细介绍了js图片放大镜效果的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • js子页面获取父页面数据示例

    js子页面获取父页面数据示例

    这篇文章主要介绍了js子页面如何获取父页面数据,需要的朋友可以参考下
    2014-05-05
  • 详解JavaScript中常用操作符的使用

    详解JavaScript中常用操作符的使用

    在 JavaScript 中，有一些操作符可以使代码更简洁、易读和高效。这篇文章为大家整理了11个JavaScript中常用操作符的使用，需要的可以参考一下
    2023-04-04
  • easyui-edatagrid.js实现回车键结束编辑功能的实例

    easyui-edatagrid.js实现回车键结束编辑功能的实例

    下面小编就为大家带来一篇easyui-edatagrid.js实现回车键结束编辑功能的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • uni-app小程序实现微信在线聊天功能(私聊/群聊)

    uni-app小程序实现微信在线聊天功能(私聊/群聊)

    这篇文章主要介绍了uni-app小程序实现微信在线聊天（私聊/群聊）,今天记录一下项目核心功能的实现过程。页面UI以及功能逻辑全部来源于微信，即时聊天业务的实现使用socket.io，前端使用uni-app开发，后端服务器基于node实现，数据库选择mongoDB，需要的朋友可以参考下
    2023-02-02

最新评论