Densyakun/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
</head>

<body>
    <div id="container">
        <div id="map" style="position: fixed; visibility:hidden; width: 1000px; height:500px;"></div>
    </div>
    <script src="js/three.js"></script>
    <script src="https://unpkg.com/three@0.131.3/examples/js/controls/OrbitControls.js"></script>
    <script type="module" src="index.js"></script>
</body>

</html>

## index.js
import { WEBGL } from "./js/WebGL.js";

const semiMajorAxis = 6378137;
const flattening = 1 - 1 / 298.257223563; // WGS 84
const cameraNear = 0.001;
const cameraFar = 100000000;

let camera, scene, renderer, light, globe;
let controls;
let map, view;

if (WEBGL.isWebGLAvailable()) {
    initThree();
    initMap();
    animate();
} else {
    const warning = WEBGL.getWebGLErrorMessage();
    document.getElementById('container').appendChild(warning);
}

function initThree() {
    // three.js
    scene = new THREE.Scene();

    renderer = new THREE.WebGLRenderer();
    document.body.appendChild(renderer.domElement);

    globe = new THREE.Mesh(
        new THREE.SphereGeometry(semiMajorAxis, 64, 64),
        new THREE.MeshStandardMaterial()
    );
    scene.add(globe);
    globe.scale.set(1, flattening, 1);

    light = new THREE.AmbientLight(0xffffff);
    scene.add(light);

    camera = new THREE.PerspectiveCamera(110, window.innerWidth / window.innerHeight, cameraNear, cameraFar);
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.2;
    controls.enablePan = false;
    controls.minDistance = semiMajorAxis;
    controls.maxDistance = semiMajorAxis + 1000000;
    controls.zoomSpeed = 0.2;
    camera.position.set(0, 0, controls.maxDistance);
    camera.rotation.set(0, -Math.PI / 2, 0);

    const gridHelper = new THREE.GridHelper(20000, 20);
    scene.add(gridHelper);
    const axisHelper = new THREE.AxisHelper(1000000000);
    scene.add(axisHelper);

    window.onresize = onWindowResize;
    onWindowResize();
}

function initMap() {
    var osm = new ol.layer.Tile({
        extent: [-180, -90, 180, 90],
        source: new ol.source.OSM()
    });

    view = new ol.View({
        projection: "EPSG:4326",
        extent: [-180, -90, 180, 90],
        center: [0, 0],
        zoom: 2
    });

    map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                extent: [-180, -90, 180, 90],
                source: new ol.source.OSM({
                    maxZoom: 2
                })
            }),
            osm,
            new ol.layer.Tile({
                source: new ol.source.TileDebug()
            }),
        ],
        view: view
    });

    map.on("rendercomplete", function () {
        var mapContainer = document.getElementById('map');
        var mapCanvas = mapContainer.getElementsByTagName('canvas')[0];
        var texture = new THREE.CanvasTexture(mapCanvas);
        globe.material.map = texture;
        globe.material.needsUpdate = true;
    });

    controls.addEventListener("end", function (event) {
        const a = Math.floor(20 -
            (controls.getDistance() - controls.minDistance) / (controls.maxDistance - controls.minDistance)
            * 19);
        console.log(a);
    });
}

function onWindowResize() {
    const width = window.innerWidth;
    const height = window.innerHeight;

    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);

    camera.aspect = width / height;
    camera.updateProjectionMatrix();
}

function animate() {
    try {
        render();

        controls.update();

        requestAnimationFrame(animate);
    } catch (error) {
        console.error(error);
    }
}

function render() {
    renderer.render(scene, camera);
}
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

	<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
	</head>

	<body>
	<div id="container">
	<div id="map" style="position: fixed; visibility:hidden; width: 1000px; height:500px;"></div>
	</div>
	<script src="js/three.js"></script>
	<script src="https://unpkg.com/three@0.131.3/examples/js/controls/OrbitControls.js"></script>
	<script type="module" src="index.js"></script>
	</body>

	</html>
	import { WEBGL } from "./js/WebGL.js";

	const semiMajorAxis = 6378137;
	const flattening = 1 - 1 / 298.257223563; // WGS 84
	const cameraNear = 0.001;
	const cameraFar = 100000000;

	let camera, scene, renderer, light, globe;
	let controls;
	let map, view;

	if (WEBGL.isWebGLAvailable()) {
	initThree();
	initMap();
	animate();
	} else {
	const warning = WEBGL.getWebGLErrorMessage();
	document.getElementById('container').appendChild(warning);
	}

	function initThree() {
	// three.js
	scene = new THREE.Scene();

	renderer = new THREE.WebGLRenderer();
	document.body.appendChild(renderer.domElement);

	globe = new THREE.Mesh(
	new THREE.SphereGeometry(semiMajorAxis, 64, 64),
	new THREE.MeshStandardMaterial()
	);
	scene.add(globe);
	globe.scale.set(1, flattening, 1);

	light = new THREE.AmbientLight(0xffffff);
	scene.add(light);

	camera = new THREE.PerspectiveCamera(110, window.innerWidth / window.innerHeight, cameraNear, cameraFar);
	controls = new THREE.OrbitControls(camera, renderer.domElement);
	controls.enableDamping = true;
	controls.dampingFactor = 0.2;
	controls.enablePan = false;
	controls.minDistance = semiMajorAxis;
	controls.maxDistance = semiMajorAxis + 1000000;
	controls.zoomSpeed = 0.2;
	camera.position.set(0, 0, controls.maxDistance);
	camera.rotation.set(0, -Math.PI / 2, 0);

	const gridHelper = new THREE.GridHelper(20000, 20);
	scene.add(gridHelper);
	const axisHelper = new THREE.AxisHelper(1000000000);
	scene.add(axisHelper);

	window.onresize = onWindowResize;
	onWindowResize();
	}

	function initMap() {
	var osm = new ol.layer.Tile({
	extent: [-180, -90, 180, 90],
	source: new ol.source.OSM()
	});

	view = new ol.View({
	projection: "EPSG:4326",
	extent: [-180, -90, 180, 90],
	center: [0, 0],
	zoom: 2
	});

	map = new ol.Map({
	target: 'map',
	layers: [
	new ol.layer.Tile({
	extent: [-180, -90, 180, 90],
	source: new ol.source.OSM({
	maxZoom: 2
	})
	}),
	osm,
	new ol.layer.Tile({
	source: new ol.source.TileDebug()
	}),
	],
	view: view
	});

	map.on("rendercomplete", function () {
	var mapContainer = document.getElementById('map');
	var mapCanvas = mapContainer.getElementsByTagName('canvas')[0];
	var texture = new THREE.CanvasTexture(mapCanvas);
	globe.material.map = texture;
	globe.material.needsUpdate = true;
	});

	controls.addEventListener("end", function (event) {
	const a = Math.floor(20 -
	(controls.getDistance() - controls.minDistance) / (controls.maxDistance - controls.minDistance)
	* 19);
	console.log(a);
	});
	}

	function onWindowResize() {
	const width = window.innerWidth;
	const height = window.innerHeight;

	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(width, height);

	camera.aspect = width / height;
	camera.updateProjectionMatrix();
	}

	function animate() {
	try {
	render();

	controls.update();

	requestAnimationFrame(animate);
	} catch (error) {
	console.error(error);
	}
	}

	function render() {
	renderer.render(scene, camera);
	}