webgl介紹
WebGL是一種3D繪圖協(xié)議，它把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過增加OpenGL ES 2.0的一個(gè)JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染。
WebGL技術(shù)標(biāo)準(zhǔn)免去了開發(fā)網(wǎng)頁(yè)專用渲染插件的麻煩，可被用于創(chuàng)建具有復(fù)雜3D結(jié)構(gòu)的網(wǎng)站頁(yè)面，甚至可以用來設(shè)計(jì)3D網(wǎng)頁(yè)游戲。
原生的WebGl比較復(fù)雜，主要通過對(duì)頂點(diǎn)著色器和片元著色器的操作，來實(shí)現(xiàn)渲染，但實(shí)現(xiàn)起來比較復(fù)雜，需要一定的數(shù)學(xué)基礎(chǔ)，但更多的是需要學(xué)習(xí)基礎(chǔ)的耐心。
Three.js介紹
Three.js是一個(gè)js的開源框架，它把webgl的所有東西都封裝好了，我們不再需要去了解webgl那些比較麻煩的細(xì)節(jié)，直接在此框架上進(jìn)行開發(fā)，既方便，又快捷，而且很容易就能學(xué)習(xí)，相對(duì)于原生的webgl花100多行代碼畫幾個(gè)三角形，Three.js只需要幾行代碼就能實(shí)現(xiàn)更復(fù)雜的3D效果。
下載地址： https://github.com/mrdoob/three.js。
環(huán)境搭建
為了以后的學(xué)習(xí)方便，首先是搭建一個(gè)萬能框架，所有的three.js開發(fā)都可以在此框架上進(jìn)行。
<!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 } //提前定義好的一個(gè)功能文件，方便以后的每一個(gè)程序調(diào)用 function initSetting() { loadAutoScreen(camera,renderer);//自適應(yīng)屏幕 loadFullScreen();//網(wǎng)頁(yè)全屏播放 loadStats();//性能檢測(cè)插件 } 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是我寫在另一個(gè)文件里面的功能文件，把一些常用的功能放在里面，方便以后寫的程序可以直接去調(diào)用
Setting.js的代碼如下：
//進(jìn)入全屏模式的函數(shù)function loadFullScreen() { //進(jìn)入全屏 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(); } } //監(jiān)聽事件 document.onkeydown = function (ev) { keydownForScreen(ev); } //按鍵檢測(cè)，112對(duì)應(yīng)鍵盤的F2，可以檢測(cè)其他的鍵位 function keydownForScreen(ev) { if (ev.keyCode == 113) { requestFullScreen(); requestFullScreen('body'); requestFullScreen('#main'); } }}//加載性能監(jiān)視器的函數(shù)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);}//屏幕適應(yīng)的函數(shù)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); }}
新聞熱點(diǎn)
疑難解答
圖片精選
