[WIP]Contribution tree

package.json

@@ -8,7 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@tweenjs/tween.js": "^17.3.0",
     "axios": "^0.18.0",
+    "three": "^0.102.1",
+    "three-orbitcontrols": "^2.102.1",
     "vue": "^2.6.6",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"

src/components/Background.vue

@@ -0,0 +1,81 @@
+<template>
+  <canvas id="BGCanvas" ref="BGCanvas"></canvas>
+</template>
+
+<script>
+
+import * as THREE from 'three';
+import OrbitControls from 'three-orbitcontrols';
+// import * as TWEEN from '@tweenjs/tween.js';
+
+export default {
+  props: ['isActive'],
+  data() {
+    const scene = new THREE.Scene();
+    scene.add(new THREE.AmbientLight(0xFFFFFF, 1.0));
+
+    const tree = new THREE.Mesh(
+      new THREE.CylinderGeometry(2, 2, 100),
+      new THREE.MeshBasicMaterial({ color: 'green' }),
+    );
+    tree.position.set(0, -50, 0);
+    scene.add(tree);
+    if (process.env.NODE_ENV === 'development') scene.add(new THREE.AxisHelper(1000));
+
+    return {
+      camera: null,
+      control: null,
+      renderer: null,
+      scene,
+      tree,
+    };
+  },
+  mounted() {
+    const canvas = this.$refs.BGCanvas;
+    const [width, height] = [canvas.clientWidth, canvas.clientHeight];
+    this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+    this.renderer.setSize(width, height);
+
+    this.camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
+    this.camera.position.set(0, 0, 100);
+    this.scene.add(this.camera);
+
+    this.control = new OrbitControls(this.camera);
+    this.control.autoRotate = true;
+    this.control.autoRotateSpeed = 3;
+    this.control.enableKeys = false;
+    this.control.enablePan = false;
+    this.control.enableZoom = false;
+    this.control.enabled = this.isActive;
+    this.control.minPolarAngle = Math.PI / 3;
+    this.control.maxPolarAngle = Math.PI / 3 * 2;
+
+    this.update();
+  },
+  methods: {
+    update() {
+      requestAnimationFrame(this.update);
+      this.control.update();
+      this.renderer.render(this.scene, this.camera);
+    },
+  },
+  watch: {
+    isActive(val) {
+      this.control.enabled = val;
+    },
+  },
+};
+</script>
+
+<style scoped>
+  #BGCanvas{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    z-index: -1;
+  }
+</style>

src/views/Home.vue

@@ -1,18 +1,25 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <button @click="showedContributionTree = !showedContributionTree">トグルボタン</button>
+    <Background :is-active="showedContributionTree"/>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue';
+import Background from '@/components/Background.vue';
 
 export default {
   name: 'home',
   components: {
-    HelloWorld,
+    Background,
   },
+  data() {
+    return {
+      // もっといい名前ありそう
+      showedContributionTree: false,
+    };
+  },
+
 };
 </script>