打造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)}