|
@@ -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)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|