Threejs實現(xiàn)滴滴官網(wǎng)首頁地球動畫功能
偶然翻滴滴官網(wǎng)看到首頁下翻第六欄（大概）有個絢麗的地球的三維動畫，試著用there.js實現(xiàn)了下，基本實現(xiàn)了動畫效果，不過還是有些問題；這個動畫看似簡單，但也用到好的繪制方法和計算，這里先寫一下主要功能的實現(xiàn)；
先看示例：http://39.106.166.212:8080/webgl/t4（由于是寫dome的一個項目，內(nèi)容較多沒做優(yōu)化，第一次加載會會比較慢，需多等待幾秒）
（lice這個截圖工具也是很不好用，每次都截到一半 ╮(╯﹏╰)╭）
一、 3d繪制場景的構(gòu)建
繪制一個3d程序首先需要添加 渲染器，場景，照相機 這些元素，這里補充一個燈光；
1、渲染器
首先創(chuàng)建一個渲染器，參數(shù)為頁面中的canvas元素，
渲染器的作用就是把3d場景的內(nèi)容結(jié)合照相機渲染到頁面中，
最后將畫布背景設(shè)為白色。
const renderer = new Three.WebGLRenderer({canvas: this.$refs.thr});
renderer.setClearColor(0x000000);
2、場景
場景顧名思義，就是添加一個你發(fā)揮(繪制)的場地，后面所有繪制的元素都要添加到場景中；
cosnt scene = new Three.Scene();
3、照相機
照相機就像人的視覺或說從什么角度去看場景，看場景的位置和視線的方向決定了渲染到頁面的內(nèi)容。故一般需要設(shè)置兩個參數(shù)相機位置position、視線方向lookAt，，在webgl其實是需要三組參數(shù)視點，觀察點，和上方向。thresjs中好像是默認Y軸為上方向了，這里使用透視相機。
const camera = new THREE.PerspectiveCamera(45, 500 / 500, 1, 1500); camera.position.set(100, 100, 1000); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(this.camera);
4、燈光
這里使用THREE.HemisphereLight光，可以更加貼近自然的戶外光照效；
let light = new THREE.HemisphereLight(0xffffff); light.position.set(0, 0, 200); scene.add(light)
以上我們基本的繪制要素已添加完成，下面開始繪制各個幾何體內(nèi)容；
幾何體的繪制有三部：創(chuàng)建幾何體，創(chuàng)建材料，添加網(wǎng)格模型；
二、地球的繪制
threejs中提供了球體的繪制，我們只需創(chuàng)建一個球體，材料使用紋理貼圖方式添加地圖；
貼圖圖片資源是我從官網(wǎng)上找的
const geometry = new THREE.SphereGeometry(this.radius, 100, 100); // 球體
const textureLoader = new THREE.TextureLoader(); // 創(chuàng)建紋理貼圖
const texture = textureLoader.load(require("@/assets/map.jpg"),texture => {
let material = new THREE.MeshLambertMaterial({map: texture,transparent: true,});
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
由于圖片加載是異步的 ，這里需等圖片加載完成后才能創(chuàng)建材質(zhì)；
這里我們就創(chuàng)建好了一個地球模型，接著還要讓其轉(zhuǎn)動起來；（中間為xyz坐標(biāo)軸）
threejs提供了幾何體的基本3d變換,直接使用rotateY(angleChange)根據(jù)時間設(shè)置其繞y軸（綠色軸）旋轉(zhuǎn)角度即可；
三、球面坐標(biāo)點的繪制
1、在繪制球面位置點時，需先前先看下球坐標(biāo)系，確定點的位置，webgl中坐標(biāo)方向與下圖不一致，但是對點的表示方法是一致的；
球面上任意點可以用r,θ,φ表示，也可通過以下公式轉(zhuǎn)化到直角坐標(biāo)系中
x=rsinθcosφ.
y=rsinθsinφ.
z=rcosθ
但實際中地球位置我們一般也會使用經(jīng)緯度表示。。。 下面寫個經(jīng)緯度轉(zhuǎn)坐標(biāo)的方法。
threejs提供了THREE.Math.degToRad方法可以將經(jīng)緯度轉(zhuǎn)化為θ,φ,轉(zhuǎn)化方法如下，這里為了方便后面使用，我直接返回一個3維向量；
getPosition(longitude, latitude, radius = this.radius) { // 經(jīng)度，緯度轉(zhuǎn)換為坐標(biāo)
let lg = THREE.Math.degToRad(longitude);
let lt = THREE.Math.degToRad(latitude); // 獲取x，y，z坐標(biāo)
let temp = radius * Math.cos(lt);
let x = temp * Math.sin(lg);
let y = radius * Math.sin(lt);
let z = temp * Math.cos(lg);
return new THREE.Vector3(x, y, z);
}
2、知道了位置的表示方法后開始繪制表示位置的點
根據(jù)示例位置點的由點和一個圓環(huán)組成，我們先繪制一個二維平面內(nèi)的點和圓弧，在通過設(shè)置其位置和旋轉(zhuǎn)方式移動到目標(biāo)坐標(biāo)位置點；
（這里也可以繪制幾何小球體來模擬）
（1）點的繪制
THREE.Shape是用來繪制二維平面內(nèi)的形狀的，設(shè)置其形狀為圓弧，即可實現(xiàn)一個原點；
let shapePoint = new THREE.Shape();
shapePoint.absarc(0, 0, r - 4, 0, 2 * Math.PI, false);
let arcGeometry = new THREE.ShapeGeometry(shapePoint);
let arcMaterial = new THREE.MeshBasicMaterial({ color: 0x008080 });
let point = new THREE.Mesh(arcGeometry, arcMaterial);
（2）圓弧的繪制
let geometryLine = new THREE.Geometry();
let arc = new THREE.ArcCurve(0, 0, r, 0, 2 * Math.PI);
let points = arc.getPoints(40);
geometryLine.setFromPoints(points);
let LineMateri = new THREE.LineBasicMaterial({ color: 0x20b2aa });
let line = new THREE.Line(geometryLine, LineMateri);
（3）位置的設(shè)置
position.set(pos.x, pos.y, pos.z);
（4）二維圖形旋轉(zhuǎn)至球面
THREE.Spherical()方法 ，可將坐標(biāo)點轉(zhuǎn)化為坐標(biāo)點轉(zhuǎn)化回球坐標(biāo)系的偏移角度；
let spherical = new THREE.Spherical(); spherical.setFromCartesianCoords(pos.x, pos.y, pos.z);
設(shè)置位置點旋轉(zhuǎn)
Point.rotateX(spherical.phi - Math.PI / 2); Point.rotateY(spherical.theta);
這里為什么要 - Math.PI / 2 是因為開始我們繪制時，平面是垂直于y軸的平面，參考下面這幅圖；
四、接著繪制鏈接球面兩點間的連線
連接兩點的曲線需在球面上方，
兩點間可以坐出無數(shù)條曲線，那么如何確定曲線，我們需自己再選擇合適的參數(shù)來確定；
首先想的是二階貝塞爾曲線，取兩點的中點為控制點，但如果鏈接兩點剛好位于球面的兩個對稱端點（兩點間連線為直徑）時，控制點需在無窮遠處；
故考慮使用三階貝塞爾曲線，連接球面兩點和球心，三點確定的一個平面如下圖，
鏈接v1 v1,取中點c,鏈接oc，做一條射線，在射線取一點p,鏈接v1p,v2p,在v1,v2上取兩點作為控制點；
求兩點的中點
getVCenter(v1, v2) {
let v = v1.add(v2);
return v.divideScalar(2);
}
獲取兩點間指定比例位置坐標(biāo)
getLenVcetor(v1, v2, len) {
let v1v2Len = v1.distanceTo(v2);
return v1.lerp(v2, len / v1v2Len);
}
獲取貝塞爾控制點
getBezierPoint(v0, v3) {
let angle = (v0.angleTo(v3) * 180) / Math.PI; // 0 ~ Math.PI // 計算向量夾角
let aLen = angle * 2.5,
hLen = angle * angle * 50;
let p0 = new THREE.Vector3(0, 0, 0); // 法線向量
let rayLine = new THREE.Ray(p0, this.getVCenter(v0.clone(), v3.clone())); // 頂點坐標(biāo)
let vtop = rayLine.at(hLen / rayLine.at(1).distanceTo(p0), vtop); // 位置
// 控制點坐標(biāo)
let v1 = this.getLenVcetor(v0.clone(), vtop, aLen);
let v2 = this.getLenVcetor(v3.clone(), vtop, aLen);
return {
v1: v1,
v2: v2
};
},
繪制三次貝塞爾曲線
drawLine(longitude, latitude, longitude2, latitude2) {
let geometry = new THREE.Geometry(); //聲明一個幾何體對象Geometry
let v0 = this.getPosition(longitude, latitude, this.radius);
let v3 = this.getPosition(longitude2, latitude2, this.radius);
let { v1, v2 } = this.getBezierPoint(v0, v3); // 三維二次貝賽爾曲線
let curve = new THREE.CubicBezierCurve3(v0, v1, v2, v3);
let curvePoints = curve.getPoints(100);
geometry.setFromPoints(curvePoints);
let material = new THREE.LineBasicMaterial({
color: 0xff7e41
});
let line = new THREE.Line(geometry, material);
this.group.add(line);
this.sport(curvePoints);
},
五、小球的運動軌跡
小球的動畫我們使用three的幀動畫，路徑可以直接使用上一步中的曲線；
1、繪制小球
drawSportPoint(position, name) {
let box = new THREE.SphereGeometry(6, 6, 6);
let material = new THREE.MeshLambertMaterial({
color: 0x00bfff
}); //材質(zhì)對象
let mesh = new THREE.Mesh(box, material);
mesh.name = name;
mesh.position.set(position.x, position.y, position.z);
this.groupBall.add(mesh);
this.group.add(this.groupBall);
return mesh;
}
2、讓小球動起來
sport(curvePoints, index) {
const Ball = this.drawSportPoint(curvePoints[0]);
let arr = Array.from(Array(101), (v, k) => k); // 生成一個時間序列
let times = new Float32Array(arr);
let posArr = [];
curvePoints.forEach(elem => {
posArr.push(elem.x, elem.y, elem.z);
}); // 創(chuàng)建一個和時間序列相對應(yīng)的位置坐標(biāo)系列
let values = new Float32Array(posArr); // 創(chuàng)建一個幀動畫的關(guān)鍵幀數(shù)據(jù)，曲線上的位置序列對應(yīng)一個時間序列
let posTrack = new THREE.KeyframeTrack("Ball.position", times, values);
let duration = 101;
let clip = new THREE.AnimationClip("default", duration, [posTrack]);
this.mixer = new THREE.AnimationMixer(Ball);
let AnimationAction = this.mixer.clipAction(clip);
AnimationAction.timeScale = 20;
AnimationAction.play();
}
3、在requestAnimationFrame中添加觸發(fā)動畫
this.mixer.update(this.clock.getDelta());
到此這篇關(guān)于Threejs實現(xiàn)滴滴官網(wǎng)首頁地球動畫的文章就介紹到這了,更多相關(guān)Threejs滴滴官網(wǎng)首頁地球動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript數(shù)組組合成字符串的腳本...2007-11-11
drag-and-drop實現(xiàn)圖片瀏覽器預(yù)覽
chrome的drag and drop API，它能將本地的圖片放到瀏覽器中進行預(yù)覽，猜想一下當(dāng)我們把圖片拖拽到瀏覽器里會發(fā)生什么事情，你的瀏覽器試圖打開一個新的頁面并加載這個圖片。這篇文章給我們介紹drag-and-drop實現(xiàn)圖片瀏覽器預(yù)覽，需要的朋友可以參考下2015-08-08
JS實現(xiàn)鼠標(biāo)點擊展開或隱藏表格行的方法
這篇文章主要介紹了JS實現(xiàn)鼠標(biāo)點擊展開或隱藏表格行的方法,實例分析了javascript操作table表格與css樣式的技巧,需要的朋友可以參考下2015-03-03
javascript實現(xiàn)數(shù)字+字母驗證碼的簡單實例
本篇文章只要是對javascript實現(xiàn)數(shù)字+字母驗證碼的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
在使用echarts繪制圖表時,有的時候需要使用漸變色,下面這篇文章主要給大家介紹了關(guān)于echarts中幾種漸變方式的具體實現(xiàn)方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
純JavaScript實現(xiàn)的兼容各瀏覽器的添加和移除事件封裝
這篇文章主要介紹了純JavaScript實現(xiàn)的兼容各瀏覽器的添加和移除事件封裝,本文直接給出實現(xiàn)代碼,代碼中帶詳細注釋,需要的朋友可以參考下2015-03-03
使用postMesssage()實現(xiàn)跨域iframe頁面間的信息傳遞方法
下面小編就為大家?guī)硪黄褂胮ostMesssage()實現(xiàn)跨域iframe頁面間的信息傳遞方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家一個參考。一起跟隨小編過來看看吧2016-03-03
這篇文章主要介紹了js神秘的電報密碼 哈弗曼編碼,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了javascript實現(xiàn)繼承的簡單實例的相關(guān)資料,需要的朋友可以參考下2015-07-07
DOM就是Html頁面的模型，將每個標(biāo)簽都做為一個對象，JavaScript通過調(diào)用DOM中的屬性、方法就可以對網(wǎng)頁中的文本框、層等元素進行編程控制。比如通過操作文本框的DOM對象，就可以讀取文本框中的值、設(shè)置文本框中的值。2015-07-07