Videre 3D Splash

ThreeJS splash visual of MTG bans by year.

by Cody Bennett

CSS

body,
html {
  margin: 0;
  background: #302D36;
  overflow: hidden;
}

JavaScript

// ThreeJS MTG Bans
// by Cody Bennett (https://codyb.co)
// https://videre.live

import * as THREE from 'https://unpkg.com/three/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/three/examples/jsm/controls/OrbitControls.js';

const formatList = [
  'Vintage',
  'Legacy',
  'Commander',
  'Pauper',
  'Modern',
  'Brawl',
  'Standard',
];

const timelineData = [
  {
    category: '4',
    date: '01.2015',
    bans: '3'
  },
  {
    category: '1',
    date: '01.2015',
    bans: '1'
  },
  {
    category: '0',
    date: '01.2015',
    bans: '1'
  },
  {
    category: '3',
    date: '03.2015',
    bans: '1'
  },
  {
    category: '1',
    date: '08.2015',
    bans: '1'
  },
  {
    category: '0',
    date: '08.2015',
    bans: '2'
  },
  {
    category: '4',
    date: '01.2016',
    bans: '2'
  },
  {
    category: '3',
    date: '01.2016',
    bans: '1'
  },
  {
    category: '4',
    date: '04.2016',
    bans: '1'
  },
  {
    category: '0',
    date: '04.2016',
    bans: '1'
  },
  {
    category: '3',
    date: '11.2016',
    bans: '1'
  },
  {
    category: '6',
    date: '01.2017',
    bans: '3'
  },
  {
    category: '4',
    date: '01.2017',
    bans: '2'
  },
  {
    category: '6',
    date: '04.2017',
    bans: '1'
  },
  {
    category: '1',
    date: '04.2017',
    bans: '1'
  },
  {
    category: '0',
    date: '04.2017',
    bans: '2'
  },
  {
    category: '6',
    date: '06.2017',
    bans: '1'
  },
  {
    category: '0',
    date: '08.2017',
    bans: '2'
  },
  {
    category: '6',
    date: '01.2018',
    bans: '4'
  },
  {
    category: '1',
    date: '07.2018',
    bans: '2'
  },
  {
    category: '4',
    date: '01.2019',
    bans: '1'
  },
  {
    category: '1',
    date: '02.2019',
    bans: '1'
  }
];

const params = {
  bgColor: 0x302D36,
  linegridColor: 0x616061,
  sectionColors: [0xffa280, 0xffd001, 0x6dc8df, 0x7f92ff, 0x6f6f6f, 0x2dc066, 0xd466dd, 0xFF823A, 0xFF687C, 0x8764F3, 0x78D7A7],
  tl: {
    numSections:...