Web3D/trois
1
0
Fork 0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00
Code Issues Projects Releases Wiki Activity

adding mouse and touch

Browse Source
This commit is contained in:
Sander Moolin 2021-03-22 15:38:02 -04:00
parent 10ea7d445d
commit 6a6080dfd0
1 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/core/Raycaster.js
View File

@ -39,10 +39,9 @@ export default {
}, },
setup() { setup() {
const raycaster = new Raycaster(); const raycaster = new Raycaster();
// TODO: change to 'pointer', add event listeners for mousemove and touch const pointer = new Vector2();
const mouse = new Vector2();
return { mouse, raycaster } return { pointer, raycaster }
}, },
data() { data() {
return { return {
@ -62,6 +61,11 @@ export default {
} }
} }
// add event listeners
window.addEventListener('mousemove', this.onMouseMove)
window.addEventListener('touchstart', this.onTouchMove)
window.addEventListener('touchmove', this.onTouchMove)
// add update method // add update method
this.three.onBeforeRender(this.update) this.three.onBeforeRender(this.update)
}, },
@ -81,7 +85,7 @@ export default {
} }
// run standard camera-based raycaster... // run standard camera-based raycaster...
this.raycaster.setFromCamera(this.mouse, this.raycasterCamera); this.raycaster.setFromCamera(this.pointer, this.raycasterCamera);
const intersects = this.raycaster.intersectObjects( const intersects = this.raycaster.intersectObjects(
// ...against either our predefined objects or all objects in scene // ...against either our predefined objects or all objects in scene
this.intersects || scene.children this.intersects || scene.children
@ -124,10 +128,25 @@ export default {
// save internal intersect list // save internal intersect list
this._intersects = intersects; this._intersects = intersects;
},
onMouseMove(evt) {
this.pointer.x = (evt.offsetX / this.three.size.width) * 2 - 1;
this.pointer.y = - (evt.offsetY / this.three.size.height) * 2 + 1;
},
onTouchMove(evt) {
const touch = evt.touches[0]
const { top: canvasTop, left: canvasLeft } = touch.target.getBoundingClientRect()
this.pointer.x = ((touch.clientX - canvasLeft) / this.three.size.width) * 2 - 1
this.pointer.y = -((touch.clientY) / this.three.size.height) * 2 + 1
} }
}, },
render() { render() {
return this.$slots.default ? this.$slots.default() : []; return this.$slots.default ? this.$slots.default() : [];
}, },
unmounted() {
window.removeEventListener('mousemove', this.onMouseMove)
window.removeEventListener('touchstart', this.onTouchMove)
window.removeEventListener('touchmove', this.onTouchMove)
},
__hmrId: 'Raycaster', __hmrId: 'Raycaster',
}; };