in src/globemap.ts [1146:1207]
private initRayCaster() {
this.rayCaster = new THREE.Raycaster();
const element: HTMLElement = this.root.get(0);
let mouseDownTime: number;
const elementStyle: CSSStyleDeclaration = window.getComputedStyle(element);
$(this.rendererCanvas).on("mousemove", (event: JQueryEventObject) => {
const elementViewHeight: number = element.offsetHeight - element.offsetTop
- parseFloat(elementStyle.paddingTop)
- parseFloat(elementStyle.paddingBottom);
const elementViewWidth: number = element.offsetWidth - element.offsetLeft
- parseFloat(elementStyle.paddingLeft)
- parseFloat(elementStyle.paddingRight);
const fractionalPositionX: number = event.offsetX / elementViewWidth;
const fractionalPositionY: number = event.offsetY / elementViewHeight;
this.mousePos = new THREE.Vector2(event.clientX, event.clientY);
// get coordinates in -1 to +1 space
this.mousePosNormalized = new THREE.Vector2(fractionalPositionX * 2 - 1, -fractionalPositionY * 2 + 1);
this.needsRender = true;
}).on("mousedown", (event: JQueryEventObject) => {
cancelAnimationFrame(this.cameraAnimationFrameId);
mouseDownTime = Date.now();
}).on("mouseup", (event: JQueryEventObject) => {
// Debounce slow clicks
if ((Date.now() - mouseDownTime) > this.GlobeSettings.clickInterval) {
return;
}
if (this.hoveredBar && event.shiftKey) {
this.selectedBar = this.hoveredBar;
this.animateCamera(this.selectedBar.position, () => {
if (!this.selectedBar) return;
this.orbitControls.target.copy(this.selectedBar.position.clone().normalize().multiplyScalar(this.GlobeSettings.earthRadius));
this.orbitControls.minDistance = 1;
});
} else {
if (this.selectedBar) {
this.animateCamera(this.selectedBar.position, () => {
this.orbitControls.target.set(0, 0, 0);
this.orbitControls.minDistance = this.GlobeSettings.earthRadius + 1;
});
this.selectedBar = null;
}
}
}).on("mousewheel DOMMouseScroll", (e: { originalEvent }) => {
this.needsRender = true;
if (this.orbitControls.enabled && this.orbitControls.enableZoom) {
cancelAnimationFrame(this.cameraAnimationFrameId);
this.heatTexture.needsUpdate = true;
let event: { wheelDelta, detail } = e.originalEvent;
const delta: number = event.wheelDelta > 0 || event.detail < 0 ? 1 : -1;
this.updateBarsAndHeatMapByZoom(delta);
}
});
}