diff --git a/package-lock.json b/package-lock.json
index 36a3526..324e970 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -928,6 +928,11 @@
         }
       }
     },
+    "@tweenjs/tween.js": {
+      "version": "17.3.0",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-17.3.0.tgz",
+      "integrity": "sha512-SPkhNj9/wGfbdX2C3B3KhttLQ4iesd+Ny8Dv1RnqF1MFUIqsZz/OJVLzJEHSEl7zheNx70dvqrwfbCFDQ0sWBw=="
+    },
     "@types/q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.1.tgz",
@@ -10467,6 +10472,16 @@
         "neo-async": "^2.6.0"
       }
     },
+    "three": {
+      "version": "0.102.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.102.1.tgz",
+      "integrity": "sha512-btHBdww/Es4vdBkB2GjTE9mpj0vy8tgtxkX7ne7uxySXV8zoGxWJv1N88BydxnCqvAfmD4ZUTqPeESO7oDgeOQ=="
+    },
+    "three-orbitcontrols": {
+      "version": "2.102.1",
+      "resolved": "https://registry.npmjs.org/three-orbitcontrols/-/three-orbitcontrols-2.102.1.tgz",
+      "integrity": "sha512-mp5qc5mooCtjgSloMFzIEI2VQVkvBDWDMYtbxY3TFB/BCCYpR6NV7/dD5+EUyzR90/a9H356s9QR+2PhH48f6w=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
diff --git a/package.json b/package.json
index ce43fb7..394fa0c 100644
--- a/package.json
+++ b/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"
diff --git a/src/components/Background.vue b/src/components/Background.vue
new file mode 100644
index 0000000..2f9951c
--- /dev/null
+++ b/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>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 7d4b5e2..12a1ead 100644
--- a/src/views/Home.vue
+++ b/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>