Three.js實(shí)現(xiàn)拋物線動(dòng)態(tài)流向效果

老規(guī)矩，首先來(lái)看下最終實(shí)現(xiàn)的效果。

拋物線流向動(dòng)態(tài)效果圖.gif

創(chuàng)建三維場(chǎng)景

首先我們要?jiǎng)?chuàng)建一個(gè)三維場(chǎng)景，創(chuàng)建場(chǎng)景非常簡(jiǎn)單，僅僅一句代碼就能實(shí)現(xiàn)。

const scene = new THREE.Scene();

創(chuàng)建了場(chǎng)景后，我們還不能顯示任何東西，因?yàn)檫€需要用到渲染器和相機(jī)。

// 創(chuàng)建相機(jī)
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 50; // 設(shè)置相機(jī)位置

three.js中相機(jī)有很多種，這里用到的是PerspectiveCamera相機(jī)。該類型是透視相機(jī)，可以用來(lái)模擬人眼所看到的景象，所以大多數(shù)三維場(chǎng)景渲染中都是使用的該相機(jī)。點(diǎn)擊查看文檔詳情。

// 創(chuàng)建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

創(chuàng)建渲染器后，設(shè)置輸出畫(huà)布大小。具體屬性和方法可點(diǎn)擊查看文檔。

然后需要添加一個(gè)方法，每隔一段時(shí)間調(diào)用該方法去渲染場(chǎng)景。

function animate() {
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
// 必須調(diào)用一次
animate();

該方法中會(huì)用到一個(gè)全局方法requestAnimationFrame，不熟悉的請(qǐng)點(diǎn)擊查看文檔。

// 添加坐標(biāo)軸輔助工具
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

為了能夠更直觀的感受三維空間感，我們還可以在場(chǎng)景中添加一個(gè)坐標(biāo)軸輔助工具。紅、綠、藍(lán)分別表示x軸、y軸、z軸。如下圖所示。

坐標(biāo)軸輔助工具.png

到現(xiàn)在為止，可以看到場(chǎng)景中的坐標(biāo)軸了，但是我們通過(guò)拖動(dòng)鼠標(biāo)發(fā)現(xiàn)并不能移動(dòng)和旋轉(zhuǎn)場(chǎng)景，那是因?yàn)槲覀冞€沒(méi)有添加控制器。控制器模塊需要單獨(dú)引入，可以在three.js代碼倉(cāng)庫(kù)中找到相關(guān)代碼。

// 創(chuàng)建控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 啟用阻尼（慣性），這將給控制器帶來(lái)重量感，如果該值被啟用，必須在動(dòng)畫(huà)循環(huán)里調(diào)用.update()
controls.dampingFactor = 0.05; // 阻尼慣性大小

注意： 當(dāng)controls.enableDamping為true時(shí)，必須在動(dòng)畫(huà)循環(huán)里調(diào)用controls.update()方法。

function animate() {
  // controls.enableDamping設(shè)為true時(shí)（啟用阻尼），必須在動(dòng)畫(huà)循環(huán)里調(diào)用.update()
  controls.update();

  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

生成拋物線

生成一條拋物線需要用到three.js中的QuadraticBezierCurve3類。該類可以根據(jù)三個(gè)點(diǎn)坐標(biāo)（起點(diǎn)、終點(diǎn)和一個(gè)控制點(diǎn)）創(chuàng)建一條平滑的三維二次貝塞爾曲線。點(diǎn)擊查看文檔。

const point1 = [50, 0, 0]; // 點(diǎn)1坐標(biāo)
const point2 = [-50, 0, 0]; // 點(diǎn)2坐標(biāo)
const controlPoint = [0, 50, 0]; // 控制點(diǎn)坐標(biāo)

// 創(chuàng)建三維二次貝塞爾曲線
const curve = new THREE.QuadraticBezierCurve3(
  new THREE.Vector3(point1[0], point1[1], point1[2]),
  new THREE.Vector3(controlPoint[0], controlPoint[1], controlPoint[2]),
  new THREE.Vector3(point2[0], point2[1], point2[2])
);

得到拋物線后，我們不能直接就用這個(gè)生成的曲線，因?yàn)槲覀冞€要實(shí)現(xiàn)流動(dòng)的效果，該效果實(shí)現(xiàn)的原理是把曲線分割成很多條小線段，其中一條線段的顏色為高亮色，其余的線段顏色為暗色，每隔一定的時(shí)間就將高亮線段的前一線段顏色改為高亮色，原高亮線段改為暗色，這樣通過(guò)設(shè)置合理的間隔時(shí)間，高亮線段的變化就連貫起來(lái)了，看起來(lái)就是流動(dòng)的效果。

QuadraticBezierCurve3類繼承于Curve類，上面有個(gè)getPoints()方法，該方法接收一個(gè)number類型的參數(shù)，作用是將曲線分割成指定的數(shù)量，并返回一個(gè)包含全部分割點(diǎn)的數(shù)組，數(shù)組長(zhǎng)度為傳入的參數(shù)大小加1。比如傳入的參數(shù)是10，意思是將曲線分割成10段，那么返回的分割點(diǎn)數(shù)量就為11（1個(gè)起點(diǎn)、中間的9個(gè)分割點(diǎn)、1個(gè)終點(diǎn)）。具體可點(diǎn)擊查看Curve類的文檔詳情。

const divisions = 30; // 曲線的分段數(shù)量
const points = curve.getPoints(divisions); // 返回 分段數(shù)量 + 1 個(gè)點(diǎn)，例如這里的points.length就為31

現(xiàn)在我們得到了31個(gè)點(diǎn)坐標(biāo)，用這些點(diǎn)作為頂點(diǎn)創(chuàng)建Geometry。

// 創(chuàng)建Geometry
const geometry = new THREE.Geometry();
geometry.vertices = points; // 將上一步得到的點(diǎn)列表賦值給geometry的vertices屬性

創(chuàng)建了geometry我們還要給它賦值一個(gè)頂點(diǎn)顏色數(shù)組，因?yàn)閹缀误w的材質(zhì)需要設(shè)置成頂點(diǎn)著色，后面要實(shí)現(xiàn)改變線段顏色的需求時(shí)，我們就只用改變頂點(diǎn)顏色數(shù)組就行。

// 設(shè)置頂點(diǎn) colors 數(shù)組，與頂點(diǎn)數(shù)量和順序保持一致。
geometry.colors = new Array(points.length).fill(
  new THREE.Color('#333300')
);

注意： colors的數(shù)量和順序是和vertices一一對(duì)應(yīng)的。colors中的第一個(gè)就是對(duì)應(yīng)vertices中第一個(gè)頂點(diǎn)的顏色。
有了幾何體，我們還需要材質(zhì)才能創(chuàng)建網(wǎng)格。需要注意的是，我們需要將材質(zhì)設(shè)置為頂點(diǎn)著色。

// 生成材質(zhì)
const material = new THREE.LineBasicMaterial({
  vertexColors: THREE.VertexColors, // 頂點(diǎn)著色
  transparent: true, // 定義此材質(zhì)是否透明
  side: THREE.DoubleSide,
});
const mesh = new THREE.Line(geometry, material);

到現(xiàn)在我們就已經(jīng)創(chuàng)建好了拋物線，一定不要忘了將它添加進(jìn)場(chǎng)景中去，這樣才能渲染出來(lái)！

scene.add(mesh);

實(shí)現(xiàn)動(dòng)態(tài)流向效果

上面提到過(guò)，我們要實(shí)現(xiàn)動(dòng)態(tài)的流向效果，只需要每隔一段時(shí)間更新頂點(diǎn)顏色數(shù)組就可以了。所以我們需要在animate方法中添加更新頂點(diǎn)顏色的代碼。

let colorIndex = 0; // 高亮顏色流動(dòng)的索引值
let timestamp = 0; // 時(shí)間戳

function animate() {
  controls.update();
  // 時(shí)間間隔
  let now = new Date().getTime();
  if (now - timestamp > 30) {
    geometry.colors = new Array(divisions + 1)
      .fill(new THREE.Color('#333300'))
      .map((color, index) => {
        if (index === colorIndex) {
          return new THREE.Color('#ffff00');
        }
        return color;
      });
    // 如果geometry.colors數(shù)據(jù)發(fā)生變化，colorsNeedUpdate值需要被設(shè)置為true
    geometry.colorsNeedUpdate = true;
    timestamp = now;
    colorIndex++;
    if (colorIndex > divisions) {
      colorIndex = 0;
    }
  }
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

注意： 改變了頂點(diǎn)顏色數(shù)組后一定要將geometry.colorsNeedUpdate屬性設(shè)置為true，這樣three.js才知道頂點(diǎn)顏色數(shù)組發(fā)生了變化，非常重要！！！

現(xiàn)在，我們就完成了所有代碼，實(shí)現(xiàn)了拋物線動(dòng)態(tài)流向效果。

拋物線流向動(dòng)態(tài)效果圖.gif

點(diǎn)擊查看在線示例。
點(diǎn)擊查看完整示例代碼。

如果該文章對(duì)您有所幫助，請(qǐng)您一定不要吝嗇您的鼓勵(lì)。點(diǎn)贊、評(píng)論、分享、收藏、打賞都是您對(duì)我的鼓勵(lì)和支持。
如果您有GitHub賬號(hào)，還可以關(guān)注我~
最后，感謝大家的閱讀，如有錯(cuò)誤，還請(qǐng)各位批評(píng)指正。