脚本宝典收集整理的这篇文章主要介绍了Three.js之绘制物体的边框及修改lineWidth，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本博文主要记录如何使用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的这个框架只能边查阅资料，边尝试，这个也是我们第一次学着用，把使用过程中遇到的坑记录下来，便于查阅。

脚本宝典总结

以上是脚本宝典为你收集整理的Three.js之绘制物体的边框及修改lineWidth全部内容，希望文章能够帮你解决Three.js之绘制物体的边框及修改lineWidth所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。