mirror of
https://github.com/troisjs/trois.git
synced 2024-11-24 04:12:02 +08:00
remove extra code, formatting
This commit is contained in:
parent
2b917a52e6
commit
18b425ff50
@ -3,7 +3,6 @@ import { Raycaster, Vector2 } from 'three'
|
|||||||
export default {
|
export default {
|
||||||
name: 'Raycaster',
|
name: 'Raycaster',
|
||||||
inject: ['three'],
|
inject: ['three'],
|
||||||
// emits: ['created', 'ready'],
|
|
||||||
props: {
|
props: {
|
||||||
onBeforeRender: {
|
onBeforeRender: {
|
||||||
type: Function,
|
type: Function,
|
||||||
@ -48,7 +47,7 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// add update method
|
// add update method
|
||||||
this.three.onBeforeRender(this.update)
|
this.three.onBeforeRender(this.update);
|
||||||
|
|
||||||
// if we have a custom onBeforeRender method, assume
|
// if we have a custom onBeforeRender method, assume
|
||||||
// the user is handling everything and exit setup
|
// the user is handling everything and exit setup
|
||||||
@ -56,21 +55,21 @@ export default {
|
|||||||
|
|
||||||
|
|
||||||
// prep non-reactive list of intersections
|
// prep non-reactive list of intersections
|
||||||
this._intersects = []
|
this._intersects = [];
|
||||||
|
|
||||||
// save camera if we don't already have one
|
// save camera if we don't already have one
|
||||||
if (!this.camera) {
|
if (!this.camera) {
|
||||||
let parent = this.$parent
|
let parent = this.$parent;
|
||||||
while (parent && !this.raycasterCamera) {
|
while (parent && !this.raycasterCamera) {
|
||||||
this.raycasterCamera = parent.camera
|
this.raycasterCamera = parent.camera;
|
||||||
parent = parent.$parent
|
parent = parent.$parent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// add event listeners
|
// add event listeners
|
||||||
window.addEventListener('mousemove', this.onMouseMove)
|
window.addEventListener('mousemove', this.onMouseMove);
|
||||||
window.addEventListener('touchstart', this.onTouchMove)
|
window.addEventListener('touchmove', this.onTouchMove);
|
||||||
window.addEventListener('touchmove', this.onTouchMove)
|
// TODO: touch
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
update() {
|
update() {
|
||||||
@ -120,38 +119,32 @@ export default {
|
|||||||
// TODO: optimize
|
// TODO: optimize
|
||||||
const newIntersects = intersects.filter(intersect => !old.find(val => val.object === intersect.object && val.instanceId === intersect.instanceId));
|
const newIntersects = intersects.filter(intersect => !old.find(val => val.object === intersect.object && val.instanceId === intersect.instanceId));
|
||||||
if (newIntersects.length) {
|
if (newIntersects.length) {
|
||||||
this.onPointerEnter(newIntersects)
|
this.onPointerEnter(newIntersects);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// capture current intersects
|
// capture current intersects
|
||||||
if (this.onPointerOver) {
|
if (this.onPointerOver) {
|
||||||
this.onPointerOver(intersects)
|
this.onPointerOver(intersects);
|
||||||
}
|
}
|
||||||
|
|
||||||
// save internal intersect list
|
// save internal intersect list
|
||||||
this._intersects = intersects;
|
this._intersects = intersects;
|
||||||
},
|
},
|
||||||
onMouseMove(evt) {
|
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.x = ((evt.x - canvasLeft) / this.three.size.width) * 2 - 1;
|
||||||
this.pointer.y = - ((evt.y - canvasTop) / this.three.size.height) * 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() {
|
render() {
|
||||||
return this.$slots.default ? this.$slots.default() : [];
|
return this.$slots.default ? this.$slots.default() : [];
|
||||||
},
|
},
|
||||||
unmounted() {
|
unmounted() {
|
||||||
window.removeEventListener('mousemove', this.onMouseMove)
|
window.removeEventListener('mousemove', this.onMouseMove);
|
||||||
window.removeEventListener('touchstart', this.onTouchMove)
|
window.removeEventListener('touchstart', this.onTouchMove);
|
||||||
window.removeEventListener('touchmove', this.onTouchMove)
|
|
||||||
|
// TODO: touch
|
||||||
},
|
},
|
||||||
__hmrId: 'Raycaster',
|
__hmrId: 'Raycaster',
|
||||||
};
|
};
|
||||||
|
@ -122,8 +122,7 @@ export default function useThree() {
|
|||||||
}
|
}
|
||||||
obj.mouse_move_element.addEventListener('mousemove', onMousemove);
|
obj.mouse_move_element.addEventListener('mousemove', onMousemove);
|
||||||
obj.mouse_move_element.addEventListener('mouseleave', onMouseleave);
|
obj.mouse_move_element.addEventListener('mouseleave', onMouseleave);
|
||||||
obj.mouse_move_element.addEventListener('touchstart', onTouchstart);
|
// TODO: touch
|
||||||
obj.mouse_move_element.addEventListener('touchmove', onTouchmove)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (conf.click) {
|
if (conf.click) {
|
||||||
@ -248,66 +247,14 @@ export default function useThree() {
|
|||||||
*/
|
*/
|
||||||
function onMousemove(e) {
|
function onMousemove(e) {
|
||||||
updateMouse(e);
|
updateMouse(e);
|
||||||
onMousechange(e);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* mouseleave listener
|
* mouseleave listener
|
||||||
*/
|
*/
|
||||||
function onMouseleave(e) {
|
function onMouseleave(e) {
|
||||||
// mouse.x = 0;
|
mouse.x = Infinity;
|
||||||
// mouse.y = 0;
|
mouse.y = Infinity;
|
||||||
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)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
Loading…
Reference in New Issue
Block a user