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)

待续...