WebGL是一种3 d绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5画布提供硬件3 d加速渲染。
WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3 d结构的网站页面,甚至可以用来设计3 d网页游戏。
,原生的WebGl比较复杂,主要通过对顶点着色器和片元着色器的操作,来实现渲染,但实现起来比较复杂,需要一定的数学基础,但更多的是需要学习基础的耐心。
Three.js是一个js的开源框架,它把webgl的所有东西都封装好了,我们不再需要去了解webgl那些比较麻烦的细节,直接在此框架上进行开发,既方便,又快捷,而且很容易就能学习,相对于原生的webgl花100多行代码画几个三角形,Three.js只需要几行代码就能实现更复杂的3 d效果。
下载地址:https://github.com/mrdoob/three.js。
为了以后的学习方便,首先是搭建一个万能框架,所有的three.js开发都可以在此框架上进行。
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Three.js
& lt;脚本src=" https://www.yisu.com/Import/three.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/Import/stats.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/Import/Setting.js "祝辞& lt;/script>
& lt;风格类型=" text/css "比;
div# canvas-frame {
边界:没有;
光标:指针;
宽度:100%;
身高:850 px;
background - color: # 333333;
}
& lt;/style>
& lt; script>
让渲染器;
函数initThree () {//TODO
}
让相机;
函数initCamera () {//TODO
}
让现场;
函数initScene () {//TODO
}
让光;
函数initLight () {//TODO
}
让数据集;
函数initObject () {//TODO
}//提前定义好的一个功能文件,方便以后的每一个程序调用
函数initSetting () {
loadAutoScreen(相机,渲染器);//自适应屏幕
loadFullScreen();//网页全屏播放
loadStats();//性能检测插件
}
函数threeStart () {
initSetting ();
initThree ();
initCamera ();
initScene ();
initLight ();
initObject ();
动画();
}
函数动画(){
renderer.clear ();
renderer.render(场景、摄像头等);
stats.update ();
requestAnimationFrame(动画);
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=" canvas-frame "祝辞& lt;/div>
& lt;/body>
& lt;/html>
其中Setting.js是我写在另一个文件里面的功能文件,把一些常用的功能放在里面,方便以后写的程序可以直接去调用
Setting.js的代码如下:
//进入全屏模式的函数
函数loadFullScreen () {//进入全屏
函数requestFullScreen(元素){
让德=document.querySelector(元素)| | document.documentElement;
如果(de.requestFullscreen) {
de.requestFullscreen ();
}else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen ();
}else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen ();
}
}//退出全屏
函数exitFullscreen(元素){
让德=document.querySelector(元素)| | document.documentElement;
如果(de.exitFullscreen) {
de.exitFullscreen ();
}else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen ();
}else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen ();
}
}//监听事件
文档。onkeydown=function (ev) {
keydownForScreen (ev);
}//按键检测,112对应键盘的F2,可以检测其他的键位
函数keydownForScreen (ev) {
如果(ev)。键码==113){
requestFullScreen ();
requestFullScreen(身体的);
requestFullScreen(#主要的);
}
}
}//加载性能监视器的函数
函数loadStats () {
统计=new统计();
stats.domElement.style。位置=熬浴?
stats.domElement.style。左=8 px的;
stats.domElement.style。顶级=8 px的;
让身体=document.getElementsByTagName(身体的);
身体[0].appendChild (stats.domElement);
}//屏幕适应的函数
函数loadAutoScreen(相机,渲染器){
窗口。addEventListener(“调整”,onResize假);
函数onResize () {
相机。方面=窗口。innerWidth/window.innerHeight;
camera.updateProjectionMatrix ();
renderer.setSize(窗口。innerWidth window.innerHeight);
}
}
