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)指正。