vue-threeJS數據驅動的三維圖形可視化

SegmentFault 發布于2019-08-23 11:37 / 3206人閱讀

摘要：數據驅動的三維圖形可視化在信息暴漲的年間，冷暴力的扁平化確實有效降低用戶的信息焦慮感，使有限的精力更高效處理過多的信息流。

數據驅動的三維圖形可視化

在信息暴漲的2010-2016年間，冷暴力的扁平化確實有效降低用戶的信息焦慮感，使有限的精力更高效處理過多的信息流。二維平面化扁平化在蘋果等大頭引領下，成為大眾用戶機器交流默認的語言。
然后，隨著PC、平板、手機、智能家居等用戶持有終端的性能不斷提升，大數據末尾差異化處理，用戶不再承擔過多的信息而帶來的壓迫感，，用戶必然不滿足現有界面的設計及交互，因此，多維化虛擬化的用戶體驗必將得到更多用戶的認可。

數據驅動的三維圖形可視化涉及三方面得內容，分別是

vue數據驅動

threeJS對webGL的封裝三維可視化

信息處理

文章主要講解第2、3點，使用vue進行threeJS常用功能的封裝組件化和對用戶輸入源（鼠標、鍵盤、觸摸、攝像頭、麥克風等）的信息轉化。

threeJS組件化 vue項目中threeJS的簡單使用

module bundler模式安裝

npm install --save three
npm install --save tween

下面簡單寫了一個例子，通過創建場景，添加物體及攝像頭就可以生成模型

效果圖：

然而我們的目標是建立可復用的圖形組件，并具有靈活的數據輸入及高效的圖形輸出

threeJS基礎

在進行進一步的three組裝前，我們必須掌握threeJS的基本知識及原理
傳統三維圖像制作中，開發人員需要使用OpenGL（Open Graphics Library）圖形程序接口進行開發，從而在 PC、工作站、超級計算機等硬件設備上實現高性能、極具沖擊力的高視覺表現力圖形處理軟件的開發。openGL并不適合直接在瀏覽器端運行，因此在OpenGL基礎上，webGL通過統一的、標準的、跨平臺的OpenGL接口，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，webGL可以為HTML5 Canvas提供硬件三維加速渲染，這樣Web開發人員就可以借助系統顯卡來在瀏覽器里更流暢地展示三維場景和模型了，還能創建復雜的導航和數據視覺化。

threeJS是一個webgl為基礎的庫，對webGL的3D渲染工具方法與渲染循環封裝的js庫，省去與繁瑣底層接口的交互，通過threeJS就可以快速生成三維模型

在threeJS中，作者是這樣說的：

To actually be able to display anything with three.js, we need three
things: scene, camera and renderer, so that we can render the scene
with camera.

因此，要創建模型，我們需要場景（scene）、相機(camera)和渲染器(renderer)三樣東西，他們是圖形渲染得重要部分

場景
場景作為實體代入必要的背景，它是承載所有模型的容器，它允許渲染模型和位置

new THREE.Scene()

相機
作為場景中人眼的角色，決定場景中模型的遠近、高度角度等參數

threeJS提供正投影相機、透視相機、立體相機等多種相機模式，現實常用的為前兩種
正投影相機（OrthographicCamera）

new THREE.OrthographicCamera( left, right, top, bottom, near, far )

分別設置相機的左邊界，右邊界，上邊界，下邊界，遠面，近面
左/右邊界：左右邊界渲染范圍，超出部分不做渲染處理
上/下邊界：上下邊界渲染范圍，超出部分不做渲染處理
近面：基于相機所在位置開始渲染
遠面：基于相機位置，一直渲染場景到遠面，后面的部分不做渲染處理

透視相機（PerspectiveCamera）

new THREE.PerspectiveCamera( fov, aspect, near, far )

分別設置相機的視場角度，長寬比，近面，遠面
視場：從相機位置看到的部分場景，就如人類有180度視場，某些昆蟲卻擁有360度視場。
長寬比：水平視場和垂直視場之間的比例
近面：從距離相機多遠的距離開始渲染場景（近面越小，離相機越近）
遠面：相機可以看到最遠的距離（過低只看到部分場景，過高則影響模型渲染）

渲染器
渲染器決定了渲染的結果應該畫在頁面的什么元素上面，并且以怎樣的方式來繪制

物體
相機的主要渲染對象，threeJS自帶的最基本的物體有球體，平面，坐標軸，方塊等

renderer.render(scene, camera)

待續...

云服務器 GPU云服務器三維數據可視化三維數據可視化軟件三維數據場可視化數據中心三維可視化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97226.html

SegmentFault 技術周刊 Vol.35 - WebGL：打開網頁看大片

摘要：在文末，我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一，它把 Web 帶入了 3D 的時代。初識 WebGL 先通過幾個使用 Web...

objc94 2019-08-21 17:08 評論0 收藏0
生產環節全流程透明可視，帶你走進森普管材“數字孿生工廠”

摘要：目前森普管材年均生產能力高達萬噸以上，位居西南區域前列，已連續兩年獲得政府采購塑料管道十大品牌。數字孿生系統可針對設備狀態進行監控年是森普管材數字化改造的進階之年。而這也成為了森普管材引入數字孿生系統的契機。如何用數字技術1:1還原生產環節，讓設備運行、監控告警脫離人工經驗，做到數據智能分析、工廠智慧生產？數字孿生可以給到你答案。數字孿生，也被稱為數字映射、數字鏡像。是指充分利用物理模型、傳...

Tecode 2022-06-28 19:00 評論0 收藏0
快速入門 Matplotlib 繪圖庫

摘要：概述是使用開發的一個繪圖庫，是界進行數據可視化的首選庫。可以通過圖形示例來快速瀏覽所有支持的圖形。最后，調用把繪制好的圖形顯示出來。對應于三個參數，表示行，表示列，表示位置。因此，表示在圖表中總共有個圖形，當前新增的圖形添加到位置。 showImg(https://segmentfault.com/img/bV6EPD?w=542&h=130); 概述 Matplotlib 是使用 P...

Hujiawei 2019-07-31 11:06 評論0 收藏0
精讀《Tableau 探索式模型》

摘要：比如我們對調與會怎樣我們得到了三個不同類目近個月的趨勢，之所以是折線圖，因為圖表的維度軸列是連續的。在正式介紹標記區域前，先理解一下為何會發生這種轉變表格類組件是雙維度組件，折線圖是單維度組件。 1. 引言 Tableau 探索式分析功能非常強大，各種功能組合似乎有著無限的可能性。今天筆者會分析這種探索式模型解題思路，一起看看這種探索式分析功能是如何做到的。 2. 精讀要掌握探索式...

curried 2019-08-26 11:01 評論0 收藏0