資訊專欄INFORMATION COLUMN
摘要：學習學習筆記介紹是一種繪圖協議，它把和結合在一起，通過增加的一個綁定，可以為提供硬件加速渲染。環境搭建為了以后的學習方便，首先是搭建一個萬能框架，所有的開發都可以在此框架上進行。
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是一個js的開源框架，它把webgl的所有東西都封裝好了，我們不再需要去了解webgl那些比較麻煩的細節，直接在此框架上進行開發，既方便，又快捷，而且很容易就能學習，相對于原生的webgl花100多行代碼畫幾個三角形，Three.js只需要幾行代碼就能實現更復雜的3D效果。
下載地址： https://github.com/mrdoob/thr...。
環境搭建為了以后的學習方便，首先是搭建一個萬能框架，所有的three.js開發都可以在此框架上進行。
Three.js
其中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程序
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103814.html
摘要：在文末，我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一，它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...
摘要：學習筆記使用粒子系統模擬時空隧道本例的運行結果如圖時空隧道演示地址的粒子系統的粒子系統主要是依靠精靈體來創建的，要實現中的粒子系統創建，一般有兩種方式。 WebGL three.js學習筆記 使用粒子系統模擬時空隧道 本例的運行結果如圖：showImg(https://img-blog.csdnimg.cn/20190426222855492.png?x-oss-process=ima...
摘要：自定義頂點建立幾何體與克隆本身已經有很多的網格模型，基本已經夠我們的使用，但是如果我們還是想自己根據頂點坐標來建立幾何模型的話，也是可以的。并且不僅要更新頂點，還要更新線條的連接方式，否則是沒有效果的。 自定義頂點建立幾何體與克隆 Three.js本身已經有很多的網格模型，基本已經夠我們的使用，但是如果我們還是想自己根據頂點坐標來建立幾何模型的話，Three.js也是可以的。 基本效果...
摘要：學習學習筆記點擊查看演示地址簡單網格材質是一種不受渲染時使用的顏色影響的材質，它只與自己每一個面從內到外的法向量有關。法向量在中用處十分廣泛，光的反射，以及三維圖形的紋理映射都與這個有關。 WebGL學習----Three.js學習筆記（5） 點擊查看demo演示 Demo地址：https://nsytsqdtn.github.io/d... 簡單網格材質 MeshNormalMat...
閱讀 594·2021-11-18 13:12
閱讀 1314·2021-11-15 11:39
閱讀 2473·2021-09-23 11:22
閱讀 6194·2021-09-22 15:15
閱讀 3655·2021-09-02 09:54
閱讀 2310·2019-08-30 11:10
閱讀 3245·2019-08-29 14:13
閱讀 2913·2019-08-29 12:49
