データ駆動の3 Dグラフィックスの可視化

情報の急騰した2010-2016年の間に、冷たい暴力の扁平化は確かにユーザーの情報焦慮感を低下させ、限られた精力をより効率的に過剰な情報ストリームを処理させた.2 D平面化扁平化はアップルなどのリーダーシップの下で、大衆ユーザーの機械交流のデフォルトの言語となっている.そして、PC、タブレット、携帯電話、スマートホームなどのユーザーが端末を持つ性能が向上するにつれて、ビッグデータの末尾の差別化処理は、ユーザーが過度な情報を負担しないことによる圧迫感をもたらし、ユーザーは必然的に既存のインタフェースの設計とインタラクションを満たさないため、多次元化仮想化のユーザー体験はより多くのユーザーの認可を得るに違いない.
データ駆動の3 Dグラフィックスの可視化には、それぞれ

vueデータ駆動

threeJS対webGLのパッケージ三次元可視化

情報処理

本文は主に第2、3点を説明し、vueを用いてthreeJSの常用機能のパッケージ化とユーザー入力源(マウス、キーボード、タッチ、カメラ、マイクなど)の情報変換を行う.

threeJSコンポーネント化

vueプロジェクトにおけるthreeJSの簡単な使用

module bundlerモードインストール

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

シーンを作成し、物体やカメラを追加することでモデルを生成できる例を簡単に書きます.

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)
    }
  }
}

効果図:
しかし、多重化可能なグラフィックコンポーネントを構築し、柔軟なデータ入力と効率的なグラフィック出力を実現することを目標としています.

threeJSベース

さらなるthree組立を行う前に、threeJSの基本的な知識と原理を身につけなければならない従来の3次元画像制作では、開発者はOpenGL(Open Graphics Library)グラフィックプログラムインターフェースを使用して開発し、PC、ワークステーション、スーパーコンピュータなどのハードウェア機器で高性能で衝撃力の高い高視覚表現力グラフィック処理ソフトウェアの開発を実現する必要がある.OpenGLはブラウザ側で直接実行するのに適していないため、OpenGLに基づいて、webGLはJavaScriptとOpenGL ES 2.0を結合することができ、OpenGL ES 2.0のJavaScriptバインドを増やすことで、webGLはHTML 5 Canvasにハードウェアの3次元加速レンダリングを提供することができる.これにより、Web開発者はシステムグラフィックスを利用してブラウザで3 Dシーンやモデルをよりスムーズに展示することができ、複雑なナビゲーションやデータの視覚化を作成することができます.
threeJSはwebglベースのライブラリであり、webGLの3 Dレンダリングツール方法とレンダリングサイクルパッケージのjsライブラリに対して、煩雑な下位インタフェースとのインタラクションを省き、threeJSによって3 Dモデルを迅速に生成することができる.
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)、レンダラーの3つのものが必要です.
シーンシーンは、すべてのモデルを運ぶコンテナであり、モデルと位置をレンダリングできるエンティティとして必要なバックグラウンドを代入します.

new THREE.Scene()

カメラはシーン内の人間の目の役割として、シーン内のモデルの遠近、高さ角度などのパラメータを決定します.
threeJSは正投影カメラ、透視カメラ、立体カメラなど多くのカメラモードを提供し、現実的には前の2種類の正投影カメラ(OrthographicCamera)がよく使われている.

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

カメラの左境界、右境界、上境界、下境界、遠方面、近面左/右境界を別々に設定します:左右境界レンダリング範囲、超えた部分はレンダリング処理をしません上/下境界:上下境界レンダリング範囲、超えた部分はレンダリング処理をしません近面:カメラの位置に基づいて遠方面をレンダリングします:カメラの位置に基づいて、シーンを遠方面までレンダリングします.後ろの部分はレンダリング処理をしません
パースカメラ(PerspectiveCamera)

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

カメラの視野角度、アスペクト比、近面、遠面視野をそれぞれ設定します.カメラの位置から見たシーンの一部は、人間が180度の視野を持っているのに、360度の視野を持っている昆虫もいます.アスペクト比(Length Width):水平視野と垂直視野の間のスケール近接(Scale Near Faces):カメラからどのくらい離れた距離からシーンをレンダーします(近接が小さいほどカメラに近い).遠方:カメラは最も遠い距離を見ることができます(低すぎるとシーンの一部しか見えません.高すぎるとモデルレンダーに影響します).
レンダラーレンダラーは、レンダーの結果をページのどの要素に描くべきか、どのように描くべきかを決定します.
物体カメラの主なレンダリングオブジェクト、threeJSが持っている最も基本的な物体は球体、平面、座標軸、ブロックなどです.

renderer.render(scene, camera)

続行...