threejs 绘制地球、飞机、轨迹

最新推荐文章于 2024-03-14 09:43:10 发布

VIP文章编程世界-云

最新推荐文章于 2024-03-14 09:43:10 发布

阅读量1.6k

点赞数 1

文章标签：前端 web前端前端开发 threejs webgl

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

版权

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

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

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

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

HTML部分：

<!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>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

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};
}

画飞机

// 飞机形状(不想画的，可以下载个 飞机模型 使用加载器加载进来)
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});
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

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

添加飞机

// 添加飞机
f

最低0.47元/天解锁文章

编程世界-云

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
threejs 绘制地球、飞机、轨迹

首先我们来看下要实现的效果这个缩小后的图片，下面我们来看下近距离的动态效果。。效果比较简陋，需要后期再处理。。。下面进入主题，代码篇。。HTML部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全球航班</t...
复制链接

扫一扫