three.js achieve urban simulation migration sphere Earth

Summarized below:
. 1, SphereGeometry achieve the earth's rotation;
2, THREE.ImageUtils.loadTexture loading map textures;
. 3, THREE.Math.degToRad , Math.sin, , Math.cos achieve three maps latitude and longitude coordinates x, y, z conversion between;
4, according to the number of track segments with a corresponding country flag gdp value achieved city.

The effect is as follows:

Preview Address: Three.js achieve urban simulation migration sphere Earth

Initialization scene, the camera, the renderer, the camera position is provided, the initialization light source, light source HemisphereLight , the light source position of the center position of a scene, the scene and source added

// initialization scenario 
var SCENE = new new THREE.Scene ();
 // initialize the camera, the first parameter is a vertical view of the camera field of view cone angle, the second parameter is aspect ratio of the camera view frustum, 
// third view of the camera parameter is the proximal face of the cone, the fourth parameter is the distal face of the camera frustum 
var camera = new new THREE.PerspectiveCamera (20 is, dom.clientWidth / dom.clientHeight,. 1, 100000 );
 // set the position of the camera , respectively, the corresponding parameters x, y, z position 
camera.position.set (0, 0, 200 is );
 var the renderer = new new THREE.WebGLRenderer ({ 
      Alpha: to true , 
      antialias: to true 
}); 
// set the light 
scene.add ( new new THREE.HemisphereLight('#ffffff', '#ffffff', 1));

Setting the Scene window size, and initialize the controller, the default window size of the browser window size remains the same, the final renderer will be loaded into the dom.

// set the window size, the width of the first parameter, the second parameter is the height 
renderer.setSize (dom.clientWidth, dom.clientHeight);
 // initialization controller 
var orbitcontrols = new new THREE.OrbitControls (Camera, renderer.domElement );
 // render loaded into the dom 
dom.appendChild (renderer.domElement);

Defined and earth material, through the earth SphereGeometryis achieved by ImageUtilsintroducing to the texture.

// 定义地球材质
var earthTexture = THREE.ImageUtils.loadTexture(earthImg, {}, function () {
    renderer.render(scene, camera);
});
// 创建地球
earthBall = new THREE.Mesh(new THREE.SphereGeometry(earthBallSize, 50, 50), new THREE.MeshBasicMaterial({
    map: earthTexture
}));
scene.add(earthBall);

Marking the three-dimensional location latitude and longitude coordinates x, y, z coordinate transformation method.

// Coordinates transfer function, longitude longitude, Latitude expressed alone, radius represents the radius of the sphere 
var the getPosition = function (longitude, Latitude, radius) {
     // the latitude and longitude coordinates is converted to rad 
    var LG = THREE.Math.degToRad ( longitude);
     var lt = THREE.Math.degToRad (Latitude);
     var TEMP = * RADIUS Math.cos (lt);
     // Get x, y, z coordinates 
    var X = TEMP * Math.sin, (LG);
     var Y * RADIUS = Math.sin, (lt);
     var Z = TEMP * Math.cos (LG);
     return { 
        X: X, 
        Y: Y,  
        Z: Z
    } 
}

Add track method between the two cities.

// add trace function 
var AddLine = function (V0, V3) {
     var angle = (v0.angleTo (V3) * 180 [) / Math.PI;
     var Alen = angle * 0.5 * (. 1 - angle / (* Math.PI * the parseInt earthBallSize (earthBallSize / 10 )));
     var hLen angle = angle * * 1.2 * (. 1 - angle / (Math.PI * * earthBallSize the parseInt (earthBallSize / 10 )));
     var P0 = new new THREE.Vector3 (0 , 0, 0 );
     // normal vector 
    var rayLine = new new THREE.Ray (P0, getVCenter (v0.clone (), v3.clone ()));
     // vertex coordinates 
    var vtop = rayLine.at(hLen / rayLine.at(1).distanceTo(p0));
    // 控制点坐标
    var v1 = getLenVcetor(v0.clone(), vtop, aLen);
    var v2 = getLenVcetor(v3.clone(), vtop, aLen);
    // 绘制贝塞尔曲线
    var curve = new THREE.CubicBezierCurve3(v0, v1, v2, v3);
    var geometry = new THREE.Geometry();
    geometry.vertices = curve.getPoints(100);
    var line = new MeshLine();
    line.setGeometry(geometry);
    var material = new MeshLineMaterial({
        color: metapLineColor,
        lineWidth: 0.1,
        transparent: true,
        opacity: 1
    })
    return {
        curve: curve,
        lineMesh: new THREE.Mesh(line.geometry, material)
    }
}

Motion trajectory of the ball on the implementation.

var animateDots = [];
// 线条对象集合
var groupLines = new THREE.Group();
// 线条
marking.children.forEach(function (item) {
    var line = addLine(marking.children[0].position, item.position);
    groupLines.add(line.lineMesh);
    animateDots.push(line.curve.getPoints(metapNum));
})
scene.add(groupLines);
// 线上滑动的小球
var aGroup = new THREE.Group();
for (var i = 0; i < animateDots.length; i ++) {
    for (var j = 0; j < markingNum; j ++) {
        var aGeo = new THREE.SphereGeometry(slideBallSize, 10, 10);
        var aMaterial = new THREE.MeshBasicMaterial({
            color: slideBallColor,
            transparent: true,
            opacity: 1 - j * 0.02
        })
        var aMesh = new THREE.Mesh(aGeo, aMaterial);
        aGroup.add(aMesh);
    }
}
var vIndex = 0;
var firstBool = true;
function animationLine () {
    aGroup.children.forEach(function (elem, index) {
        var _index = parseInt(index / markingNum);
        var index2 = index - markingNum * _index;
        var _vIndex = 0;
        if (firstBool) {
            _vIndex = vIndex - index2 % markingNum >= 0 ? vIndex - index2 % markingNum : 0;
        } else {
            _vIndex = vIndex - index2 % markingNum >= 0 ? vIndex - index2 % markingNum : metapNum + vIndex - index2;
        }
        var v = animateDots[_index][_vIndex];
        elem.position.set(v.x, v.y, v.z);
    })
    vIndex ++;
    if (vIndex > metapNum) {
        vIndex = 0;
    }
    if (vIndex == metapNum && firstBool) {
        firstBool = false;
    }
    requestAnimationFrame(animationLine);
}
scene.add(aGroup);

By marking the location positionto achieve confirm the location of the value, use animation requestAnimationFrameto achieve.

// 执行函数
var render = function () {
    scene.rotation.y -= 0.01;
    renderer.render(scene, camera);
    orbitcontrols.update();
    requestAnimationFrame(render);
}