怎么制作小程序赚钱_WebGL学习教程之Three.js学习笔

日期:2021-01-07 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

WebGL学习教程之Three.js学习笔记(第一篇)       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效果。

环境搭建

为了以后的学习方便,首先是搭建一个万能框架,所有的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);
}

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

总结

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