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


Posted in Javascript onApril 25, 2019

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学习笔记,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
JS跨域问题详解
Nov 25 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
javascript for循环性能测试示例
Aug 07 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
Angular封装搜索框组件操作示例
Apr 25 #Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 #Javascript
详解javascript中的Error对象
Apr 25 #Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 #Javascript
vue2.0自定义指令示例代码详解
Apr 25 #Javascript
Vue开发之封装分页组件与使用示例
Apr 25 #Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 #Javascript
You might like
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
js下用层来实现select的title提示属性
2010/02/23 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
python中import与from方法总结(推荐)
2019/03/21 Python
Django CBV类的用法详解
2019/07/26 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
完美解决golang go get私有仓库的问题
2021/05/05 Golang
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis