private initScene()

in src/globemap.ts [612:669]


        private initScene(): void {
            this.renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
            this.rendererContainer = $("<div>").appendTo(this.root).addClass("globeMapView");

            this.rendererContainer.append(this.renderer.domElement);
            this.rendererCanvas = this.renderer.domElement;
            this.camera = new THREE.PerspectiveCamera(
                GlobeMap.cameraFov,
                this.layout.viewportIn.width / this.layout.viewportIn.height,
                GlobeMap.cameraNear,
                GlobeMap.cameraFar);
            this.orbitControls = new THREE.OrbitControls(this.camera, this.rendererCanvas);
            this.orbitControls.enablePan = false;
            this.scene = new THREE.Scene();

            this.renderer.setSize(this.layout.viewportIn.width, this.layout.viewportIn.height);
            this.renderer.setClearColor(GlobeMap.clearColor, 1);
            this.camera.position.z = this.GlobeSettings.cameraRadius;
            this.orbitControls.maxDistance = this.GlobeSettings.cameraRadius;
            this.orbitControls.minDistance = this.GlobeSettings.earthRadius + 1;
            this.orbitControls.rotateSpeed = this.GlobeSettings.rotateSpeed;
            this.orbitControls.zoomSpeed = this.GlobeSettings.zoomSpeed;
            this.orbitControls.autoRotate = this.GlobeSettings.autoRotate;

            const ambientLight: THREE.AmbientLight = new THREE.AmbientLight(GlobeMap.ambientLight);
            const light1: THREE.DirectionalLight = new THREE.DirectionalLight(GlobeMap.directionalLight, GlobeMap.directionalLightIntensity);
            const light2: THREE.DirectionalLight = new THREE.DirectionalLight(GlobeMap.directionalLight, GlobeMap.directionalLightIntensity);

            this.scene.add(ambientLight);
            this.scene.add(light1);
            this.scene.add(light2);

            light1.position.set(20, 20, 20);
            light2.position.set(0, 0, -20);

            const render: FrameRequestCallback = () => {
                try {
                    if (this.renderLoopEnabled) {
                        this.animationFrameId = requestAnimationFrame(render);
                    }
                    if (!this.shouldRender()) {
                        return;
                    }
                    this.orbitControls.update();
                    this.setEarthTexture();
                    if (this.heatmap && this.heatmap.display) {
                        this.heatmap.display(); // Needed for IE/Edge to behave nicely
                    }
                    this.renderer.render(this.scene, this.camera);
                    this.intersectBars();
                    this.needsRender = false;
                } catch (e) {
                    console.error(e);
                }
            };

            this.animationFrameId = requestAnimationFrame(render);
        }