let radius = 120;

// {x: -0.4125997402358515, y: 57.358410876766236, z: -127.70999359152135}

// "x": 50.57541802382371,
// "y": 182.1652470350363,
// "z": 219.90441074334933

let cameraPos = [{
	"x": 158.89926483177153,
	"y": 176.08171374275346,
	"z": -199.22984521977392
}, {
	"x": -98.89926483177153,
	"y": 186.08171374275346,
	"z": -199.22984521977392
}];
// console.log(cameraPos)
let areas = [
	[{
			name: "中国北京",
			position: [116.400164, 39.915794]
		}, {
			name: "智利",
			position: [-70.217041, -24.704033]
		}, {
			name: "尼日利亚",
			position: [7.51847, 9.669596]
		}, {
			name: "南非",
			position: [24.408165, -30.926127]
		}, {
			name: "阿尔及利亚",
			position: [2.570726, 28.19218]
		}, {
			name: "西班牙",
			position: [-3.685085,40.513354]
		},  {
			name: "葡萄牙",
			position: [-9.136235,38.791032]
		},{
			name: "意大利",
			position: [13.43112, 41.584442]
		}, {
			name: "希腊",
			position: [23.667491,38.017911]
		}, {
			name: "保加利亚",
			position: [23.374165,42.689152]
		}, {
			name: "埃及",
			position: [30.131042, 26.63477]
		}, {
			name: "阿联酋迪拜",
			position: [55.326078, 25.291998]
		}, {
			name: "哈萨克斯坦",
			position: [68.680626, 48.316102]
		}, {
			name: "巴基斯坦",
			position: [70.288738, 30.479325]
		}, {
			name: "印度",
			position: [78.52307, 21.070969]
		}, {
			name: "孟加拉",
			position: [90.185108, 24.186175]
		}, {
			name: "泰国",
			position: [100.818828, 16.077238]
		}, {
			name: "越南",
			position: [108.536217, 13.197201]
		}, {
			name: "菲律宾",
			position: [121.977606, 11.87825]
		}, {
			name: "印度尼西亚",
			position: [120.115325, -4.017399]
		}, {
			name: "澳大利亚",
			position: [132.96738, -24.412952]
		}, {
			name: "韩国",
			position: [127.396101, 37.292576]
		},
		{
			name: "新疆",
			position: [87.619677, 43.819638]
		}, {
			name: "西藏",
			position: [91.158264, 29.657414]
		}, {
			name: "青海",
			position: [101.785308, 36.62206]
		}, {
			name: "宁夏",
			position: [106.24721, 38.47055]
		}, {
			name: "甘肃",
			position: [103.839949, 36.061265]
		}, {
			name: "云南",
			position: [99.17609, 24.848179]
		}, {
			name: "呼和浩特",
			position: [111.699745, 40.836633]
		}, {
			name: "陕西",
			position: [108.957514, 34.281534]
		}, {
			name: "昆明",
			position: [102.844617, 24.882601]
		}, {
			name: "贵州",
			position: [106.694351, 26.594208]
		}, {
			name: "江西",
			position: [115.860229, 28.686253]
		}, {
			name: "河南",
			position: [113.678317, 34.766494]
		}, {
			name: "河北",
			position: [116.117612, 38.805296]
		}, {
			name: "广州",
			position: [113.259931, 23.141185]
		}, {
			name: "山西",
			position: [112.559027, 37.868437]
		}, {
			name: "安徽",
			position: [117.304668, 30.14455]
		}, {
			name: "福建",
			position: [119.304746, 26.076228]
		}, {
			name: "山东",
			position: [117.002146, 36.673468]
		}, {
			name: "江苏",
			position: [118.785076, 32.059923]
		}, {
			name: "上海",
			position: [121.479965, 31.22506]
		}, {
			name: "辽宁",
			position: [123.436169, 41.821256]
		}, {
			name: "黑龙江",
			position: [126.653558, 45.755979]
		}, {
			
			name: "沙特",
			position: [46.58705,24.647308]
		}, {
			
			name: "阿布扎比",
			position: [54.412559,24.481556]
		}, {
			
			name: "乌兹别克斯坦",
			position: [64.411063,41.027723]
		}


	],
	// [{
	// 	name: "中国北京",
	// 	position: [116.400164, 39.915794]
	// }],
];


var canvasearth = document.querySelector(".service-earth")
var locationGroup = new THREE.Group();



let scene, camera, renderer, light, controls, axesHelper, earth;



$(".service-sale-types ul li").on("click", function() {
	let i = $(this).index();
	$(this).addClass("on").siblings().removeClass("on")
	//
	const curCamera = {
		x: camera.position.x,
		y: camera.position.y,
		z: camera.position.z,
	}

	const curScale = {
		x: 1,
		y: 1,
		z: 1,
	}

	//
	const newCamera = {
		x: cameraPos[i].x,
		y: cameraPos[i].y,
		z: cameraPos[i].z
	};

	const newScale = {
		x: 1,
		y: 1,
		z: 1,
	}
	// 

	var tween1 = new TWEEN.Tween(curCamera).to(newCamera, 6000).easing(TWEEN.Easing.Quadratic.InOut)

	tween1.onUpdate(() => {
		camera.position.set(curCamera.x, curCamera.y, curCamera.z)
		camera.lookAt(0, 0, 0)
		controls.target.set(0, 0, 0) // 
		controls.update()
	})
	// 
	tween1.start()

	var tween = new TWEEN.Tween(curScale).to(newScale, 6000).easing(TWEEN.Easing.Quadratic.InOut)
	tween.onUpdate(() => {
		locationGroup.scale.set(curScale.x, curScale.y, curScale.z)
	})
	// 
	tween.start()

})


function intScene() {
	scene = new THREE.Scene();
	scene.position.set(0, 0, 0);
	// scene.background = new THREE.Color(0x0095D9);
	axesHelper = new THREE.AxesHelper(250);
	// 	scene.add(axesHelper);

}

function intCamera() {
	camera = new THREE.PerspectiveCamera(45, canvasearth.clientWidth / canvasearth.clientHeight, 1, 1000);
	camera.position.copy(cameraPos[0])
	camera.lookAt(scene.position);

	var helper = new THREE.CameraHelper(camera);
	// scene.add( helper );

}

function intRender() {
	renderer = new THREE.WebGLRenderer({
		antialias: true,
		alpha: true
	})

	renderer.toneMappingExposure = 0.7;
	renderer.setClearColor('#F6F9FD', 1.0);
	renderer.setSize(canvasearth.clientWidth, canvasearth.clientHeight)

	canvasearth.appendChild(renderer.domElement)
}

function intLight() {
	var light = new THREE.HemisphereLight(0xffffff, 0xffffff, 1);
	scene.add(light);
	var helper = new THREE.HemisphereLightHelper(light, 5);
	// scene.add(helper);
}


function intModels(data) {

	var loader = new THREE.TextureLoader();
	loader.load('../template/default/assets/images/service/e4.jpg', function(texture) {
		var geometry = new THREE.SphereGeometry(radius, 150, 150);
		let material = new THREE.MeshLambertMaterial({
			map: texture,
			side: THREE.DoubleSide,
		})
		earth = new THREE.Mesh(geometry, material);
		earth.position.set(0, 0, 0);
		locationGroup.add(earth)
		scene.add(locationGroup);
	})

	for (var i = 0; i < data.length; i++) {
		// 
		var markPos = createPosition(data[i].position)
		// 		console.log(markPos)
		setCircle(markPos);
		setCircleText(markPos, data[i].name);
	}
}

function setCircle(markPos) {
	// let textureLoader = new THREE.TextureLoader();
	// let meshFloorTexture = textureLoader.load("../template/default/assets/images/service/address.jpg");
// 	var geometrys = new THREE.CylinderBufferGeometry(.5, .1, 6, 14);
// 	var materials = new THREE.MeshBasicMaterial({
// 		color: 0x0095D9,

// 	});

// 	var circle = new THREE.Mesh(geometrys, materials);
// 	circle.position.set(markPos.x, markPos.y, markPos.z);
// 	var coordVec3 = new THREE.Vector3(markPos.x, markPos.y, markPos.z).normalize();
// 	var meshNormal = new THREE.Vector3(0, 1, 0);
// 	circle.quaternion.setFromUnitVectors(meshNormal, coordVec3);
// 	locationGroup.add(circle)
// 	scene.add(locationGroup);
	var texture = new THREE.TextureLoader().load("../template/default/assets/images/service/address.png");
// 	texture.needsUpdate = true;
	let geometry = new THREE.BufferGeometry();
	var material = new THREE.PointsMaterial({
		map: texture,
		size: 8,
		side: THREE.DoubleSide,
		transparent: true,
	});
	let vertices = [0, 0, -5];
	geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
	let sprite = new THREE.Points(geometry, material);
	sprite.position.set(markPos.x, markPos.y, markPos.z);
	sprite.lookAt(0, 0, 0)
	locationGroup.add(sprite)
	scene.add(locationGroup);

}
// 

function setCircleText(markPos, name) {
	let canvas = document.createElement('canvas');
	canvas.width = 600;
	canvas.height = 600;
	canvas.background="red"
	let ctx = canvas.getContext('2d');
	
// 	ctx.fillStyle = "#fff";
// 	ctx.fillRect(50, 200,500,200);
	//
	
	ctx.fillStyle = "#333";
	ctx.font = "80px Arial ";
	ctx.textAlign = "center";
	ctx.textBaseline = "middle";
	ctx.fillText(name, 600 / 2, 600 / 2);
	
	let texture = new THREE.Texture(canvas);
	texture.needsUpdate = true;
	let spriteMaterial = new THREE.PointsMaterial({
		map: texture,
		size: 40,
		transparent: true,
// 		side: THREE.DoubleSide,
	});
	//
	let geometry = new THREE.BufferGeometry();
	let vertices = [0, 0, -10];
	geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
	let sprite = new THREE.Points(geometry, spriteMaterial);
	sprite.position.set(markPos.x, markPos.y, markPos.z);
	sprite.lookAt(0, 0, 0)
	locationGroup.add(sprite)
	scene.add(locationGroup);
}

function createPosition(lnglat) {
	let spherical = new THREE.Spherical
	spherical.radius = radius;
	const lng = lnglat[0]
	const lat = lnglat[1]
	const theta = (lng + 90) * (Math.PI / 180)
	const phi = (90 - lat) * (Math.PI / 180)
	spherical.phi = phi;
	spherical.theta = theta;
	let position = new THREE.Vector3()
	position.setFromSpherical(spherical)
	// console.log(position)
	return position;
}


function intControls() {
	controls = new THREE.OrbitControls(camera, renderer.domElement);
	controls.enableZoom = false;
}

function renderScene() {
	TWEEN.update()
	renderer.render(scene, camera);
	requestAnimationFrame(renderScene);
}

//
function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight)
}

window.addEventListener('resize', onWindowResize, false)


intScene();
intCamera();
intRender();
intLight();
intModels(areas[0]);
intControls()
renderScene();