diff --git a/src/App.vue b/src/App.vue
index 78e4f7f..1ad6f17 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -68,18 +68,22 @@ export default {
   },
   mixins: [mixins],
   data () {
+    // const envcolor = 0xffffff
     let renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true })
     renderer.setClearColor(0x000000, 0)
 
     // scene obj is well overwrited but background color not visible
     let scene = new THREE.Scene()
     scene.background = new THREE.Color(0x000000)
-    scene.fog = new THREE.Fog(scene.background, 1, 5000)
+    scene.fog = new THREE.Fog(scene.background, 50, 200)
     console.log('myScene', scene)
     return {
       debug: true,
       myRenderer: renderer,
-      myScene: scene
+      myScene: scene,
+      mouse: new THREE.Vector2(),
+      camera: null,
+      raycaster: new THREE.Raycaster()
     }
   },
   computed: {
@@ -98,12 +102,36 @@ export default {
       this.getProjects()
     }
   },
+  mounted () {
+    console.log('mounted', this)
+    this.camera = this.$children[0].global.camera
+
+    document.addEventListener('mousemove', this.onMouseMove, false)
+    document.addEventListener('click', this.onDocumentClick, false)
+  },
   methods: {
     ...mapActions({
       getProjects: 'Projects/getProjects'
     }),
     handleScene (scene) {
       console.log('handlescene', scene)
+    },
+    onMouseMove (e) {
+      // update the mouse variable
+      this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1
+      this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1
+    },
+    onDocumentClick (e) {
+      console.log('onDocumentClick', e)
+
+      // update the picking ray with the camera and mouse position
+      this.raycaster.setFromCamera(this.mouse, this.camera)
+      // calculate objects intersecting the picking ray
+      var intersects = this.raycaster.intersectObjects(this.myScene.children)
+
+      for (var i = 0; i < intersects.length; i++) {
+        intersects[i].object.material.color.set(0xff0000)
+      }
     }
   }
 }