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 相关文章推荐
JS焦点图切换,上下翻转
May 12 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
JS实现仿微信支付弹窗功能
Jun 25 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
关于layui flow loading占位图的实现方法
Sep 21 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 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
PHP系统流量分析的程序
2006/10/09 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
javascript不可用的问题探究
2013/10/01 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
JS如何监听div的resize事件详解
2020/12/03 Javascript
python开发之for循环操作实例详解
2015/11/12 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
python导入时小括号大作用
2017/01/10 Python
python django事务transaction源码分析详解
2017/03/17 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
python获取中文字符串长度的方法
2018/11/14 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
正规的求职信范文分享
2013/12/11 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
学校运动会广播稿
2014/10/11 职场文书
2014年质量工作总结
2014/11/22 职场文书
2014年共青团工作总结
2014/12/10 职场文书
alibaba seata服务端具体实现
2022/02/24 Java/Android