Three.js 图表库

基于 Three.js 提供常规可视化图表。

基础环境

General3DEnv

通用3D环境，此类构造了一个基础的3D运行环境，使用如下。

import {
  General3DEnv
} from '@jusfoun-vis/threejs-chart';

// 自定义一个3D应用。
class Custom3DApp extends General3DEnv {
  
  constructor(option) {
    super(option);
    // 可以选择是自动在构造中初始化，或是new出实例后外部手动调用初始化，
    // 注意仅可初始化一次，当前示例是自动在构造中初始化。
    this.initialize();
  }
  
  // 自定义引擎的Scene、Camera、Renderer实现，一般情况下无需重写。
  _initEngine() {
    super._initEngine();
    
    // Stage3D参见
    const stage3d = this.stage3d;
    const camera = this.camera; // read-only, it is equals to stage3d.camera and this._camera
    const scene = this.scene; // read-only, it is equals to stage3d.scene and this._scene
    const renderer = this.renderer; // read-only, it is equals to stage3d.renderer and this._renderer
  }
  
  // 自定义控制器Controls实现，默认使用OrbitControls控制器（threejs-ext库），一般情况下无需重写。
  _initControls() {
    super._initControls();
    
    const controls = this.controls; // read-only, it is equals to this._controls
    controls.update();
  }
  
  // 自定义3D场景中的光源。
  _initLights() {
    // General3DEnv自带addPointLight(color, intensity, x, y, z)方法可快速创建点光源。
    this.addPointLight(0xFFFFFF, 1.0, 0, 0, 1000);
    
    // 自定义光源
    const directionalLight = new THREE.DirectionalLight( 0xFFFFFF );
    this.scene.add(directionalLight); // or using this.addObject(directionalLight), this.stage3d.addObject(directionalLight)
  }
  
  // 自定义纹理、材质。
  _initMaterials() {
  }
  
  // 自定义物件。
  _initObjects() {
    const mesh = new THREE.Mesh(new THREE.BoxBufferGeometry(1, 1, 1));
    this.addObject(mesh);
  }
  
  // 自定义物件。
  _initObjects() {
  }
  
  // 自定义事件监听，默认添加了Canvas画布上的双击事件，按住Shift键，双击可打印当前Camera的坐标以及Controls中Target的坐标，
  // 可在旋转、调整场景至合适角度后，获得数值然后固化在初始化的设置中。
  _initEventListeners() {
    super._initControls();
    
    const domElement = this.domElement; // it is equals to stage3d.domElement, both read-only
    domElement.addEventListener('xxx', e => {
      // TODO...
    });
  }
  
  // 自定初始化最后阶段应执行的代码。
  _initFinally() {
  }
  
}

const app = new Custom3DApp();
document.body.appendChild(app.domElement);
app.resize(512, 512);
app.startRender();

板块地图

相关性矩阵图

装饰物件