mirror of
https://github.com/troisjs/trois.git
synced 2024-11-24 04:12:02 +08:00
remove raycaster component
This commit is contained in:
parent
4336969434
commit
0a7086398f
@ -1,166 +0,0 @@
|
||||
import { Raycaster, Vector2 } from 'three'
|
||||
|
||||
export default {
|
||||
name: 'Raycaster',
|
||||
inject: ['three'],
|
||||
props: {
|
||||
onBeforeRender: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
onPointerEnter: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
onPointerLeave: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
onPointerOver: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
onClick: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
scene: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
// user-provided camera. defaults to first parent camera
|
||||
camera: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
intersects: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const raycaster = new Raycaster();
|
||||
const pointer = new Vector2();
|
||||
|
||||
return { pointer, raycaster }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
raycasterCamera: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// add update method
|
||||
this.three.onBeforeRender(this.update);
|
||||
|
||||
// if we have a custom onBeforeRender method, assume
|
||||
// the user is handling everything and exit setup
|
||||
if (this.onBeforeRender) return;
|
||||
|
||||
|
||||
// prep non-reactive list of intersections
|
||||
this._intersects = [];
|
||||
|
||||
// save camera if we don't already have one
|
||||
if (!this.camera) {
|
||||
let parent = this.$parent;
|
||||
while (parent && !this.raycasterCamera) {
|
||||
this.raycasterCamera = parent.camera;
|
||||
parent = parent.$parent;
|
||||
}
|
||||
} else {
|
||||
this.raycasterCamera = this.camera;
|
||||
}
|
||||
|
||||
// add event listeners
|
||||
window.addEventListener('mousemove', this.onMouseMove);
|
||||
window.addEventListener('touchmove', this.onTouchMove);
|
||||
if (this.onClick) {
|
||||
window.addEventListener('click', this.clickHandler);
|
||||
}
|
||||
// TODO: touch
|
||||
},
|
||||
methods: {
|
||||
update() {
|
||||
// custom callback
|
||||
if (this.onBeforeRender) {
|
||||
this.onBeforeRender(this.raycaster);
|
||||
return;
|
||||
}
|
||||
|
||||
// save scene
|
||||
const scene = this.scene || this.three.scene;
|
||||
if (!scene) {
|
||||
console.log('No scene detected');
|
||||
return;
|
||||
}
|
||||
|
||||
// run standard camera-based raycaster...
|
||||
this.raycaster.setFromCamera(this.pointer, this.raycasterCamera);
|
||||
const intersects = this.raycaster.intersectObjects(
|
||||
// ...against either our predefined objects or all objects in scene
|
||||
this.intersects || scene.children
|
||||
);
|
||||
|
||||
// capture expired intersects
|
||||
if (this.onPointerLeave) {
|
||||
const newObjects = intersects.map(intersect => {
|
||||
return {
|
||||
object: intersect.object,
|
||||
instanceId: intersect.instanceId
|
||||
}
|
||||
});
|
||||
// TODO: optimize
|
||||
const expiredIntersects = this._intersects.filter(intersect => !newObjects.find(val => val.object === intersect.object && val.instanceId === intersect.instanceId));
|
||||
if (expiredIntersects.length) {
|
||||
this.onPointerLeave(expiredIntersects);
|
||||
}
|
||||
}
|
||||
|
||||
// capture new intersects
|
||||
if (this.onPointerEnter) {
|
||||
const old = this._intersects.map(intersect => {
|
||||
return {
|
||||
object: intersect.object,
|
||||
instanceId: intersect.instanceId
|
||||
}
|
||||
});
|
||||
// TODO: optimize
|
||||
const newIntersects = intersects.filter(intersect => !old.find(val => val.object === intersect.object && val.instanceId === intersect.instanceId));
|
||||
if (newIntersects.length) {
|
||||
this.onPointerEnter(newIntersects);
|
||||
}
|
||||
}
|
||||
|
||||
// capture current intersects
|
||||
if (this.onPointerOver) {
|
||||
this.onPointerOver(intersects);
|
||||
}
|
||||
|
||||
// save internal intersect list
|
||||
this._intersects = intersects;
|
||||
},
|
||||
onMouseMove(evt) {
|
||||
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;
|
||||
},
|
||||
clickHandler(evt) {
|
||||
// if we have any intersects, fire onclick method
|
||||
if (this._intersects && this._intersects.length) {
|
||||
this.onClick(this._intersects);
|
||||
}
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return this.$slots.default ? this.$slots.default() : [];
|
||||
},
|
||||
unmounted() {
|
||||
window.removeEventListener('mousemove', this.onMouseMove);
|
||||
window.removeEventListener('touchstart', this.onTouchMove);
|
||||
window.removeEventListener('click', this.clickHandler);
|
||||
|
||||
// TODO: touch
|
||||
},
|
||||
__hmrId: 'Raycaster',
|
||||
};
|
Loading…
Reference in New Issue
Block a user