内容简介:WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染。WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏。原生的WebGl比较复杂,主要通过对顶点着色器和片元着色器的操作,来实现渲染,但实现起来比较复杂,需要一定的数学基础,但更多的是需要学习基础的耐心。
WebGL学习----Three.js学习笔记(1)
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/thr... 。
环境搭建
为了以后的学习方便,首先是搭建一个万能框架,所有的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/sta...
至此,一个万能的架子就已经搭建完成,可以开始编写第一个three.js程序
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 创建表单框架之前的小建议
- 如何创建与框架无关的 JavaScript 插件
- 如何创建与框架无关的 JavaScript 插件
- 如何动手创建一个简单的MVVM框架
- 使用 Neuroph Java 框架创建人工神经网络
- [译] 一个思路,如何尝试创建自己的 CSS 框架?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Algorithms to Live By
Brian Christian、Tom Griffiths / Henry Holt and Co. / 2016-4-19 / USD 30.00
A fascinating exploration of how insights from computer algorithms can be applied to our everyday lives, helping to solve common decision-making problems and illuminate the workings of the human mind ......一起来看看 《Algorithms to Live By》 这本书的介绍吧!