A. three.js vs ThingJS：全景虛擬漫遊技術實現javascript 3D開發 前端 物聯網 三維建模 3D模型
三維建模無非就是通過專業技能加工成立體圖形，使之圖形成為直觀、易懂，容易判讀的立體圖件。對於開發者來說，選擇一個好的3D開發框架，在全景虛擬漫遊場景上實現3D動效，ThingJS vs three.js開發性能和資源投入這里拿來比較一下，希望對你有幫助。
1~three.js優勢
Three.js是大多數開發者首次接觸的WebGL 3D庫，Threejs庫的出現解決了底層的渲染細節和復雜的數據結構，可以支持如一個房間級別,或一個樓層級別的渲染,或符合特殊要求的大量同類模型的渲染。
2~three.js開發性能
對 WebGL進行了封裝,提供了更高層的渲染介面,提供攝影機、視口的控制,提供場景組織方式,能夠載入多種文件格式,通過創建材質、貼圖並編寫 shader來實現物體效果,創建立方體、球等基本元素,提供燈光、陰影、點雲等等底層功能。
3~three.js劣勢
雖然Three.js底層引擎級別的三維圖形庫，有很多開源庫對它進行擴展，但較為鬆散，適合做輕量級可視化應用，復雜應用則需要基於此庫進行大量封裝才行。尤其場景輸出層面，需要3 3DSMax、Maya、CAD等專業美術人員,通過建模再做一定的導出工作才能得到需要的模型，團隊協作成本高。
4~ThingJS優勢
ThingJS主張3D便捷開發，提供無需3D建模知識即可上手的場景搭建工具和無維護成本的場景存儲雲空間，模型庫提供上萬個行業模型資源。提供ThingJS場景工具組件,包含園區、城市或者圖表搭建,可以讓不具備3D知識的普通用戶搭建3D場景，一個人可以完成物聯網應用的基礎開發。
5~ThingJS開發性能
ThingJS可支撐數十棟建築的園區級應用,可支持從地球到城市、園區、建築、樓層、房間、最終到物聯網設備的渲染性能負載，物聯網可視化效果應用優勢明顯，可創建信息點、線路、管線、區域、熱圖、粒子、動畫等豐富功能，具備靈活的攝影機控制、第一人稱行走、尋路導航和視點線路工具;可擴展的界面、頭頂信息牌、內嵌視頻監控等豐富的信息展示方式。
6~開發者角度的體驗 （three.js vs ThingJS）
如果是你是初學者，three.js用起來更花費時間，就一個載入模型、調光、選擇模型彈框的功能，就能寫出Threejs上百行代碼，ThingJS是更為上層的抽象，不用關心渲染、mesh、光線等復雜概念，更適合項目團隊提高開發效率。
B. threejs - 4 - 物體
在三維空間中的物體是由點、線、面組成的
不管是點 、線還是面，裡面的坐標點都叫 頂點 。可以給不同的頂點設置不同的顏色，這個過程叫 著色 （看不懂的話有個概念就行，頂點 + 顏色 = 三維物體）
上面定義了一個平面，THREE.Face3(2,1,0) 這個裡面的 2 指的是 vertices 裡面下標為2的頂點，1 指的是下標為1的頂點，0 指的是下標為0的頂點。 2，1，0 的順序也是有說法的（GPU為了提高渲染效率，默認僅僅渲染逆時針方向的平面，如果你寫成了 0，1，2 就可能渲染不出來）
threejs - 1 - 介紹&入門
threejs - 2 - 相機
threejs - 3 - 場景刷新
threejs - 4 - 物體
[threejs - 5 - 材質]
[threejs - 6 - 燈光]
[threejs - 7 - 相機進階]
[threejs - 8 - 物體進階]
[threejs - 9 - 粒子系統]
[threejs - 10 - 模型載入]
[threejs - 11 - GLSL]
[threejs - 12 - 著色器]
C. 怎麼給html5背景加上js粒子特效
使用了particles.js
particles.js可以從github網站下載到最新的源碼，網址是 https://github.com/VincentGarreau/particles.js/
使用方法非常簡單
第一步，在html中引入腳本文件 particles.min.js，這個文件在下載的壓縮包里可以找到
<scriptsrc="particles.min.js"></script>
第二步，在html中放入一個div容器，設置id為particles-js。這個一般放在所有網頁元素的最後面就可以。
<divid="particles-js"></div>
<styletype="text/css">
#particles-js{
position:absolute;
top:0;
width:100%;
}
</style>
第三步，設置窗口樣式
<styletype="text/css">
#particles-js{
z-index:-1;
position:absolute;
top:0;
width:100%;
background:#aaa;
}</style>
第四步，腳本生成粒子效果，可以單獨放在一個js文件里，也可以放在<script>標簽里。無論如何，這段腳本要出現在div容器之後。
particlesJS("particles-js",{"particles":{"number":{"value":380,"density":{"enable":true,"value_area":800
}
},"color":{"value":"#ffffff"
},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"
},"polygon":{"nb_sides":5
},"image":{"src":"img/github.svg","width":100,"height":100
}
},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false
}
},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false
}
},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1
},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200
}
}
},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"grab"
},"onclick":{"enable":true,"mode":"push"
},"resize":true
},"modes":{"grab":{"distance":140,"line_linked":{"opacity":1
}
},"bubble":{"distance":400,"size":40,"ration":2,"opacity":8,"speed":3
},"repulse":{"distance":200,"ration":0.4
},"push":{"particles_nb":4
},"remove":{"particles_nb":2
}
}
},"retina_detect":true});
D. three.js 怎麼樣 知乎
Three.js 是一款運行在瀏覽器中的 3D 引擎，你可以用它創建各種三維場景，包括了攝影機、光影、內材質等各種對象。你容可以在它的主頁上看到許多精採的演示。不過，這款引擎目前還處在比較不成熟的開發階段，其不夠豐富的 API 以及匱乏的文檔增加了初學者的學習難度（尤其是文檔的匱乏）three.js的代碼託管在github上面。現在有了英文的指導文檔，好多了，有一些英文基礎，就可以看懂，學起來也很簡單。中文版API介紹的文檔比較少。
E. 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中文教程網