資訊專欄INFORMATION COLUMN
摘要：學(xué)習(xí)學(xué)習(xí)筆記介紹是一種繪圖協(xié)議，它把和結(jié)合在一起，通過增加的一個(gè)綁定，可以為提供硬件加速渲染。環(huán)境搭建為了以后的學(xué)習(xí)方便，首先是搭建一個(gè)萬能框架，所有的開發(fā)都可以在此框架上進(jìn)行。
WebGL學(xué)習(xí)----Three.js學(xué)習(xí)筆記（1） 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是一個(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/thr...。
環(huán)境搭建為了以后的學(xué)習(xí)方便，首先是搭建一個(gè)萬能框架，所有的three.js開發(fā)都可以在此框架上進(jìn)行。
Three.js
其中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);
}
}
還有另一個(gè)引入的文件stats.js的下載地址：https://github.com/mrdoob/sta...
至此，一個(gè)萬能的架子就已經(jīng)搭建完成，可以開始編寫第一個(gè)three.js程序
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/103814.html
摘要：在文末，我會(huì)附上一個(gè)可加載的模型方便學(xué)習(xí)中文藝術(shù)字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術(shù)生態(tài)鏈中最為令人振奮的標(biāo)準(zhǔn)之一，它把 Web 帶入了 3D 的時(shí)代。 初識(shí) WebGL 先通過幾個(gè)使用 Web...
摘要：學(xué)習(xí)筆記使用粒子系統(tǒng)模擬時(shí)空隧道本例的運(yùn)行結(jié)果如圖時(shí)空隧道演示地址的粒子系統(tǒng)的粒子系統(tǒng)主要是依靠精靈體來創(chuàng)建的，要實(shí)現(xiàn)中的粒子系統(tǒng)創(chuàng)建，一般有兩種方式。 WebGL three.js學(xué)習(xí)筆記 使用粒子系統(tǒng)模擬時(shí)空隧道 本例的運(yùn)行結(jié)果如圖：showImg(https://img-blog.csdnimg.cn/20190426222855492.png?x-oss-process=ima...
摘要：自定義頂點(diǎn)建立幾何體與克隆本身已經(jīng)有很多的網(wǎng)格模型，基本已經(jīng)夠我們的使用，但是如果我們還是想自己根據(jù)頂點(diǎn)坐標(biāo)來建立幾何模型的話，也是可以的。并且不僅要更新頂點(diǎn)，還要更新線條的連接方式，否則是沒有效果的。 自定義頂點(diǎn)建立幾何體與克隆 Three.js本身已經(jīng)有很多的網(wǎng)格模型，基本已經(jīng)夠我們的使用，但是如果我們還是想自己根據(jù)頂點(diǎn)坐標(biāo)來建立幾何模型的話，Three.js也是可以的。 基本效果...
摘要：學(xué)習(xí)學(xué)習(xí)筆記點(diǎn)擊查看演示地址簡(jiǎn)單網(wǎng)格材質(zhì)是一種不受渲染時(shí)使用的顏色影響的材質(zhì)，它只與自己每一個(gè)面從內(nèi)到外的法向量有關(guān)。法向量在中用處十分廣泛，光的反射，以及三維圖形的紋理映射都與這個(gè)有關(guān)。 WebGL學(xué)習(xí)----Three.js學(xué)習(xí)筆記（5） 點(diǎn)擊查看demo演示 Demo地址：https://nsytsqdtn.github.io/d... 簡(jiǎn)單網(wǎng)格材質(zhì) MeshNormalMat...
閱讀 608·2021-11-18 13:12
閱讀 1327·2021-11-15 11:39
閱讀 2488·2021-09-23 11:22
閱讀 6222·2021-09-22 15:15
閱讀 3669·2021-09-02 09:54
閱讀 2320·2019-08-30 11:10
閱讀 3254·2019-08-29 14:13
閱讀 2919·2019-08-29 12:49
