1.项目介绍

JS+HTML实现绕地球飞行的3D飞行线动画效果，且3D地球可以随意拖动和滑动缩放，画面中心是蓝色地球，地球表面上的两点连线之间有光电随机出现沿着抛物线轨迹3D飞行，可使用较好的浏览器打开，如microsoft edge打开，效果如下图所示：

2.html源码如下所示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Threejs 实现环绕地球飞行的3D飞行线</title>

<style>

        html,

        body {

            width: 100%;

            height: 100%;

            margin: 0;

            overflow: hidden;

        }

</style>

</head>

<body>

<div id="container"></div>

<script src="js/three.103.min.js"></script>

<script src="js/OrbitControls.js"></script>

<script id="vertex-shader" type="x-shader/x-vertex">

    varying vec3 vPosition;

    varying vec4 vColor;

    void main() {

        vPosition = position;

        vColor = vec4(color, 1.0);

        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

    }

</script>

<script id="fragment-shader" type="x-shader/x-fragment">

    uniform vec3 targetPos; // 目标位置

    uniform float vLength;  // 距离

    uniform float time;

    varying vec3 vPosition;

    varying vec4 vColor;

    void main() {

        float dist = distance(vPosition, targetPos);

        vec4 color = vec4(vColor);

        float p = dist/vLength * 6.0 + time * 1.0;

        if (p < 3.1415926/2.0){

            p = 0.0;

        }

        if (p > 3.1415926*2.0){

            p = 0.0;

        }

        float a = sin(p);

        color.a = a;

        gl_FragColor = color;

    }

</script>

<script>

var container = document.getElementById('container');

var scene, camera, renderer;

var globeMesh = undefined;

var groupDots, groupLines, groupAnimDots;

var animateDots = []; // 小球运动点轨迹

var controls;

// 配置参数

var params = {

    pointsLength: 20, // 点数

    globeRadius: 100 // 地球半径

}

var vertexShader = document.getElementById('vertex-shader').innerHTML;

var fragmentShader = document.getElementById('fragment-shader').innerHTML;

const PI2 = Math.PI * 2; // 弧度的取值为0-2π

var timer = -PI2;

// 预制件

var Prefab = {

    Sphere: (function() {

        var instance;

        return function(clone = true) {

            if (!instance) {

                instance = new createSphere();

            }

            if (clone) return instance.clone();

            else return instance;

        }

    })()

}

init();

update();

function init() {

    // 场景

    scene = new THREE.Scene();

    groupDots = new THREE.Group();

    groupLines = new THREE.Group();

    groupAnimDots = new THREE.Group();

    scene.add(groupDots, groupLines, groupAnimDots);

    // 相机

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);

    camera.position.x = -200;

    camera.position.y = 200;

    camera.position.z = -200;

    camera.lookAt(scene.position);

    // 渲染器

    renderer = new THREE.WebGLRenderer({

        antialias: true

    });

    renderer.setSize(window.innerWidth, window.innerHeight);

    renderer.setPixelRatio(window.devicePixelRatio);

    container.appendChild(renderer.domElement);

    // 光

    var light = new THREE.HemisphereLight(0xffffff, 0xffffff, 1);

    scene.add(light);

    // 控制器

    controls = new THREE.OrbitControls(camera, renderer.domElement);

    controls.minDistance = 200;

    controls.maxDistance = 400;

    controls.rotateSpeed = 0.5;

    controls.enableDamping = true;

    controls.enablePan = false;

    initGlobe();

    initLines();

    window.addEventListener('resize', onWindowResize, false);

}

function update() {

    requestAnimationFrame(update);

    renderer.render(scene, camera);

    timer += 0.02;

    if (timer > Math.PI * 1.5) {

        timer = -Math.PI * 1.5;

    }

    groupLines.children.forEach(function(item) {

        item.material.uniforms.time.value = timer;

    });

    // console.log(globeMesh.material.map.offset.x)

    controls.update();

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;

    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

}

function initGlobe() {

    // 地球

    var geo = new THREE.SphereGeometry(params.globeRadius, 32, 32);

    var texture = new THREE.TextureLoader().load('img/earth.jpg');

    texture.minFilter = THREE.LinearFilter;

    var material = new THREE.MeshPhongMaterial({

        map: texture,

        // wireframe: true

    });

    globeMesh = new THREE.Mesh(geo, material);

    scene.add(globeMesh);

}

// 地球飞线和点

function initLines() {

    // 球面随机点

    for (let i = 0; i < params.pointsLength; i++) {

        addPoints(groupDots, params.globeRadius);

    }

    // 曲线

    groupDots.children.forEach(function(elem, index) {

        // 从第一个点到其它点

        if (elem != groupDots.children[0]) {

            var line = addLines(groupDots.children[index - 1].position, elem.position);

            animateDots.push(line.curve.getPoints(100));

        }

    });

}

// 3d球面取点

function getEarthPos(radius, a, b) {

    var x = radius * Math.sin(a) * Math.cos(b);

    var y = radius * Math.sin(a) * Math.sin(b);

    var z = radius * Math.cos(a);

    return {

        x, y, z

    };

}

// 添加随机点

function addPoints(group, radius) {

    var mesh = new Prefab.Sphere();

    var pos = getEarthPos(radius, PI2 * Math.random(), PI2 * Math.random());

    mesh.position.set(pos.x, pos.y, pos.z);

    group.add(mesh);

}

function addLines(v0, v3) {

    var angle = v0.angleTo(v3);

    var vtop = v0.clone().add(v3);

    vtop = vtop.normalize().multiplyScalar(params.globeRadius);

    var n;

    if (angle <= 1) {

        n = params.globeRadius / 5 * angle;

    } else if (angle > 1 && angle < 2) {

        n = params.globeRadius / 5 * Math.pow(angle, 2);

    } else {

        n = params.globeRadius / 5 * Math.pow(angle, 1.5);

    }

    var v1 = v0.clone().add(vtop).normalize().multiplyScalar(params.globeRadius + n);

    var v2 = v3.clone().add(vtop).normalize().multiplyScalar(params.globeRadius + n);

    // addLineHelper(globeMesh.position, v1);

    // addLineHelper(globeMesh.position, v2);

    // addLineHelper(globeMesh.position, vtop)

    // 三维三次贝塞尔曲线（v0起点，v1第一个控制点，v2第二个控制点，v3终点）

    var curve = new THREE.CubicBezierCurve3(v0, v1, v2, v3);

    var points = curve.getPoints(50);

    var vertices = [],

        colors = [];

    points.forEach(function(item, index) {

        vertices.push(item.x, item.y, item.z);

        colors.push(index / points.length, index / points.length, index / points.length);

    });

    var geometry = new THREE.BufferGeometry();

    geometry.attributes.position = new THREE.Float32BufferAttribute(vertices, 3)

    var material = createLineMaterial(v0, v3);

    var lineMesh = new THREE.Line(geometry, material);

    groupLines.add(lineMesh);

    return {

        curve: curve,

        lineMesh: lineMesh

    };

}

function createLineMaterial(myPos, targetPos) {

    var uniforms = {

        targetPos: {

            value: targetPos

        },

        vLength: {

            value: myPos.distanceTo(targetPos)

        },

        time: {

            value: timer

        }

    };

    var material = new THREE.ShaderMaterial({

        uniforms: uniforms,

        vertexShader: vertexShader,

        fragmentShader: fragmentShader,

        transparent: true,

        vertexColors: THREE.VertexColors

    });

    return material;

}

function createSphere() {

    var geometry = new THREE.SphereBufferGeometry(1);

    var material = new THREE.MeshBasicMaterial({

        color: 0x00ffff

    });

    var mesh = new THREE.Mesh(geometry, material);

    return mesh;

}

function addPointHelper(pos) {

    var mesh = new Prefab.Sphere();

    mesh.material = new THREE.MeshBasicMaterial({

        color: 0xff0000

    });

    mesh.position.copy(pos);

    scene.add(mesh);

}

function addLineHelper(pos1, pos2) {

    var material = new THREE.LineBasicMaterial({

        color: 0x0000ff

    });

    var geometry = new THREE.Geometry();

    geometry.vertices.push(pos1, pos2);

    var line = new THREE.Line(geometry, material);

    scene.add(line);

}

</script>

</body>

</html>

3.JS部分代码由于代码量较大这里就不黏贴了

4.文件目录如下

5.浏览器要支持HTML5与CSS3才有效果。

 整个项目源码下载地址：https://download.csdn.net/download/xipengbozai/16595841

JS实现环绕地球飞行的3D飞行线动画效果(JS+HTML)的更多相关文章

  1. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  2. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  3. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  4. WOW.js——在页面滚动时展现动感的元素动画效果

    插件描述:WOW.js 是一款可以实现滚动页面时触发CSS 动画效果的插件,动态效果可以使网站显示更有动感. 当页面在向下滚动的时候,使用WOW.js可以让页面元素产生细小的动画效果,从而引起浏览者注 ...

  5. WPF实现3D翻转的动画效果

    1.前端代码实现 1.1 原理见代码注析 <Grid MouseDown="Grid_MouseDown"> <Viewport3D> <Viewpo ...

  6. loading加载动画效果js实现

    <style>.box { width: 400px; padding: 20px; border: 40px solid #a0b3d6; background-color: #eee; ...

  7. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  8. 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  9. 滚动页面产生动画WOW.js的用法

    简介 在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件.WOW.js 依赖 animate.css,所以它支持 an ...

随机推荐

  1. Win/Mac 键位映射 & 在 Mac 上更改“键盘”偏好设置

    Win/Mac 键位映射 & 在 Mac 上更改"键盘"偏好设置 PC键盘 在Mac下Command/Option键切换 https://support.apple.com ...

  2. ES6 & Classes & Interface

    ES6 & Classes & Interface what's the difference between javascript Classes & Interface ? ...

  3. React Native 三端同构

    React Native 三端同构 https://www.ibm.com/developerworks/cn/web/wa-universal-react-native/index.html rea ...

  4. js & bitwise operator

    js & bitwise operator bitwise operator https://github.com/Advanced-Frontend/Daily-Interview-Ques ...

  5. 与程序员相关的CPU缓存知识

    本文转载自与程序员相关的CPU缓存知识 基础知识 首先,我们都知道现在的CPU多核技术,都会有几级缓存,老的CPU会有两级内存(L1和L2),新的CPU会有三级内存(L1,L2,L3 ),如下图所示: ...

  6. MapReduce原理及简单实现

    MapReduce是Google在2004年发表的论文<MapReduce: Simplified Data Processing on Large Clusters>中提出的一个用于分布 ...

  7. JS遍历对象的属性和值

    对于需要动态获取对象的某些属性和对应的值的时候,就需要遍历对象的属性和值. const user = { name: '张三', age: 20, addr: '湖北武汉', sex: '男' } / ...

  8. linux 查询登陆成功、失败的用户

    查询登陆成功的用户: last 单独执行last指令时,它会读取位于/var/log/wtmp的文件,并把该给文件的内容记录的登录系统的用户名单全部显示出来. 如果使用tail.cat命令查看这文件, ...

  9. 2020年12月-第02阶段-前端基础-CSS Day07

    CSS Day07 CSS高级技巧 理解 能说出元素显示隐藏最常见的写法 能说出精灵图产生的目的 能说出去除图片底侧空白缝隙的方法 应用 能写出最常见的鼠标样式 能使用精灵图技术 能用滑动门做导航栏案 ...

  10. CVE-2018-2628-WLS Core Components 反序列化

    漏洞参考 https://blog.csdn.net/csacs/article/details/87122472 漏洞概述:在 WebLogic 里,攻击者利用其他rmi绕过weblogic黑名单限 ...