three.js中直线的创建，以及new THREE.LineBasicMaterial不能设置宽度问题。

最新推荐文章于 2025-03-05 09:51:21 发布

醉里挑灯寻梦回

最新推荐文章于 2025-03-05 09:51:21 发布

阅读量1.5k

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/liuxiaocaie/article/details/126096669

版权

直线的创建导入相关包

import * as THREE from 'three'
import OrbitControls from 'three-orbitcontrols'
import { Line2 } from 'three/examples/jsm/lines/Line2'
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'

1、用LineBasicMaterial创建的线条发现无法设置宽度，官方给的答案就是始终1

      this.EarthLine("#00d321"); //创建地球中心直线

EarthLine(color) {
     const lineArr = [
        new THREE.Vector3(0, 70, 0),
        new THREE.Vector3(0, -70, 0),
      ];
      const material = new THREE.LineBasicMaterial({
        color: color,
        linewidth: 100,
      });
      const linegeometry = new THREE.BufferGeometry().setFromPoints(lineArr);
      const line = new THREE.Line(linegeometry, material);
      this.scene.add(line);
}

2、此方法可以设置宽度

EarthLine(color) {
      var geometry = new LineGeometry();
      var pointArr = [0, 80, 0, 0, -80, 0];
      geometry.setPositions(pointArr);
      var material = new LineMaterial({
        color: color,
        linewidth: 3,
      });
      material.resolution.set(window.innerWidth, window.innerHeight);
      var line = new Line2(geometry, material);
      line.computeLineDistances();
      this.scene.add(line);
}