使用javascript标记

我正在使用一个WebGL项目在全球范围内绘制线条。它使用的是three.js，绘图正在正确进行。我不知道如何标记绘图开始和结束的点。如果可能的话，有人能帮我吗？如果有人能帮助我，我将不胜感激。代码如下：

<script>
        var planetTilt = latlngDeg2rad(23.5);
        console.log(planetTilt);
        var planetRadius = 6378;
        var rotationSpeed = 0;
        var cloudsScale = 1.02;
        var height = window.innerHeight;
        var width = window.innerWidth;
        var camera, controls, scene, renderer, geometry, meshPlanet, meshClouds;
        var clock = new THREE.Clock();
        var cameraZoomFactor = 6;
        var displayHelp = false;
        var curZoom = 100;
        var markerGeom;
        var markerMaterial;
        var stats;

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

            renderer.setSize(width, height);

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

            controls.screen.width = width;
            controls.screen.height = height;

            camera.radius = (width + height) / 4;
        }

        function init() {
            if (!Detector.webgl) Detector.addGetWebGLMessage();

            scene = new THREE.Scene();

            renderer = new THREE.WebGLRenderer({
                clearAlpha: 1,
                clearColor: 0x000000,
                antialias: true
            });
            renderer.setSize(width, height);
            renderer.sortObjects = true;
            renderer.autoClear = false;
            renderer.gammaInput = true;
            renderer.gammaOutput = true;

            renderer.domElement.style.position = 'absolute';
            var container = document.getElementById('container');
            container.appendChild(renderer.domElement);

            camera = new THREE.PerspectiveCamera(25, width / height, 50, 1e7);
            camera.position.z = planetRadius * cameraZoomFactor;
            scene.add(camera);

            controls = new THREE.TrackballControls(camera, renderer.domElement);
            controls.rotateSpeed = 0.3;
            controls.noZoom = true;
            controls.noPan = true;
            controls.staticMoving = false;
            controls.dynamicDampingFactor = 0.4;

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.bottom = '0px';
            stats.domElement.style.right = '0px';

            document.body.appendChild( stats.domElement );

            var dirLight = new THREE.DirectionalLight(0xFFFFFF);
            dirLight.position.set(1, 0, 1)
                .normalize();
            scene.add(dirLight);
            var camLight = new THREE.DirectionalLight(0xffffff);
            camera.add(camLight);

            var ambientLight = new THREE.AmbientLight(0x999999);
            scene.add(ambientLight);

            var planet = new cpPlanet({
                planet_radius: planetRadius,
                planet_tilt_rad: planetTilt,
                planet_cloud_texture: "common/textures/cloud.png",
                planet_surface_texture: "common/textures/earth_surface.jpg",
                planet_normals_texture: "common/textures/earth_normals.jpg",
                planet_specular_texture: "common/textures/earth_specular.jpg",
                planet_geom_segments: 64,
                planet_geom_rings: 64,
                use_surface_shader: true,
                create_combined_mesh: false
            });

            meshPlanet = planet.surface_mesh;
            scene.add(meshPlanet);

            meshClouds = planet.cloud_mesh;
            scene.add(meshClouds);

            // markers and tracks
            var marker_radius = 32;
            var marker_color = 0xff0000;
            markerGeom = new THREE.SphereGeometry(marker_radius, 5, 5);
            markerMaterial = new THREE.MeshPhongMaterial({
                ambient: 0x030303,
                color: marker_color,
                specular: 0x990000,
                shininess: 80,
                shading: THREE.SmoothShading
            });

            // need to update a bunch of stuff when window size changes
            window.addEventListener('resize', onWindowResize, false);
        }

        function animate() {
            requestAnimationFrame(animate);

            var delta = clock.getDelta();

            meshPlanet.rotation.y += rotationSpeed * rotationSpeed * delta;
            meshClouds.rotation.y += rotationSpeed * 1.25 * rotationSpeed * delta;

            controls.update();

            TWEEN.update();

            stats.update();

            renderer.clear();
            renderer.render(scene, camera);
        }

        function addData(locs) {

            var index = Math.floor(Math.random() * locs.length) - 1;
            var start_lat = locs[index].lat;
            var start_lng = locs[index].lng;

            var data_size = 1;
            var start = Math.floor(Math.random() * locs.length) - 1;
            if (start + data_size > locs.length) {
                start = locs.length - data_size - 1;
            }

            var hue = Math.random();

            var i;
            for (i = start; i < start + data_size; i++) {
                var obj = locs[i];
                if (i != index) {
                    addTrack(25.2697, 55.3095, 28.6667, 77.2167, planetRadius, hue+.5);//delhi
                    addMarker(28.6667, 77.2167, planetRadius);
                    addTrack(25.2697, 55.3095, 35.6833, 51.4167, planetRadius, hue+.5);//terhan
                    addMarker(35.6833, 51.4167, planetRadius);
                    addTrack(25.2697, 55.3095, 51.0000, 9.0000, planetRadius, hue+.5);//germany
                    addMarker(51.0000, 9.0000, planetRadius);
                    addTrack(25.2697, 55.3095, 33.6667, 73.1667, planetRadius, hue+.5);//Islamabad
                    addMarker(33.6667, 73.1667, planetRadius);
                    addTrack(25.2697, 55.3095, 31.2000, 121.5000, planetRadius, hue+.5);//Shanghai,
                    addMarker(31.2000, 121.5000, planetRadius);

                }
            }
        }

        function zoomToStart() {
            new TWEEN.Tween({
                scale: 1
            })
                .to({
                scale: 100
            }, 2500)
                .easing(TWEEN.Easing.Elastic.InOut)
                .onUpdate(function () {
                var true_scale = this.scale / 100;
                meshPlanet.scale.set(true_scale, true_scale, true_scale);
                meshClouds.scale.set(true_scale * cloudsScale, true_scale * cloudsScale, true_scale * cloudsScale);
            })
                .start();
        }

        function addMarker(lat, lng, radius) {
            var marker_mesh = new THREE.Mesh(markerGeom, markerMaterial);
            var marker_position = latlngPosFromLatLng(lat, lng, radius);

            marker_mesh.position.x = marker_position.x;
            marker_mesh.position.y = marker_position.y;
            marker_mesh.position.z = marker_position.z;

            marker_mesh.name = "trackmarker";
            meshPlanet.add(marker_mesh);
        }

        function addTrackLine(spline, hue) {
            var num_control_points = 32;
            var i;
            var colors = [];
            var geometry = new THREE.Geometry();
            var pos;

            for (i = 0; i < num_control_points; i++) {
                var index = i / num_control_points;
                pos = spline.getPoint(index);

                colors[i] = new THREE.Color(0xffffff);
                colors[i].setHSV(hue, (1.0 - i / num_control_points), 1.0);

                geometry.vertices.push(new THREE.Vector3(pos.x, pos.y, pos.z));
            }
            pos = spline.getPoint(1.0);
            geometry.vertices.push(new THREE.Vector3(pos.x, pos.y, pos.z));

            geometry.colors = colors;

            var material = new THREE.LineBasicMaterial({
                color: 0xffffff,
                opacity: 1,
                linewidth: 2
            });
            material.vertexColors = true;

            var line = new THREE.Line(geometry, material);
            line.name = "trackline";
            meshPlanet.add(line);
        }

        function addTrack(start_lat, start_lng, end_lat, end_lng, radius, hue) {
            var num_control_points = 8;
            var max_altitude = 500 + Math.random() * 1200;

            var points = [];
            var i;
            for (i = 0; i < num_control_points + 1; i++) {
                var arc_angle = i * 180.0 / num_control_points;
                var arc_radius = radius + (Math.sin(latlngDeg2rad(arc_angle))) * max_altitude;
                var latlng = latlngInterPoint(start_lat, start_lng, end_lat, end_lng, i / num_control_points);
                var pos = latlngPosFromLatLng(latlng.lat, latlng.lng, arc_radius);

                points.push(new THREE.Vector3(pos.x, pos.y, pos.z));
            }

            var spline = new THREE.SplineCurve3(points);

            addTrackLine(spline, hue);
        }








/*
        var deleteMe = [];

        function newDataCallback(node) {
            if (node instanceof THREE.Line && node.name == "trackline") {
                deleteMe.push(node);
            }
            if (node instanceof THREE.Mesh && node.name == "trackmarker") {
                deleteMe.push(node);
            }
        }

*/

        window.onload = function () {
            if (!Detector.webgl) {
                Detector.addGetWebGLMessage();
                return;
            }

            init();

            var num_new_data_adds = 1;
            for (var i = 0; i < num_new_data_adds; ++i) {
                addData(locations);
            }

            zoomToStart();

            animate();
        }
    </script>

var planetTilt=latlngDeg2rad（23.5）；
控制台日志（planetTilt）；
var planetRadius=6378；
var旋转速度=0；
var CloudsCale=1.02；
var height=window.innerHeight；
变量宽度=window.innerWidth；
var摄影机、控件、场景、渲染器、几何体、网格行星、网格云；
var clock=新的三个时钟（）；
var cameraZoomFactor=6；
var displayHelp=false；
var-curZoom=100；
var-markerGeom；
var标记材料；
var统计；
函数onWindowResize（事件）{
宽度=window.innerWidth；
高度=窗内高度；
设置大小（宽度、高度）；
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
controls.screen.width=宽度；
controls.screen.height=高度；
摄像机半径=（宽度+高度）/4；
}
函数init（）{
如果（！Detector.webgl）Detector.addGetWebGLMessage（）；
场景=新的三个。场景（）；
renderer=new THREE.WebGLRenderer({
clearAlpha:1，
clearColor:0x000000，
反别名：对
});
设置大小（宽度、高度）；
renderer.sortObjects=true；
renderer.autoClear=false；
renderer.gammaInput=true；
renderer.gammaOutput=true；
renderer.doElement.style.position='absolute'；
var container=document.getElementById（'container'）；
container.appendChild（renderer.domeElement）；
摄像机=新的三个透视摄像机（25，宽/高，50，1e7）；
camera.position.z=planetRadius*cameraZoomFactor；
场景。添加（摄影机）；
控件=新的三个.trackball控件（摄影机、渲染器.doElement）；
controls.rotateSpeed=0.3；
controls.noZoom=true；
controls.noPan=true；
controls.staticMoving=false；
controls.dynamicDampingFactor=0.4；
统计数据=新统计数据（）；
stats.domElement.style.position='绝对'；
stats.domeElement.style.bottom='0px'；
stats.domElement.style.right='0px'；
document.body.appendChild（stats.doElement）；
var dirLight=新的三方向光（0xFFFFFF）；
dirLight.position.set（1,0,1）
.normalize（）；
场景。添加（dirLight）；
var camLight=新的三方向灯（0xffffff）；
摄像头。添加（camLight）；
var环境光=新的三个环境光（0x999999）；
场景。添加（环境光）；
var planet=新cpPlanet({
行星半径：planetRadius，
行星倾斜弧度：行星倾斜，
行星云纹理：“common/textures/cloud.png”，
行星表面纹理：“common/textures/earth\u surface.jpg”，
行星法线纹理：“common/textures/earth\u normals.jpg”，
行星反射纹理：“common/textures/earth\u specular.jpg”，
行星几何段：64，
行星几何环：64，
使用曲面着色器：true，
创建组合网格：false
});
meshPlanet=planet.surface\u网格；
场景。添加（网格行星）；
meshClouds=planet.cloud\u mesh；
场景。添加（网格云）；
//标记和轨道
var marker_半径=32；
var marker_color=0xff0000；
markerGeom=新的三点球面法（marker_半径，5,5）；
markerMaterial=新的三点网格材质({
环境温度：0x030303，
颜色：标记颜色，
镜面反射：0x990000，
光泽度:80,，
明暗处理：三点明暗处理
});
//当窗口大小改变时，需要更新一堆东西
addEventListener（'resize'，onWindowResize，false）；
}
函数animate（）{
请求动画帧（动画）；
var delta=clock.getDelta（）；
meshPlanet.rotation.y+=旋转速度*旋转速度*增量；
网格云.rotation.y+=旋转速度*1.25*旋转速度*delta；
控件更新（）；
TWEEN.update（）；
stats.update（）；
.clear（）；
渲染器。渲染（场景、摄影机）；
}
函数addData（locs）{
var index=Math.floor（Math.random（）*locs.length）-1；
var start\u lat=locs[index].lat；
var start_lng=locs[index].lng；
var数据_size=1；
var start=Math.floor（Math.random（）*locs.length）-1；
如果（开始+数据大小>位置长度）{
开始=位置长度-数据大小-1；
}
var hue=Math.random（）；
var i；
对于（i=start；i