vue-threeJS数据驱动的三维图形可视化

2019年8月22日 415次阅读 来源: YJohn

数据驱动的三维图形可视化

在信息狂涨的2010-2016年间，冷暴力的扁平化确切有用下降用户的信息焦炙感，使有限的精神更高效处置惩罚过量的信息流。二维平面化扁平化在苹果等大头引领下，成为群众用户机械交换默许的言语。
然后，跟着PC、平板、手机、智能家居等用户持有终端的机能不停提拔，大数据末端差异化处置惩罚，用户不再负担过量的信息而带来的压迫感，，用户必定不满足现有界面的设想及交互，因而，多维化假造化的用户体验势必获得更多用户的承认。

数据驱动的三维图形可视化触及三方面得内容，离别是

  • vue数据驱动
  • threeJS对webGL的封装三维可视化
  • 信息处置惩罚

文章重要解说第2、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>

效果图：
《vue-threeJS数据驱动的三维图形可视化》

但是我们的目的是竖立可复用的图形组件，并具有天真的数据输入及高效的图形输出
《vue-threeJS数据驱动的三维图形可视化》

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就能够疾速天生三维模子
《vue-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 )

离别设置相机的左边境，右边境，上边境，下边境，远面，近面
左/右边境：摆布边境衬着局限，超越部份不做衬着处置惩罚
上/下边境：高低边境衬着局限，超越部份不做衬着处置惩罚
近面：基于相机所在位置最先衬着
远面：基于相机位置，一向衬着场景到远面，背面的部份不做衬着处置惩罚

《vue-threeJS数据驱动的三维图形可视化》

透视相机（PerspectiveCamera）

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

离别设置相机的视场角度，长宽比，近面，远面
视场：从相机位置看到的部份场景，就如人类有180度视场，某些昆虫却具有360度视场。
长宽比：程度视场和垂直视场之间的比例
近面：从间隔相机多远的间隔最先衬着场景（近面越小，离相机越近）
远面：相机能够看到最远的间隔（太低只看到部份场景，太高则影响模子衬着）

《vue-threeJS数据驱动的三维图形可视化》

衬着器
衬着器决议了衬着的效果应当画在页面的什么元素上面，而且以如何的体式格局来绘制

物体
相机的重要衬着对象，threeJS自带的最基本的物体有球体，平面，坐标轴，方块等

renderer.render(scene, camera)

待续…

    原文作者：YJohn
    原文地址: https://segmentfault.com/a/1190000016220611
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞