threejs繪制點(diǎn)?

而Three.js是通過對WebGL接口的封裝與簡化而形成的一個(gè)易用的圖形庫。簡單點(diǎn)的說法threejs=three+js，three表示3D的意思，js表示javascript的意思。那么合起來，three.js就是使用javascript來寫3D程序的意思。threejs怎么把點(diǎn)連成面一種辦法是再給出兩個(gè)頂點(diǎn)，但這樣就太啰嗦了。

在ThreeJs中：模型由幾何體和材質(zhì)構(gòu)成和模型以何種形式（點(diǎn)、線、面）展示取決于渲染方式，所有的三位物體都是由點(diǎn)構(gòu)成，兩點(diǎn)構(gòu)成線，三點(diǎn)構(gòu)成面，在three.js中利用THREE.Vector3（）是用來缺點(diǎn)點(diǎn)的位置的，它的三個(gè)參數(shù)分別是對應(yīng)于三維坐標(biāo)的x軸，y軸和z軸。

實(shí)現(xiàn)Three.js相機(jī)沿著軌道移動(dòng)并到達(dá)指定的點(diǎn)后停止移動(dòng)，可以使用Tween.js庫來實(shí)現(xiàn)平滑動(dòng)畫效果，并監(jiān)聽相機(jī)位置變化，一旦相機(jī)位置到達(dá)目標(biāo)點(diǎn)，就調(diào)用Tween庫的stop（）方法，停止動(dòng)畫。參考圖設(shè)置比例Shift：按住點(diǎn)鼠標(biāo)左鍵能快速設(shè)置中心點(diǎn)。ctrl：按住加鼠標(biāo)左鍵比例尺的第一個(gè)點(diǎn)。

three.js場景中的環(huán)境光與點(diǎn)光源，以及物體添加陰影Three提供了包括環(huán)境光AmbientLight、點(diǎn)光源PointLight、聚光燈SpotLight、方向光DirectionalLight、半球光HemisphereLight等多種光源。只要在場景中添加需要的光源就好了。

推薦使用thingjs來開發(fā)，我們可以對比看一下threejs和thingjs，首先了解一下webGL。WebGL可以處理3D圖像，聽起來是非常高興的一件事，但是WebGL實(shí)在是太底層了，WebGl解決是如何再畫布上畫圖的問題，怎么畫點(diǎn)，線，面，怎么上色，怎么貼圖，怎么處理光線，視角轉(zhuǎn)動(dòng)之后怎么換算繪制等等。

通過ON數(shù)據(jù)生成三維地圖是另一種實(shí)現(xiàn)方式。首先需要獲取ON數(shù)據(jù)，通過datav可以獲取中國地圖的ON數(shù)據(jù)，參考連接datav.aliyun.com/portal...獲取數(shù)據(jù)后，通過解析ON數(shù)據(jù)，使用threejs的ExtrudeGeometry生成地圖模型。生成中國地圖及省之間的輪廓線，使用d3庫中的投影函數(shù)，將經(jīng)緯度坐標(biāo)轉(zhuǎn)換為平面坐標(biāo)。