Three.js之繪製物體的邊框及修改lineWidth

webhmy發表於2022-01-18
JS

本博文主要記錄如何使用three.js繪製物體的邊框及修改其lineWidth。three.js是個技術點比較多，查詢資料又比較少的框架，單單就這個修改lineWidth就是一個坑。先放一個動態的效果圖，需要的小夥伴可以看下相關實現。

開始的時候，我是使用LineSegments來實現的，線的材質使用LineBasicMaterial，但是發現無論linewidth設定多少，呈現出來的都是1

因此修改實現方式，這裡直接可看懂的程式碼：

// 引入新的線的材質類
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js';
import { Line2 } from 'three/examples/jsm/lines/Line2.js';

// 設定邊框
const edgesGeometry = new LineGeometry();
const pointArr = this.getLinePoint(points);
const lineMaterial = new LineMaterial({
  color: 0xdd2222,
  linewidth: 2, // 這裡表示線的寬度
  transparent: true
});
  edgesGeometry.setPositions(pointArr);
  lineMaterial.resolution.set(window.innerWidth, window.innerHeight);

這裡的重點在於pointArr的值，其實就是線的連線的頂點座標，我這裡的demo是個立方體，因此是按立方體的8個點，把立方體的12條線連線其來：

// 獲取邊框的點連線資料
  getLinePoint(points): Array<any> {
    // 立方體的8個頂點座標
    let [p0, p1, p2, p3, p4, p5, p6, p7] = points;

    //順著點 保證12條線都連上即可
    let pointLine = [
      p0, p1, p2, p3, p0,
      p4, p5, p6, p7, p4,
      p4, p7, p3, p2, p6, p5, p1
    ];
    let arr = [];
    pointLine.forEach(item => {
      arr.push(item.x)
      arr.push(item.y)
      arr.push(item.z)
    })
    return arr;
  }

我覺得學習3d的這個框架只能邊查閱資料，邊嘗試，這個也是我們第一次學著用，把使用過程中遇到的坑記錄下來，便於查閱。

相關文章