3D引擎three.js/Babylon.js/physijs.js/clipper.js绘制地球飞机，three.js是JS的WebGL第三方库。

3D引擎”Babylon.JS”入门教程翻译总结

使用三个月的业余时间把官方教程的入门部分译为中文并上传到github，在下一步编程前做一个总结。

首先我们来看下要实现的效果

这个缩小后的图片，下面我们来看下近距离的动态效果。。

效果比较简陋，需要后期再处理。。。

下面进入主题，代码篇。。

HTML部分：

JS部分(globe.js)

1、实现地球
地球贴图(可以在网上下载)

2、添加球面光源(这里使用的是半球光)

3、添加星点

4、添加飞机

这里需要我们把 经纬度坐标 转成 xyz 坐标

画飞机

<span class="hljs-string">// <span class="hljs-string">&#x98DE;&#x673A;&#x5F62;&#x72B6;(&#x4E0D;&#x60F3;&#x753B;&#x7684;&#xFF0C;&#x53EF;&#x4EE5;&#x4E0B;&#x8F7D;&#x4E2A; <span class="hljs-string">&#x98DE;&#x673A;&#x6A21;&#x578B; <span class="hljs-string">&#x4F7F;&#x7528;&#x52A0;&#x8F7D;&#x5668;&#x52A0;&#x8F7D;&#x8FDB;&#x6765;)
<span class="hljs-string">var <span class="hljs-string">planeShape <span class="hljs-string">= <span class="hljs-string">new <span class="hljs-string">THREE.Shape();
<span class="hljs-string">planeShape.moveTo( <span class="hljs-number">0<span class="hljs-string">, <span class="hljs-number">0<span class="hljs-string">);
<span class="hljs-string">planeShape.lineTo(0.2, <span class="hljs-number">-0.2<span class="hljs-string">);
<span class="hljs-string">planeShape.lineTo(0.2, <span class="hljs-number">-1.3<span class="hljs-string">);
<span class="hljs-string">planeShape.lineTo(1.6,-2.7);
<span class="hljs-string">planeShape.lineTo(1.6,-3);
<span class="hljs-string">planeShape.lineTo(0.2, <span class="hljs-number">-2.1<span class="hljs-string">);
<span class="hljs-string">planeShape.lineTo(0.2, <span class="hljs-number">-3<span class="hljs-string">);
<span class="hljs-string">planeShape.lineTo(0.5, <span class="hljs-number">-3.4<span class="hljs-string">);
<span class="hljs-string">planeShape.lineTo(0.5, <span class="hljs-number">-3.7<span class="hljs-string">);
<span class="hljs-string">planeShape.lineTo(0, <span class="hljs-number">-3.3<span class="hljs-string">);
<span class="hljs-string">planeShape.lineTo(-0.5, <span class="hljs-number">-3.7<span class="hljs-string">);
<span class="hljs-string">planeShape.lineTo(-0.5, <span class="hljs-number">-3.4<span class="hljs-string">);
<span class="hljs-string">planeShape.lineTo(-0.2, <span class="hljs-number">-3<span class="hljs-string">);
<span class="hljs-string">planeShape.lineTo(-0.2, <span class="hljs-number">-2.1<span class="hljs-string">);
<span class="hljs-string">planeShape.lineTo(-1.6,-3);
<span class="hljs-string">planeShape.lineTo(-1.6,-2.7);
<span class="hljs-string">planeShape.lineTo(-0.2, <span class="hljs-number">-1.3<span class="hljs-string">);
<span class="hljs-string">planeShape.lineTo(-0.2, <span class="hljs-number">-0.2<span class="hljs-string">);
<span class="hljs-string">var <span class="hljs-string">planeGeometry <span class="hljs-string">= <span class="hljs-string">new <span class="hljs-string">THREE.ShapeGeometry(planeShape);
<span class="hljs-string">// <span class="hljs-string">&#x98DE;&#x673A;&#x6750;&#x8D28;
<span class="hljs-string">var <span class="hljs-string">planeMaterial <span class="hljs-string">= <span class="hljs-string">new <span class="hljs-string">THREE.MeshPhongMaterial({color: <span class="hljs-number">0x0FB4DD<span class="hljs-string">, <span class="hljs-attr">side: <span class="hljs-string">THREE.DoubleSide, <span class="hljs-attr">depthTest: <span class="hljs-literal">true<span class="hljs-string">});</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

depthTest作用是能否透过球体看到飞机，如果是false则旋转到球体另一面也能看到飞机

添加飞机

绘制轨迹(使用socket来获取的飞行轨迹经纬度坐标点)

如果要绘制所有点，且头尾是在球面上的曲线，则需要两次循环

<span class="hljs-keyword">var tcaRemainLength = tcaLength-<span class="hljs-function">tcaHalfLength
<span class="hljs-title">for<span class="hljs-params">(<span class="hljs-keyword">var j=<span class="hljs-number">0; j<tcahalflength; j++) { < span></tcahalflength;></span></span></span></span></span></span>

这个部分看看就行了。。

光点动画

这个点使用的是sphere，，当然也可以用顶点来实现，如下

<span class="hljs-keyword">var geometry = <span class="hljs-keyword">new THREE.Geometry();
geometry.vertices.push(<span class="hljs-keyword">new THREE.Vector3(<span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0))
geometry.colors.push(<span class="hljs-keyword">new THREE.Color(<span class="hljs-number">0xffffff));

<span class="hljs-keyword">var material = <span class="hljs-keyword">new THREE.PointsMaterial({size: <span class="hljs-number">1, vertexColors: THREE.VertexColors, opacity: <span class="hljs-number">0.75, sizeAttenuation: <span class="hljs-literal">true, transparent: <span class="hljs-literal">true});
<span class="hljs-keyword">var point = <span class="hljs-keyword">new THREE.Points(geometry, material);
point.position.<span class="hljs-keyword">set(x, y, z);
<span class="hljs-keyword">group.<span class="hljs-keyword">add(point);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

另外不想用光点动画的话，也可以用线动画，实现原理是不断更新顶点坐标，如下

<span class="hljs-keyword">var curveGeometry = <span class="hljs-keyword">new THREE.Geometry();
<span class="hljs-keyword">var curveData = <span class="hljs-keyword">new THREE.CatmullRomCurve3(verArr.slice(<span class="hljs-number">0, <span class="hljs-number">10));
curveGeometry.vertices = curveData.getPoints(<span class="hljs-number">10);

<span class="hljs-keyword">var curveMaterial = <span class="hljs-keyword">new THREE.LineBasicMaterial({color: <span class="hljs-number">0x40E0D0});
<span class="hljs-keyword">var curveLine = <span class="hljs-keyword">new THREE.Line(curveGeometry, curveMaterial);
group.add(curveLine);

<span class="hljs-keyword">var index = <span class="hljs-number">0;
<span class="hljs-function"><span class="hljs-keyword">function <span class="hljs-title">lineAnimate<span class="hljs-params">() {
    index++;
    <span class="hljs-keyword">if(index>coordsNum<span class="hljs-number">-10) {
        index = <span class="hljs-number">0;
    }
    <span class="hljs-keyword">var offsetData = verArr.slice(index, <span class="hljs-number">10+index);
    <span class="hljs-keyword">if(offsetData.length > <span class="hljs-number">0) {
        curveData = <span class="hljs-keyword">new THREE.CatmullRomCurve3(offsetData);
           curveLine.geometry.vertices = curveData.getPoints(<span class="hljs-number">10);
        curveLine.geometry.verticesNeedUpdate = <span class="hljs-literal">true;
    }
    requestAnimationFrame(lineAnimate);
}
lineAnimate();</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

最后就是布置场景和事件了

完整代码：

var log = console.log.bind(console);

var globeObj = (function() {
    'use strict';

    // 判断浏览器是否支持webgl
    if(!Detector.webgl) Detector.addGetWebGLMessage();

    var container, stats;
    var camera, scene, renderer;
    var group;
    var mouseX = 0, mouseY = 0;
    var winWth = window.innerWidth, winHgt = window.innerHeight;

    // 获取position
    function getPosition(lng, lat, alt) {
        var phi = (90-lat)*(Math.PI/180),
            theta = (lng+180)*(Math.PI/180),
            radius = alt+200,
            x = -(radius * Math.sin(phi) * Math.cos(theta)),
            z = (radius * Math.sin(phi) * Math.sin(theta)),
            y = (radius * Math.cos(phi));
        return {x: x, y: y, z: z};
    }

    // 飞机
    function plane() {
        var socket = io('https://loc.variflight.com/*****此处接口地址不能给了', {transports: ['websocket']});

        var clientBounds = [52.793056,72.427908,2.970897,135.181814];

        // 连接
        socket.on('connect', function() {
            socket.emit("sub", clientBounds, -1, '', function(){});
        });

        // 飞机标记
        var planeMarkers = {};

        // 飞机形状
        var planeShape = new THREE.Shape();
        planeShape.moveTo( 0, 0);
        planeShape.lineTo(0.2, -0.2);
        planeShape.lineTo(0.2, -1.3);
        planeShape.lineTo(1.6,-2.7);
        planeShape.lineTo(1.6,-3);
        planeShape.lineTo(0.2, -2.1);
        planeShape.lineTo(0.2, -3);
        planeShape.lineTo(0.5, -3.4);
        planeShape.lineTo(0.5, -3.7);
        planeShape.lineTo(0, -3.3);
        planeShape.lineTo(-0.5, -3.7);
        planeShape.lineTo(-0.5, -3.4);
        planeShape.lineTo(-0.2, -3);
        planeShape.lineTo(-0.2, -2.1);
        planeShape.lineTo(-1.6,-3);
        planeShape.lineTo(-1.6,-2.7);
        planeShape.lineTo(-0.2, -1.3);
        planeShape.lineTo(-0.2, -0.2);
        var planeGeometry = new THREE.ShapeGeometry(planeShape);
        // 飞机材质
        var planeMaterial = new THREE.MeshPhongMaterial({color: 0x0FB4DD, side: THREE.DoubleSide, depthTest: true});
        // 添加飞机
        function addPlane(item) {
            if(item.anum && item.lng && item.lat) {
                var plane = new THREE.Mesh(planeGeometry, planeMaterial);
                // 旋转
                plane.rotation.z = THREE.Math.degToRad(item.ang);
                // 定位
                var position = getPosition(item.lng, item.lat, 5);
                plane.position.set(position.x, position.y, position.z);
                // 显示/隐藏
                // plane.visible = false;
                // 保存
                planeMarkers[item.anum] = plane;
                // 添加到场景
                group.add(plane);
                // 绘制历史轨迹
                drawHistoryTrack(item.anum);
            }
        }

        // 时间段
        var curTime = Date.parse(new Date())/1000;
        var depTime = curTime - 30*60;
        // 轨迹线质
        var trackMaterial = new THREE.LineBasicMaterial({color : 0x1B94B1});
        // 绘制历史轨迹
        function drawHistoryTrack(anum) {
            socket.emit("fullPath", anum, depTime, curTime, function(status, data){
                if(status) {
                    var dLength = data.length;
                    if(dLength>=2) {
                        var trackCoordArr = [];
                        for(var i=0; i<dlength; i++) { if(data[i].lng && data[i].alt) trackcoordarr.push({lng: data[i].lng, lat: data[i].lat}); } var tcalength="trackCoordArr.length;" if(tcalength>=2) {
                            var tcaHalfLength = Math.ceil(tcaLength/2),
                                tcaRemainLength = tcaLength-tcaHalfLength,
                                vertexArr = [];

                            /* &#x6240;&#x6709;&#x70B9;
                            for(var j=0; j<tcahalflength; j++) { var p1="getPosition(trackCoordArr[j].lng," trackcoordarr[j].lat, j*0.05); vertexarr.push(new three.vector3(p1.x, p1.y, p1.z)); } for(var k="tcaRemainLength;">0; k--) {
                                var p2 = getPosition(trackCoordArr[tcaLength-k].lng, trackCoordArr[tcaLength-k].lat, k*0.05);
                                vertexArr.push(new THREE.Vector3(p2.x, p2.y, p2.z));
                            }

                            var trackCurve = new THREE.CatmullRomCurve3(vertexArr);
                            */

                            // &#x4E09;&#x4E2A;&#x70B9;
                            var p1 = getPosition(trackCoordArr[0].lng, trackCoordArr[0].lat, 0),
                                p2 = getPosition(trackCoordArr[tcaHalfLength].lng, trackCoordArr[tcaHalfLength].lat, tcaLength*0.01),
                                p3 = getPosition(trackCoordArr[tcaLength-1].lng, trackCoordArr[tcaLength-1].lat, 0);

                            var trackCurve = new THREE.CatmullRomCurve3([
                                new THREE.Vector3(p1.x, p1.y, p1.z),
                                new THREE.Vector3(p2.x, p2.y, p2.z),
                                new THREE.Vector3(p3.x, p3.y, p3.z)
                            ]);

                            var trackGeometry = new THREE.Geometry(),
                                verticesArr = trackCurve.getPoints(tcaLength);

                            trackGeometry.vertices = verticesArr;

                            var trackLine = new THREE.Line(trackGeometry, trackMaterial);
                            group.add(trackLine);

                            // &#x52A8;&#x753B;&#x70B9;
                            addLightPoint(p1, tcaLength, verticesArr);
                        }
                    }
                }
            });
        }

        // &#x70B9;&#x52A8;&#x753B;
        var pointGeometry = new THREE.SphereGeometry(0.2, 20, 20);
        var pointMaterial = new THREE.MeshBasicMaterial({color: 0x40E0D0});
        function addLightPoint(pos, coordsNum ,verArr) {
            var pointMesh = new THREE.Mesh(pointGeometry, pointMaterial);
            pointMesh.position.set(pos.x, pos.y, pos.z);
            group.add(pointMesh);

            var index = 0;
            function pointAnimate() {
                index++;
                if(index>coordsNum) {
                    index = 0;
                }
                pointMesh.position.set(verArr[index].x, verArr[index].y, verArr[index].z);
                requestAnimationFrame(pointAnimate);
            }
            pointAnimate();

            /*var curveGeometry = new THREE.Geometry();
            var curveData = new THREE.CatmullRomCurve3(verArr.slice(0, 10));
            curveGeometry.vertices = curveData.getPoints(10);

            var curveMaterial = new THREE.LineBasicMaterial({color: 0x40E0D0});
            var curveLine = new THREE.Line(curveGeometry, curveMaterial);
            group.add(curveLine);

            var index = 0;
            function lineAnimate() {
                index++;
                if(index>coordsNum-10) {
                    index = 0;
                }
                var offsetData = verArr.slice(index, 10+index);
                if(offsetData.length > 0) {
                    curveData = new THREE.CatmullRomCurve3(offsetData);
                       curveLine.geometry.vertices = curveData.getPoints(10);
                    curveLine.geometry.verticesNeedUpdate = true;
                }
                requestAnimationFrame(lineAnimate);
            }
            lineAnimate();*/
        }

        // &#x76D1;&#x542C;&#x6570;&#x636E;(&#x6DFB;&#x52A0;&#x5E76;&#x66F4;&#x65B0;)
        socket.on('~', function(res) {
            if($.isEmptyObject(planeMarkers)) {
                $.each(res, function(i, item) {
                    addPlane(item);
                });
            } else {
                $.each(res, function(i, item) {
                    if(planeMarkers[item.anum]) {
                        if(item.lng && item.lat) {
                            var pos = getPosition(item.lng, item.lat, 5);
                            planeMarkers[item.anum].position.set(pos.x, pos.y, pos.z);
                        }
                    } else {
                        addPlane(item);
                    }
                });
            }
        });
    }

    // &#x5730;&#x7403;
    function globe() {
        var globeTextureLoader = new THREE.TextureLoader();
        globeTextureLoader.load('images/textures/earth.jpg', function (texture) {
            var globeGgeometry = new THREE.SphereGeometry(200, 100, 100);
            var globeMaterial = new THREE.MeshStandardMaterial({map: texture});
            var globeMesh = new THREE.Mesh(globeGgeometry, globeMaterial);
            group.add(globeMesh);
            group.rotation.x = THREE.Math.degToRad(35);
            group.rotation.y = THREE.Math.degToRad(170);
        });
    }

    // &#x661F;&#x70B9;
    function stars() {
        var starsGeometry = new THREE.Geometry();
        for (var i = 0; i < 2000; i ++) {
            var starVector = new THREE.Vector3(
                THREE.Math.randFloatSpread(2000),
                THREE.Math.randFloatSpread(2000),
                THREE.Math.randFloatSpread(2000)
            );
            starsGeometry.vertices.push(starVector);
        }
        var starsMaterial = new THREE.PointsMaterial({color: 0x888888})
        var starsPoint = new THREE.Points(starsGeometry, starsMaterial);
        group.add(starsPoint);
    }

    // &#x5149;
    function lights() {
        var hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x333333, 2);
        hemisphereLight.position.x = 0;
        hemisphereLight.position.y = 0;
        hemisphereLight.position.z = -200;
        group.add(hemisphereLight);
    }

    // &#x521D;&#x59CB;&#x5316;
    function init() {
        container = document.getElementById('zh_globe_container');

        scene = new THREE.Scene();
        var bgTexture = new THREE.TextureLoader().load("images/textures/starfield.jpg");
        scene.background = bgTexture;

        camera = new THREE.PerspectiveCamera(50, winWth/winHgt, 1, 2000);
        camera.up.x = 0;
        camera.up.y = 1;
        camera.up.z = 0;
        camera.position.x = 0;
        camera.position.y = 0;
        camera.position.z = 400;
        camera.lookAt(0,0,0);

        group = new THREE.Group();
        scene.add(group);

        // &#x5730;&#x7403;
        globe();

        // &#x98DE;&#x673A;
        plane();

        // &#x661F;&#x70B9;
        stars();

        // &#x534A;&#x7403;&#x5149;
        lights();

        // &#x6E32;&#x67D3;&#x5668;
        renderer = new THREE.WebGLRenderer({antialias: true, preserveDrawingBuffer: true});
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(winWth, winHgt);
        container.appendChild(renderer.domElement);

        // &#x76D8;&#x65CB;&#x63A7;&#x5236;
        var orbitControl = new THREE.OrbitControls(camera, renderer.domElement);
        orbitControl.minDistrance = 20;
        orbitControl.maxDistrance = 50;
        orbitControl.maxPolarAngle = Math.PI/2;

        // &#x6027;&#x80FD;&#x6D4B;&#x8BD5;
        stats = new Stats();
        container.appendChild(stats.dom);

        // resize&#x4E8B;&#x4EF6;
        window.addEventListener('resize', onWindowResize, false);
    }

    // &#x7A97;&#x53E3;&#x5927;&#x5C0F;&#x6539;&#x53D8;
    function onWindowResize() {
        camera.aspect = window.innerWidth/window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    // &#x6E32;&#x67D3;
    function render() {
        group.rotation.y -= 0.0005;
        renderer.render(scene, camera);
    }

    // &#x52A8;&#x753B;
    function animate() {
        requestAnimationFrame(animate);
        render();
        stats.update();
    }

    init();
    animate();
})();</tcahalflength;></dlength;>

场景背景图

Original: https://www.cnblogs.com/timssd/p/13215614.html
Author: xxxxxxxx1x2xxxxxxx
Title: 3D引擎three.js/Babylon.js/physijs.js/clipper.js绘制地球飞机，three.js是JS的WebGL第三方库。