溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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="../../../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/stats.js
至此，一個萬能的架子就已經搭建完成，可以開始編寫第一個three.js程序
總結
以上所述是小編給大家介紹的WebGL學習教程之Three.js學習筆記,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
