原创 canvas實現平面遷徙圖

** 前言 ** 最近在做自己維護的一個可視化工具的時候,在添加基於echart的雷達圖的時候,按照echart官網案例寫完發現在自己項目中無法正常運行,排查了一番發現是我項目中echart的版本太低。找到問題原因之後就升級ech

原创 深入理解three.js中光源

前言: Three.js 是一個封裝了 WebGL 接口的非常好的庫,簡化了 WebGL 很多細節,降低了學習成本,是當前前端開發者完成3D繪圖的得力工具,那麼今天我就給大家詳細講解下 Three.js 中各種光源的區別和引用場景

原创 three.js模擬實現太陽系行星體系

概況如下: 1、SphereGeometry實現自轉的太陽; 2、RingGeometry實現太陽系星系的公轉軌道; 3、ImageUtils加載球體和各行星貼圖; 4、canvas中createRadialGradient實現太

原创 canvas模擬中國鐵路運行圖

原理說明 1、在知道canvas畫布尺寸的情況下,需要將地理經緯度信息轉換爲canvas畫布x,y座標,因爲中國地圖地理經緯度座標取值範圍爲73.33-135.05(經度)37-50(維度),所以第一步需要確認的就是畫布的中心位置

原创 記錄開發基於百度地圖API實現在地圖上繪製軌跡並拾取軌跡對應經緯度的工具說明

** 前言: ** 最近一直在做數據可視化方面的工作,其中平面可視化沒什麼難度,畢竟已經有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等。還有就是3D可視化了,整體來說難度也還好,通過WEBG

原创 獲取中國各省市區縣經緯度的方法

前言: 前端開發過程中有很多需求涉及到可視化數據展示,其中地圖數據展示佔據了很大一部分。數據可視化地圖展示不論使用現有的可視化框架EChart、Highcharts,還是現在比較火爆的WEB GL技術,或者是通過canvas自己繪

原创 three.js實現土星繞太陽自轉體系

概況如下: 1、SphereGeometry實現自轉的太陽,土星; 2、RingGeometry實現土星公轉軌道; 3、ImageUtils加載球體貼圖; 4、canvas中createRadialGradient實現太陽發光效果

原创 three.js通過canvas實現球體世界平面地圖

概況如下: 1、SphereGeometry實現自轉的地球; 2、THREE.CatmullRomCurve3實現球體線條地圖點確定; 3、THREE.Math.degToRad,Math.sin,Math.cos實現地圖經緯度與

原创 深入理解three.js中平面光光源RectAreaLight

前言 之前有深入講解過Three.js中光源,在那篇文章的最後也說了由於平面光光源的特殊性,所以會單獨拿出來講解,這篇文章會詳細的講解平面光光源的特性和實際應用該如何使用。 首先,平面光光源從一個矩形平面上均勻地發射光線,這種光源

原创 three.js實現世界3d地圖

概況如下: 1、THREE.Shape繪製世界地圖平面地圖; 2、THREE.ExtrudeGeometry將繪製的平面沿着Z軸拉伸,實現3d效果; 效果圖如下: 預覽地址:three.js實現世界3d地圖 初始化場景、相機、渲

原创 three.js實現世界地圖城市遷徙圖

概況如下: 1、THREE.CylinderGeometry,THREE.SphereGeometry繪製地圖上的標記; 2、THREE.CanvasTexture用於加載canvas繪製的字體; 3、THREE.Shape,Me

原创 js實現格式化JSON數據方法

前言: 最近做的項目中遇到個需要在前端頁面中將某個設備需要的數據格式展示出來,方便用戶配置。一開始單純的將數據格式寫入到pre標籤中, 但是通過pre標籤寫入的數據格式在代碼可視化上不是很優雅。由於上述原因,所以就創建了一個全局的

原创 three.js實現球體地球2018年全球GDP前十國家標記

three.js實現球體地球2018年全球GDP前十國家標記 概況如下: 1、SphereGeometry實現自轉的地球; 2、THREE.Math.degToRad,Math.sin,Math.cos實現地圖經緯度與三位座標x,

原创 深入理解Three.js中正交攝像機OrthographicCamera

前言 在深入理解Three.js中透視投影照相機PerspectiveCamera那篇文章中講解了透視投影攝像機的工作原理以及對應一些參數的解答,那篇文章中也說了會單獨講解Three.js中另一種常用的攝像機正交攝像機Orthog

原创 基於canvas實現鐘錶

原理說明 1、通過arc方法實現鐘錶外環; 2、通過line實現鐘錶時針,分針,秒針和刻度標誌的繪製,基於save和restore方法旋轉畫布繪製不同角度的指針; 3、通過font方法實現在畫布上繪製文字,基於save和resto