摘要:對于自身不能發光的物體,需要給場景添加光源從而達到可視的效果。中渲染陰影的開銷比較大,所以默認物體是沒有陰影的,需要多帶帶開啟。主要用于檢測動畫運行時的幀數,可以顯示表示每秒多少幀和每幀多少毫秒,越大越好,但太大會影響性能,一般為左右。
一、WebGL 與 three.js
WebGL(Web Graphics Library)是一種3D繪圖協議,它允許把JavaScript和OpenGL ES 2.0結合在一起,通過增加OpenGL ES 2.0的一個JavaScript綁定,WebGL可以為HTML5 Canvas提供硬件3D加速渲染,這樣Web開發人員就可以借助系統顯卡來在瀏覽器里更流暢地展示3D場景和模型。
但使用WebGL原生的API來寫3D程序非常復雜,需要相對較多的數學知識,對于前端開發者來說學習成本較高。而Three.js對WebGL提供的接口進行了非常好的封裝,簡化了很多細節,大大降低了學習成本,成為前端開發者完成3D繪圖的得力工具,目前在github上star數量已經達到了將近4萬。
二、three.js首先來看一個例子,該例子繪制了一個立方體,并讓它不斷旋轉,通過這個例子來初步了解three.js的基本使用及主要API。
var scene = new THREE.Scene(); // 創建場景 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); // 創建透視相機 var renderer = new THREE.WebGLRenderer(); // 創建一個 WebGL 渲染器 renderer.setSize(window.innerWidth, window.innerHeight); // 設置渲染器為全屏 document.body.appendChild(renderer.domElement); var geometry = new THREE.BoxGeometry(1,1,1); // 創建一個長寬高都為1個單位的立方體 var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 創建材質,對光照無感 var cube = new THREE.Mesh(geometry, material); // 創建一個立方體網格(mesh),將材質包裹在立方體上 scene.add(cube); // 將立方體網格添加到場景中 camera.position.z = 5; // 指定相機位置 function render() { requestAnimationFrame(render); // 讓瀏覽器執行參數中的函數,不斷循環 cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); // 結合場景和相機進行渲染,即用攝像機拍下此刻的場景 } render();
three.js中的三大要素:場景(scene)、相機(camera)、渲染器(renderer),有了這三樣東西,我們才能夠使用相機將場景渲染到網頁上去。
場景
場景是所有物體的容器,場景只有一種。
創建場景:要構件一個場景很簡單,只需要new一個場景對象出來即可:var scene = new THREE.Scene()
相機
相機是成像的工具,相機有很多種類,不同種類的相機即使從一個角度拍攝,所成像出來的結果也不相同。相機決定了場景中哪個角度的景色會顯示出來。
說到相機,就涉及到坐標系的概念。webGL和three.js使用的是右手坐標系,如下圖所示:
在Three.js中有兩種常用的相機:透視相機(perspectiveCamera)和正交投影相機(OrthographicCamera )
透視相機:
正交投影相機:
參數 | 介紹 |
---|---|
fov | 表示視場,即攝像機能看到的視野。推薦默認值50 |
aspect | 指定渲染結果橫向尺寸和縱向尺寸的比值,推薦默認值為窗口的長寬比,即window.innerWidth/window.innerHeight |
near | 指定從距離攝像機多近的位置開始渲染,推薦默認值0.1 |
far | 指定攝像機從它所在的位置最遠能看到多遠,太小場景中的遠處不會被渲染,太大會浪費資源影響性能,推薦默認值1000 |
渲染器
渲染器的作用就是將相機拍攝出的畫面在瀏覽器中呈現出來。渲染器決定了渲染的結果應該畫在頁面的什么元素上面,并且以怎樣的方式來繪制。
three.js中有很多種類的渲染器,例如webGLRenderer、canvasRenderer、SVGRenderer,通常使用的是webGL渲染器。
創建webGL渲染器:var renderer = new THERR.WebGLRenderer();
創建完渲染器后,需要調用render方法將之前創建好的場景和相機相結合從而渲染出來,即調用渲染器的render方法:renderer.render(scene,camera)
以上就是three.js中完成3D繪圖的三大要素,利用這三大要素,我們就可以繪制出想要的3D圖像了。
繪制的前期準備工作已經做完,接下來要做的就是把想要繪制的物體添加到場景中了。在計算機世界里,3D世界是由點組成,兩個點能夠組成一條直線,三個不在一條直線上的點就能夠組成一個三角面片,無數個三角面片就能夠組成各種各樣形狀的物體,通常把這種網格模型叫做Mesh模型。Mesh模型是三維開發中使用的最為廣泛的模型。
創建Mesh模型的物體:
var object = new THREE.Mesh(Geometry, Material),第一個參數代表物體的形狀,第二個參數代表物體的材質。
Geometry
three.js 給出了很多方法去生成固定的網格形狀,比如長方體(BoxGeometry)、球體(SphereGeometry)、圓形(CircleGeometry)等等。還有根據坐標去生成具體形狀的方法,可以借助第三方建模軟件建模之后導入,目前支持的模型格式有.obj(最常用),.mtl,.dae,.ctm,.ply,.stl,.wrl,.vtk等。Three.js有一系列支持外部導入文件的輔助函數,是在three.js庫之外的,使用前需要額外下載。
Material
hree.js給出了很多種直接生成材質的方法,其中比較常用的有MeshBasicMaterial(對光照無感,給幾何體一種簡單的顏色或顯示線框)、MeshLambertMaterial(對光照有反應,無光源則不會顯示,用于創建暗淡的不發光的物體)、MeshPhongMaterial(對光照有反應,無光源則不會顯示,用于創建金屬類明亮的物體)等等。
物體之所以能被人眼看見,一種是它自身的材料就能發光,不需要借助外界光源;另一種是自身材料不發光,需要反射環境中的光。對于自身不能發光的物體,需要給場景添加光源從而達到可視的效果。
Light
three.js中可以創建出很多不同類型的光源,比如環境光(AmbientLight,它的顏色會添加到整個場景和所有對象的當前顏色上),點光源(PointLight,這種光源放出的光線來自同一點,且方向輻射自四面八方,例如蠟燭發出的關),方向光(THREE.DirectionalLight,也稱無限光,從這種光源發出的光線可以看作是平行的,例如太陽光),聚光燈(THREE.SpotLight ,這種光源的光線從一個錐體中射出,在被照射的物體上產生聚光的效果,例如手電筒發出的光等)
有光源就缺少不了陰影,在Three.js中,能形成陰影的光源只有THREE.DirectionalLight與THREE.SpotLight;而相對地,能表現陰影效果的材質只有THREE.LambertMaterial與THREE.PhongMaterial。three.js中渲染陰影的開銷比較大,所以默認物體是沒有陰影的,需要多帶帶開啟。開啟陰影方法:
將渲染器的shadowMapEnabled屬性設置為true(告訴渲染器可以渲染隱形)
將物體及光源的castShadow屬性設置為true(告訴物體及光源可以透射陰影)
將接收該陰影的物體的receiveShadow屬性設置為true(告訴物體可以接收其他物體的陰影)
三、實用的小插件data.GUI
data.GUI 是一個輕量級的圖形用戶界面庫(GUI 組件),使用這個庫可以很容易地創建出能夠改變代碼變量的界面組件,從而實現一些實時交互效果。
stats.js
stats.js 主要用于檢測動畫運行時的幀數,可以顯示fps(表示每秒多少幀)和 ms(每幀多少毫秒),fps越大越好,但太大會影響性能,一般為60左右。
https://threejs.org/ three.js官方網站
http://www.hewebgl.com/ WebGL中文網
http://techbrood.com/threejs/... three.js 中文文檔
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93288.html
摘要:全景在以前帶寬有限的條件下常常用來作為街景和全景圖片的查看。后面,我們來了解一下,如何在端實現全景視頻。現在對支持度也不是特別友好,但是,對于全景視頻來說,在機器換代更新的前提下,全景在性能方面的瓶頸慢慢消失了。 Web 全景在以前帶寬有限的條件下常常用來作為街景和 360° 全景圖片的查看。它可以給用戶一種 self-immersive 的體驗,通過簡單的操作,自由的查看周圍的物體。...
摘要:創建場景標簽本節目標是為做簡介。我們從使用旋轉立方體來搭建場景開始。我們現在創建了場景,攝像機和渲染器。我們需要來創建立方體。這會導致攝像機和立方體內部重疊。這會創建一個讓渲染器每秒繪制一幀的循環。結果恭喜你現在創建好了第一個應用。 1.創建場景 標簽: three.js 本節目標是為 three.js 做簡介。我們從使用旋轉立方體來搭建場景開始。如果遇到困難需要幫助,頁面底部有可參考...
摘要:介紹一款模塊加載工具的入門,并且重點介紹其優化工具。發布目錄項目源代碼工具目錄,例如構建工具等。另外,前端代碼發布前都會進行壓縮,使文件足夠小。原來是因為里了,所以優化工具把也合并進來了。而優化工具要用好,要多嘗試他們的配置選項。 前端變化太快,如今RequireJS已經無法吸引眼球了。介紹一款模塊加載工具:RequireJS的入門,并且重點介紹其優化工具。 一、RequireJS簡介...
摘要:在文末,我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字,但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一,它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...
閱讀 2780·2021-09-23 11:44
閱讀 1671·2021-09-13 10:24
閱讀 2619·2021-09-08 09:36
閱讀 1231·2019-08-30 15:54
閱讀 2248·2019-08-30 13:54
閱讀 3308·2019-08-30 10:57
閱讀 1844·2019-08-29 18:43
閱讀 3609·2019-08-29 15:10