国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue-threeJS數(shù)據(jù)驅(qū)動(dòng)的三維圖形可視化

SegmentFault / 3201人閱讀

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

數(shù)據(jù)驅(qū)動(dòng)的三維圖形可視化

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

數(shù)據(jù)驅(qū)動(dòng)的三維圖形可視化涉及三方面得內(nèi)容，分別是

vue數(shù)據(jù)驅(qū)動(dòng)

threeJS對(duì)webGL的封裝三維可視化

信息處理

文章主要講解第2、3點(diǎn)，使用vue進(jìn)行threeJS常用功能的封裝組件化和對(duì)用戶輸入源（鼠標(biāo)、鍵盤、觸摸、攝像頭、麥克風(fēng)等）的信息轉(zhuǎn)化。

threeJS組件化 vue項(xiàng)目中threeJS的簡單使用

module bundler模式安裝

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

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

效果圖：

然而我們的目標(biāo)是建立可復(fù)用的圖形組件，并具有靈活的數(shù)據(jù)輸入及高效的圖形輸出

threeJS基礎(chǔ)

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

threeJS是一個(gè)webgl為基礎(chǔ)的庫，對(duì)webGL的3D渲染工具方法與渲染循環(huán)封裝的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.

因此，要?jiǎng)?chuàng)建模型，我們需要場景（scene）、相機(jī)(camera)和渲染器(renderer)三樣?xùn)|西，他們是圖形渲染得重要部分

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

new THREE.Scene()

相機(jī)
作為場景中人眼的角色，決定場景中模型的遠(yuǎn)近、高度角度等參數(shù)

threeJS提供正投影相機(jī)、透視相機(jī)、立體相機(jī)等多種相機(jī)模式，現(xiàn)實(shí)常用的為前兩種
正投影相機(jī)（OrthographicCamera）

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

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

透視相機(jī)（PerspectiveCamera）

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

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

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

物體
相機(jī)的主要渲染對(duì)象，threeJS自帶的最基本的物體有球體，平面，坐標(biāo)軸，方塊等

renderer.render(scene, camera)

待續(xù)...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/97226.html

相關(guān)文章

  • SegmentFault 技術(shù)周刊 Vol.35 - WebGL：打開網(wǎng)頁看大片

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

    objc94 評(píng)論0 收藏0

  • 生產(chǎn)環(huán)節(jié)全流程透明可視，帶你走進(jìn)森普管材“數(shù)字孿生工廠”

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

    Tecode 評(píng)論0 收藏0

  • 快速入門 Matplotlib 繪圖庫

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

    Hujiawei 評(píng)論0 收藏0

  • 精讀《Tableau 探索式模型》

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

    curried 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<