ThreeJS簡介

近年來web得到了快速的發展。隨著HTML5的普及，網頁的表現能力越來越強大。網頁上已經可以做出很多復雜的動畫，精美的效果。 但是，人總是貪的。那么，在此之上還能做什么呢？其中一種就是通過WebGL在網頁中繪制高性能的3D圖形。

創新互聯公司專注于海拉爾企業網站建設,響應式網站設計,成都商城網站開發。海拉爾網站建設公司,為海拉爾等地區提供建站服務。全流程按需求定制制作，專業設計，全程項目跟蹤，創新互聯公司專業和態度為您提供的服務

OpenGL 它是最常用的跨平臺圖形庫。

WebGL 是基于 OpenGL 設計的面向web的圖形標準，提供了一系列JavaScript API，通過這些API進行圖形渲染將得以利用圖形硬件從而獲得較高性能。

而 Three.js 是通過對 WebGL 接口的封裝與簡化而形成的一個易用的圖形庫。

簡單點的說法 threejs=three + js ，three表示3D的意思，js表示javascript的意思。那么合起來，three.js就是使用javascript 來寫3D程序的意思。而javascript的計算能力因為google的V8引 擎得到了迅猛的增強，做3D程序，做服務器都沒有問題。

WebGL 門檻相對較高，需要相對較多的數學知識（線性代數、解析幾何）。因此，想要短時間上手 WebGL 還是挺有難度的。 Three.js 對 WebGL 提供的接口進行了非常好的封裝，簡化了很多細節，大大降低了學習成本。并且，幾乎沒有損失 WebGL 的靈活性。

因此，從 Three.js入 手是值得推薦的，這可以讓你在較短的學習后就能面對大部分需求場景。

Three.js 的入門是相對簡單的，但是當我們真的去學的時候，會發現一個很尷尬的問題：相關的學習資料很少。

通常這種流行的庫都有很完善的文檔，很多時候跟著官方的文檔或官方的入門教程學習就是最好的路線。但Three不是的，它的文檔對初學者來說太過簡明扼要。

不過官方提供了非常豐富的examples，幾乎所有你需要的用法都在某個example中有所體現。但這些example不太適合用來入門，倒是適合入門之后的進一步學習。

這里推薦一些相對較好的教程：

當然，實際的學習過程中這些資料肯定是不太夠的，遇到問題還是要自己去查資料。不過這里要提醒一下，Three.js的更新是相當頻繁的，現在是r80版本，自2010年4月發布r1以來，這已經是第72個版本了(中間有的版本號跳過了)。因此，在網上找到的資料有些可能是不適合當前版本的，需要注意甄別(前面推薦的資料也都或多或少存在這樣的問題)。

要在屏幕上展示3D圖形，思路大體上都是這樣的：

1、構建一個三維空間

Three中稱之為場景(Scene)

2、選擇一個觀察點，并確定觀察方向/角度等

Three中稱之為相機(Camera)

3、在場景中添加供觀察的物體

Three中的物體有很多種，包括Mesh,Line,Points等，它們都繼承自Object3D類

4、將觀察到的場景渲染到屏幕上的指定區域

Three中使用Renderer完成這一工作

場景是所有物體的容器，也對應著我們創建的三維世界。

Camera是三維世界中的觀察者，為了觀察這個世界，首先我們要描述空間中的位置。 Three中使用采用常見的右手坐標系定位。

Three中的相機有兩種，分別是正投影相機THREE.OrthographicCamera和透視投影相機THREE.PerspectiveCamera。

這里補充一個視景體的概念：視景體是一個幾何體，只有視景體內的物體才會被我們看到，視景體之外的物體將被裁剪掉。這是為了去除不必要的運算。

正交投影相機的視景體是一個長方體，OrthographicCamera的構造函數是這樣的：

Camera本身可以看作是一個點，left則表示左平面在左右方向上與Camera的距離。另外幾個參數同理。于是六個參數分別定義了視景體六個面的位置。

可以近似地認為，視景體里的物體平行投影到近平面上，然后近平面上的圖像被渲染到屏幕上。

2）透視投影相機

fov對應著圖中的視角，是上下兩面的夾角。aspect是近平面的寬高比。在加上近平面距離near，遠平面距離far，就可以唯一確定這個視景體了。

透視投影相機很符合我們通常的看東西的感覺，因此大多數情況下我們都是用透視投影相機展示3D效果。

有了相機，總要看點什么吧？在場景中添加一些物體吧。

Three中供顯示的物體有很多，它們都繼承自Object3D類，這里我們主要看一下Mesh和Points兩種。

1）Mesh

我們都知道，計算機的世界里，一條弧線是由有限個點構成的有限條線段連接得到的。線段很多時，看起來就是一條平滑的弧線了。

計算機中的三維模型也是類似的，普遍的做法是用三角形組成的網格來描述，我們把這種模型稱之為Mesh模型。

geometry是它的形狀，material是它的材質。

不止是Mesh，創建很多物體都要用到這兩個屬性。下面我們來看看這兩個重要的屬性。

2）Geometry

Geometry，形狀，相當直觀。Geometry通過存儲模型用到的點集和點間關系(哪些點構成一個三角形)來達到描述物體形狀的目的。

Three提供了立方體(其實是長方體)、平面(其實是長方形)、球體、圓形、圓柱、圓臺等許多基本形狀；

你也可以通過自己定義每個點的位置來構造形狀；

對于比較復雜的形狀，我們還可以通過外部的模型文件導入。

3）Material

Material，材質，這就沒有形狀那么直觀了。

材質其實是物體表面除了形狀以為所有可視屬性的集合，例如色彩、紋理、光滑度、透明度、反射率、折射率、發光度。

這里講一下材質(Material)、貼圖(Map)和紋理(Texture)的關系。

材質上面已經提到了，它包括了貼圖以及其它。

貼圖其實是‘貼’和‘圖’，它包括了圖片和圖片應當貼到什么位置。

紋理嘛，其實就是‘圖’了。

Three提供了多種材質可供選擇，能夠自由地選擇漫反射/鏡面反射等材質。

4）Points

講完了Mesh，我們來看看另一種Object——Points。

Points其實就是一堆點的集合，它在之前很長時間都被稱為ParticleSystem(粒子系統)，r68版本時更名為PointCloud,r72版本時才更名為Points。更名主要是因為，Mr.doob認為，粒子系統應當是包括粒子和相關的物理特性的處理的一套完整體系，而Three中的Points簡單得多。因此最終這個類被命名為Points。

5）Light

神說：要有光！

光影效果是讓畫面豐富的重要因素。

Three提供了包括環境光AmbientLight、點光源PointLight、 聚光燈SpotLight、方向光DirectionalLight、半球光HemisphereLight等多種光源。

只要在場景中添加需要的光源就好了。

6）Renderer

在場景中建立了各種物體，也有了光，還有觀察物體的相機，是時候把看到的東西渲染到屏幕上了。這就是Render做的事情了。

Renderer綁定一個canvas對象，并可以設置大小，默認背景顏色等屬性。

調用Renderer的render函數，傳入scene和camera，就可以把圖像渲染到canvas中了。

現在，一個靜態的畫面已經可以得到了，怎么才能讓它動起來？

很簡單的想法，改變場景中object的位置啊角度啊各種屬性，然后重新調用render函數渲染就好了。

那么重新渲染的時機怎么確定？

HTML5為我們提供了requestAnimFrame，它會自動在每次頁面重繪前調用傳入的函數。

如果我們一開始這樣渲染：

只需要改成這樣：

object就可以動起來了！

下面我們用一個簡單的例子來梳理一下這個過程。

首先寫一個有Canvas元素的頁面吧。

下面來做Javascript的部分

首先初始化Renderer

初始化場景:

初始化相機：

要唯一確定一個相機的位置與方向，position、up、lookAt三個屬性是缺一不可的。

這里我們創建了一個正交投影相機，這里我將視景體大小與屏幕分辨率保持一致只是為了方便，這樣坐標系中的一個單位長度就對應屏幕的一個像素了。

我們將相機放在Z軸上，面向坐標原點，相機的上方向為Y軸方向，注意up的方向和lookAt的方向必然是垂直的（類比自己的頭就知道了）。

下面添加一個立方體到場景中：

注意我們使用了法向材質 MeshNormalMaterial ，這樣立方體每個面的顏色與這個面對著的方向是相關的，更便于觀察/調試。

在這個簡單的demo里我不打算添加光影效果，而法向材質對光也是沒有反應的。 最后來創建一個動畫循環吧

每次重繪都讓這個立方體轉動一點點。 當頁面加載好時，調用前面這些函數就好了。

WebGL中文網 強烈推薦!!

WebGL中文教程網

ThingJS官方示例（十一）：大數據矢量及貼圖url開發OD線

#前端# #三維可視化# #OD線開發#

1. 基礎圖層創建

2. OD線創建（矢量與貼圖）

3. 大數據量對接

簡介：數字孿生體已經從制造領域逐步延伸拓展至城市空間，數字孿生城市又比工業制造復雜得多，與物理城市相對應。做不到100%逼真，而是構建統一的城市信息模型，讓數字城市和現實城市進行“虛實結合”！3D城市動態模型包含點、線、面等地理要素，組合成信息化數字地圖，有助于提升城市規劃、建筑、交通、能源等領域的數字化水平。

Demo鏈接：

OD線 (Origin-Destination Line) 指的是起點和終點的連線，用于表示兩點之間的某種關系，如航班線路、人口遷徙、交通流量、經濟往來等。從本周起中國緩慢進入春運高峰期，堪稱一次爆發式人口遷徙事件，春運遷徙地圖通常使用OD線表示：

遷入來源地，OD線匯聚到一個方向，比如海口市，作為人口遷入的終點位置。

遷出目的地，OD線擴散到不同方向，但是起點是同一個位置，比如人口從哈爾濱市遷出。

GeoLine是帶有地理位置的線要素，可以添加屬性字段來存儲其他信息，可以分為三種不同的線條類型，OD線不同在于限制了起點和終點，GIS里面就能夠形成，繪制三維OD線需要哪些注意事項？創建OD線與其他線條有何區別？

這里詳解OD線開發步驟，體驗見demo：

動態加載地球組件之后，獲取不同圖層疊加，在ThingLayer業務圖層進行更靈活的二次開發。創建一個ThingLayer圖層，并將ThingLayer添加到底圖中，獲取起點的坐標位置startPos，展示由點及面的向外擴散效果。

var startPos = [116.39139175415039, 39.906082185995366];

ThingJS渲染器提供兩種渲染類型，矢量渲染vector以及貼圖渲染image；獲取OD線先從ThingJS圖層中查詢遷徙路徑，如北京-濟南，接下來就這條路徑做樣式修改。

渲染器renderer設置Vector矢量線的顏色，示例顯示rgb數組【255,0,0】的使用方法，還可以使用rgb字符串“rgb (255,0,0)”、十六進制字符串"#ff0000"。

流動效果速度默認為0，靜止效果；數值可正可負，代表正反兩種流動方向，貼圖樣式也同樣適用。

renderer: {

lineType: 'Line',

type: 'vector', // 代表純色渲染

color: [255, 0, 0],

// opacity:0.2 ,// 設置不透明度 默認是1

// speed: 1 ,// 流動效果速度， 默認是0 不流動；speed 可正可負，正負代表流動方向

// effect: true // 線發光效果 默認為 false 不開啟

}

});

獲取url來生成貼圖類型的OD線，顏色及其他樣式是貼圖本身所具備的，通過修改貼圖通道疊加數numPass來擴充線寬度，一般來說該數值越大，線越亮。

利用effect函數開啟線發光特效，在地圖上起到重要的強調作用。

renderer: {

lineType: 'Line',

type: 'image', // 代表貼圖渲染

imageUrl: '/guide/image/uGeo/path.png',

numPass: 3,

speed: 0.5, // 流動效果速度， 默認是0 不流動；speed 可正可負，正負代表流動方向

// effect: true // 線發光效果 默認為 false 不開啟

}

值得注意的是，大數據量的OD線一般需要瀏覽器端渲染至少幾十萬或上百萬以上，不管數據傳輸還是數據渲染都需要采取更高效的方式—— ThingJS平臺 提供生成動態大數據的接口，利用WebSocket（百萬量級）， MQTT（單機千萬級）數據接口實現流暢的雙工通信，配合前端SDK輕松在線開發！

ThingJS提供物聯網3D可視化組件，讓3D開發更輕松！直接Javascript調用3D腳本，基于200個3D開發源碼示例，讓你全面了解物聯網可視化開發邏輯。利用場景搭建-3D腳本開發-數據對接-項目部署的一站式服務讓開發更高效，與20萬個開發者一同成為數字孿生技術創新者！

為什么three.js的貼圖尺寸要符合2的冪次方

好像都是規定的吧，沒有為什么。 就像上大學要考試一樣，都是規定的。

名稱欄目：javascript貼圖,如何用html代碼貼圖
文章URL：http://vcdvsql.cn/article48/dsdgshp.html

成都網站建設公司_創新互聯，為您提供標簽優化、電子商務、網站制作、手機網站建設、網站設計公司、品牌網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯