Scatter3d.vue

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

<script>
import * as THREE from 'three';
import Stats from 'stats.js';

import DataPoint from '@/lib/DataPoint';
import Axis from '@/lib/Axis';

const OrbitControls = require('three-orbit-controls')(THREE);

const poke2vec = require('@/data/pca_3d_gen7battlespotsingles_ns_64_poke2vec.json');
const poke2numOriginal = require('@/data/poke2num');

const normalize = (vec) => {
  const min = Math.min(...vec);
  const max = Math.max(...vec);
  const ret = vec.map(v => (v - min) / (max - min));
  return ret.map(x => (2 * x) - 1);
};

const calcPos = num => ({
  top: Math.floor(num / 12) * 30,
  left: (num % 12) * 40,
});

export default {
  data() {
    const width = 540;
    const height = 540;
    // === scene ===
    const scene = new THREE.Scene();
    // scene.fog = new THREE.Fog(0xF9F9F9, 200, 300);

    // === renderer ===
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.setClearColor(0xF9F9F9, 1.0);

    // === camera ===
    const camera = new THREE.PerspectiveCamera(45, width / height);
    camera.position.set(80, 80, 80);

    scene.add(new Axis('x', 50, 0x0000ff));
    scene.add(new Axis('y', 50, 0x00ff00));
    scene.add(new Axis('z', 50, 0xff0000));


    // controls
    const controls = new OrbitControls(camera, renderer.domElement);

    const stats = new Stats();

    return {
      scene,
      renderer,
      camera,
      controls,
      stats,
    };
  },

  computed: {
    poke2num() {
      const poke2num = new Map();
      poke2numOriginal.forEach((x) => {
        poke2num.set(x[0], x[1]);
      });
      return poke2num;
    },
  },

  mounted() {
    const vectors = poke2vec.map(x => x.vector);
    const xs = normalize(vectors.map(v => v[0]));
    const ys = normalize(vectors.map(v => v[1]));
    const zs = normalize(vectors.map(v => v[2]));
    const names = poke2vec.map(x => x.name);
    const size = 50;

    const canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
    canvas.width = 64;
    canvas.height = 64;
    const context = canvas.getContext('2d');

    this.miniIcons = new Image();
    this.miniIcons.src = '/static/smicons-sheet.png';
    this.miniIcons.onload = () => {
      poke2vec.forEach((x, i) => {
        const dx = xs[i] * size;
        const dy = ys[i] * size;
        const dz = zs[i] * size;
        const name = names[i];
        const { top, left } = calcPos(this.poke2num.get(name));
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(this.miniIcons,
          left, top, 40, 30,
          0, 0, canvas.width, canvas.height);

        this.scene.add(new DataPoint(1, dx, dy, dz, canvas.toDataURL()));
      });
      this.$refs.stage.appendChild(this.renderer.domElement);
      this.$refs.stage.appendChild(this.stats.dom);
      this.animate();
    };
  },

  methods: {

    animate() {
      requestAnimationFrame(this.animate);
      // this.controls.update();
      // this.cube.rotation.x += 0.05;
      // this.cube.rotation.y += 0.05;
      this.stats.begin();
      this.renderer.render(this.scene, this.camera);
      this.stats.end();
    },

  },
};
</script>