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

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

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

---

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

• vue數據驅動
• threeJS對webGL的封裝三維可視化
• 信息處理

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

threeJS組件化

vue項目中threeJS的簡單使用

module bundler模式安裝

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

下面簡單寫了一個例子，經過建立場景，添加物體及攝像頭就能夠生成模型

<template>
  <div ref="demo1"></div>
</template>

<script>
import * as THREE from 'three'
import dat from 'dat.gui'
export default {
  data: () => ({
    controls: {
      scene: null,
      camera: null,
      renderer: null,
      rotationSpeed: 0.02
    }
  }),
  created () {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init () {
      let {initMesh, controls} = this
      const gui = new dat.GUI() // gui監測器
      gui.add(controls, 'rotationSpeed', 0, 0.5)
      initMesh()
    },
    initMesh () {
      this.scene = new THREE.Scene() // 場景
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相機.視場，長寬比，近面，遠面
      this.camera.position.x = -20
      this.camera.position.y = 40
      this.camera.position.z = 30
      this.camera.lookAt(this.scene.position)

      this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
      this.renderer.setSize(window.innerWidth, window.innerHeight - 100)
      this.renderer.shadowMapEnabled = true // 開啓陰影

      let axes = new THREE.AxisHelper(20) // 座標軸

      let planeGeometry = new THREE.PlaneGeometry(60, 20, 10, 10) // 生成平面
      let planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}) // 材質
      let plane = new THREE.Mesh(planeGeometry, planeMaterial)
      plane.rotation.x = -0.5 * Math.PI
      plane.position.x = 0
      plane.position.y = 0
      plane.position.z = 0
      plane.receiveShadow = true

      let cubeGeometry = new THREE.CubeGeometry(10, 10, 10)
      let cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000})
      this.cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
      this.cube.position.x = -4
      this.cube.position.y = 3
      this.cube.position.z = 0
      this.cube.castShadow = true

      let spotLight = new THREE.SpotLight(0xffffff)
      spotLight.position.set(-40, 60, -10)
      spotLight.castShadow = true

      this.scene.add(axes) // 場景添加座標軸
      this.scene.add(plane) // 向該場景中添加物體
      this.scene.add(this.cube)
      this.scene.add(spotLight)

      this.$refs.demo1.append(this.renderer.domElement)
      this.renderScene()
    },
    renderScene () {
      let {controls, cube, scene, camera, renderer} = this
      cube.rotation.x += controls.rotationSpeed
      cube.rotation.y += controls.rotationSpeed
      cube.rotation.z += controls.rotationSpeed
      requestAnimationFrame(this.renderScene)
      renderer.render(scene, camera)
    }
  }
}
</script>

效果圖：

然而咱們的目標是創建可複用的圖形組件，並具備靈活的數據輸入及高效的圖形輸出

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)

待續...