import * as THREE from "three";

import { lla2xyz } from './latlngutil.js'



const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({ antialias: true, });
renderer.setClearAlpha(0.0)
renderer.setSize(window.innerWidth/2, window.innerHeight/2);
document.body.appendChild(renderer.domElement);



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


var latlngs = [{lat:31,lng:104,alt:549}]

const vertices = [];
var last = {}
latlngs.forEach(element => {
    var res = lla2xyz(element.lat,element.lng,element.alt)
    vertices.push( res.x,res.y,res.z);
    last = res;
});
camera.position.x = last.x; 
camera.position.y = last.y; 
camera.position.z = last.z + 100; 
camera.lookAt(last.x,last.y,last.z)

const geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );

const material = new THREE.PointsMaterial( { color: 0x888888 ,size:10} );

const points = new THREE.Points( geometry, material );

scene.add( points );