打造Github首页的动态飞线效果

本文主要是介绍打造Github首页的动态飞线效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、导语

Github首页的地球动态飞线，大家都比较熟悉吧

二、分析

由大量随机的3点构造出贝塞尔曲线，然后开始从起点到终点的飞行后，然后再从起点到终点的消失，就此完成整个过程

三、基础代码

createCurve(startPoint, endPoint) {// 创建一个贝塞尔曲线startPoint = new THREE.Vector3(startPoint.x, 4, startPoint.z)const endPoints = new THREE.Vector3(endPoint.x, 4, endPoint.z)const center = new THREE.Vector3()center.lerpVectors(startPoint, endPoints, 0.5)console.log('center: ', center)center.y += 3.0const curve = new THREE.QuadraticBezierCurve3(startPoint, center, endPoints)// 获取数组点this.points = curve.getPoints(100)this.curveGeometry = new LineGeometry()// 设置起始点this.curveGeometry.setPositions([startPoint.x, startPoint.y, this.startPoint.z])this.lineMaterial = new LineMaterial({color: new THREE.Color('#993399'),linewidth: 2,dashed: false})this.lineMaterial.resolution.set(window.innerWidth, window.innerHeight)this.curveObject = new Line2(this.curveGeometry, this.lineMaterial)this.scene.add(this.curveObject)}

四、动态效果

具体动态效果实现可以关注课程ThreejsWeb3D开发之可视化大数据地图，更多特效尽在里面，限时折扣哦

这篇关于打造Github首页的动态飞线效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---