js向webgl傳值（js傳值到html）

本文目錄一覽：

• 1、js如何開啟webgl加速
• 2、WebGL初探—Three.js全景圖實戰
• 3、js代碼能否實現強制開啟瀏覽器的webgl
• 4、threeJS 導入模型（不確定尺寸）後如何確定相機位置及物體縮放比例
• 5、如何調用unity3d webgl 的js

js如何開啟webgl加速

需要為Chrome加入一些啟動參數

Chrome瀏覽器的用戶請找到Chrome瀏覽器的快捷方式，如果沒有就創建一個快捷方式（右鍵點擊chrome.exe，選擇「創建快捷方式」或者「發送到」→「桌面快捷方式」），右鍵點擊快捷方式，選擇屬性。

在目標框內，雙引號的後邊，加入以下內容：

–enable-webgl –ignore-gpu-blacklist –allow-file-access-from-files

關閉目前開啟的所有Chrome窗口，然後用此快捷方式啟動Chrome瀏覽器。

其中：

–enable-webgl 表示開啟WebGL支持

–ignore-gpu-blacklist 表示忽略GPU黑名單，也就是說有一些顯卡GPU因為過於陳舊等原因，不建議運行WebGL，這個參數可以讓瀏覽器忽略這個黑名單，強制運行WebGL

–allow-file-access-from-files 表示允許從本地載入資源，如果你不是WebGL的開發者，不需要開發調試WebGL，只是想要看一下WebGL的Demo，那你可以不添加這個參數

WebGL初探—Three.js全景圖實戰

前段時間公司給了一個新需求就是寫一個裝修室內3D全景效果圖，於是開始我的three.js開發之旅。

作為一個前端小白，突然接觸three.jswebgl除了懵逼還是懵逼，不過作為一個技術人對於挑戰也許就是軟體開發中真正的樂趣，至少不會埋頭調試一遍又一遍重複的頁面數據，上上下下左左右右BABA……簡直枯燥到極點。不過three.jswebgl不得不說給我打開了新的世界，接下來我就簡單講述一下我的學習之旅。

Three.js 是一款運行在瀏覽器中的 3D 引擎，是JavaScript編寫的WebGL第三方庫，可以用它創建各種三維場景，包括了攝影機、光影、材質等各種對象,three.js內部也是webgl的封裝，封裝了大量了webgl API ，讓比較繁瑣的webgl更加簡便。

WebGL（全寫Web Graphics Library）是一種3D繪圖協議，它讓可以讓開發進一步去了解圖形渲染，Webgl是JavaScript和OpenGL ES 2.0合併出來的升級版，通過webgl可以讓前端開發者們脫離開css渲染，可以了解更加底層的渲染，WebGL也可以為HTML5 Canvas提供硬體3D加速渲染，webgl是通過系統顯卡來在瀏覽器里更流暢地展示3D場景和模型，加入shader(著色器)來對圖形渲染，學習webgl需要具備相應的圖形學演算法，屬於目前圖形渲染開發的高級技術之一。目前webgl也運用在遊戲，視頻特效，包含untiy3D也是集成webgl。

three.js中主要由攝像機 ，場景 ，渲染器 , 資源載入器，素材組成

webgl中的所有東西都是基於攝像機去展示的，可以利用攝像頭的視角形成對3d視圖觀測視角，比如魚眼視角，從而就讓我們可以在平面圖上可以開發出真實場景的3D視圖。接下來我們看看怎麼用three.js創建一個攝像機：

攝像機有了但是為了讓景物可以更好的展現，這時候我們就需要一個展示景物的場景，three.js也為我們封裝好了，如下所示可以創建一個場景：

渲染器是webgl的渲染啟動開關，他可以調用render方式把場景渲染到攝像機。

three.js載入資源不同我們常見的html一樣，直接通過src屬性載入，而是通過TextureLoader.load來載入資源。

素材常見的包含網格，燈光等許多元素下面我就舉個例子

通過這次基於three.js的webgl全景圖開發之旅為我對視圖渲染打開了一道新的大門，不過webgl的厲害之處還有很多很多是我還未涉及到了，以後還需要更加努力了。

js代碼能否實現強制開啟瀏覽器的webgl

webgl需要瀏覽器支持

js不能調用任何瀏覽器不提供介面的功能

由於啟用webgl這個功能在低版本瀏覽器中需要用戶手動開啟實現性功能，瀏覽器並未提供介面供js使用，來開啟此功能，所以不能通過js強制開啟

threeJS 導入模型（不確定尺寸）後如何確定相機位置及物體縮放比例

1、打開threeJS軟體，任意創建一個模型。

2、然後選擇模型並單擊「選擇並均勻縮放」按鈕。

3、將游標移動到X軸上，則X軸變為黃色，且游標的形狀發生變化。

4、按住回滑鼠左鍵拖動游標，則模型隨著游標的移動發生變化，同理，其他軸也是這樣的，

5、滑鼠放在三角中間，按住滑鼠左鍵拖動游標，則模型在X、Y、Z三個方向同時變化。如圖所示

6、第二種模式「選擇並非均勻縮放」跟第一種模式是一樣的，

7、滑鼠左鍵按住縮放按鈕不放，在彈出的工具菜單中選擇「選擇並擠壓縮放」按鈕，將滑鼠移動到三角形標識上，向內進行縮放操作，可以看到模型外觀發生了巨大的變化，如圖所示。

8、完成圖。

注意事項：

three.js封裝了一些3D渲染需求中重要的工具方法與渲染循環。它的教程同樣可以在hiwebgl裡面找版到。

three.js之於webgl，類似於windows版本的虛幻引擎之於D3D。當然，虛幻引擎的能力範圍比three.js大得多。d3.js跟上面兩者沒有關權系。

如何調用unity3d webgl 的js

開發網頁js代碼交互：

方向一：你可以調用Application.ExternalCall() 和Application.ExternalEval()在你嵌入的網頁中執行 JavaScript代碼.

方向二：在網頁的js代碼中執行Unity中GameObjects的方法：例如

SendMessage (‘MyGameObject’, ‘MyFunction’, ‘foobar’)

《二》Application.ExternalCall調用JS函數

public static function ExternalCall(functionName: string, params args: object[]): void;