threejs 绘制地球、飞机、轨迹

最新推荐文章于 2024-10-09 18:48:41 发布

编程世界-云

最新推荐文章于 2024-10-09 18:48:41 发布

阅读量1.4k

点赞数 1

文章标签：前端 Web前端 html css threejs

本文链接：https://blog.csdn.net/weixin_45761317/article/details/103103512

版权

本文展示了如何使用Threejs库在Web前端创建一个动态效果，包括地球的绘制、添加球面光源、星空点、飞机以及飞机的飞行轨迹。通过将经纬度转换为xyz坐标，实现在地球表面绘制飞机和轨迹。文章还提到了光点动画和线动画的实现方式，并给出了HTML和JS代码片段。

摘要由CSDN通过智能技术生成

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

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

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

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

HTML部分：

web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全球航班</title>

    <style>
        html{overflow: hidden;}
        body { margin: 0;}
    </style>

    <script src="js/jquery.min.js"></script>
</head>
<body>
    <!-- 地国 -->
    <div id="zh_globe_container"></div> <!-- 容器 -->

    <script src="js/threejs/Detector.js"></script> <!-- webGL浏览器支持检测 -->
    <script src="js/threejs/three.min.js"></script> <!-- 核心js -->
    <script src="js/threejs/stats.min.js"></script> <!-- 性能测试 -->
    <script src="js/threejs/OrbitControls.js"></script> <!-- 地球控制 -->
    <script src="js/socketio-1.4.5.js"></script> <!-- socket -->

    <script src="js/globe.js"></script> <!--  -->
</body>
</html>

JS部分(globe.js)

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

// 地球
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);
    });
}

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

// 光
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);
}

3、添加星点

// 星点
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);
}

4、添加飞机

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

// 获取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};
}

画飞机

web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）
// 飞机形状(不想画的，可以下载个 飞机模型 使用加载器加载进来)
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});

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

添加飞机

// 添加飞机
function addPlane(item) {
    if(item.anum && item.lng && item.lat) {
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        // 旋转
        plane.r

最低0.47元/天解锁文章