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="/UploadFiles/2021-04-02/three.js">其中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学习笔记,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！