private initRayCaster()

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);
                }
            });
        }