diff --git a/src/core/Raycaster.js b/src/core/Raycaster.js index ec7437c..b6435ed 100644 --- a/src/core/Raycaster.js +++ b/src/core/Raycaster.js @@ -3,7 +3,6 @@ import { Raycaster, Vector2 } from 'three' export default { name: 'Raycaster', inject: ['three'], - // emits: ['created', 'ready'], props: { onBeforeRender: { type: Function, @@ -48,7 +47,7 @@ export default { }, mounted() { // add update method - this.three.onBeforeRender(this.update) + this.three.onBeforeRender(this.update); // if we have a custom onBeforeRender method, assume // the user is handling everything and exit setup @@ -56,21 +55,21 @@ export default { // prep non-reactive list of intersections - this._intersects = [] + this._intersects = []; // save camera if we don't already have one if (!this.camera) { - let parent = this.$parent + let parent = this.$parent; while (parent && !this.raycasterCamera) { - this.raycasterCamera = parent.camera - parent = parent.$parent + this.raycasterCamera = parent.camera; + parent = parent.$parent; } } // add event listeners - window.addEventListener('mousemove', this.onMouseMove) - window.addEventListener('touchstart', this.onTouchMove) - window.addEventListener('touchmove', this.onTouchMove) + window.addEventListener('mousemove', this.onMouseMove); + window.addEventListener('touchmove', this.onTouchMove); + // TODO: touch }, methods: { update() { @@ -120,38 +119,32 @@ export default { // TODO: optimize const newIntersects = intersects.filter(intersect => !old.find(val => val.object === intersect.object && val.instanceId === intersect.instanceId)); if (newIntersects.length) { - this.onPointerEnter(newIntersects) + this.onPointerEnter(newIntersects); } } // capture current intersects if (this.onPointerOver) { - this.onPointerOver(intersects) + this.onPointerOver(intersects); } // save internal intersect list this._intersects = intersects; }, onMouseMove(evt) { - const { top: canvasTop, left: canvasLeft } = this.three.mouse_move_element.getBoundingClientRect() + const { top: canvasTop, left: canvasLeft } = this.three.mouse_move_element.getBoundingClientRect(); this.pointer.x = ((evt.x - canvasLeft) / this.three.size.width) * 2 - 1; this.pointer.y = - ((evt.y - canvasTop) / this.three.size.height) * 2 + 1; }, - onTouchMove(evt) { - console.log('TODO: handle touch') - // const touch = evt.touches[0] - // const { top: canvasTop, left: canvasLeft } = this.three.mouse_move_element.getBoundingClientRect() - // this.pointer.x = ((touch.x - canvasLeft) / this.three.size.width) * 2 - 1 - // this.pointer.y = -((touch.y - canvasTop) / this.three.size.height) * 2 + 1 - } }, render() { return this.$slots.default ? this.$slots.default() : []; }, unmounted() { - window.removeEventListener('mousemove', this.onMouseMove) - window.removeEventListener('touchstart', this.onTouchMove) - window.removeEventListener('touchmove', this.onTouchMove) + window.removeEventListener('mousemove', this.onMouseMove); + window.removeEventListener('touchstart', this.onTouchMove); + + // TODO: touch }, __hmrId: 'Raycaster', }; diff --git a/src/core/useThree.js b/src/core/useThree.js index 05c27a6..b2afd2a 100644 --- a/src/core/useThree.js +++ b/src/core/useThree.js @@ -122,8 +122,7 @@ export default function useThree() { } obj.mouse_move_element.addEventListener('mousemove', onMousemove); obj.mouse_move_element.addEventListener('mouseleave', onMouseleave); - obj.mouse_move_element.addEventListener('touchstart', onTouchstart); - obj.mouse_move_element.addEventListener('touchmove', onTouchmove) + // TODO: touch } if (conf.click) { @@ -248,66 +247,14 @@ export default function useThree() { */ function onMousemove(e) { updateMouse(e); - onMousechange(e); } /** * mouseleave listener */ function onMouseleave(e) { - // mouse.x = 0; - // mouse.y = 0; - onMousechange(e); - } - - /** - * mouse change - */ - function onMousechange(e) { - // if (conf.mouse_over || conf.mouse_raycast) { - // raycaster.setFromCamera(mouse, obj.camera); - - // if (conf.mouse_raycast) { - // // get mouse 3d position - // obj.camera.getWorldDirection(mousePlane.normal); - // mousePlane.normal.normalize(); - // raycaster.ray.intersectPlane(mousePlane, mouseV3); - // } - - // if (conf.mouse_over) { - // const onObjects = raycaster.intersectObjects(intersectObjects); - // const offObjects = [...intersectObjects]; - // for (let i = 0; i < onObjects.length; i++) { - // const o = onObjects[i].object; - // if (!o.hover && o.onHover) { - // o.hover = true; - // o.onHover(true); - // } - // offObjects.splice(offObjects.indexOf(o), 1); - // } - // for (let i = 0; i < offObjects.length; i++) { - // const o = offObjects[i]; - // if (o.hover && o.onHover) { - // o.hover = false; - // o.onHover(false); - // } - // } - // } - // } - } - - /** - * touch start - */ - function onTouchstart(evt) { - console.log('TODO: touchstart', evt) - } - - /** - * touch move - */ - function onTouchmove(evt) { - console.log('TODO: touchmove', evt) + mouse.x = Infinity; + mouse.y = Infinity; } /**