Three.js中如何访问material.resolution？绘制粗线条遇阻求助

你的问题核心是材质类型不匹配：Line2（宽线组件）需要搭配专门的LineMaterial，而你使用的LineBasicMaterial是给原生Line对象设计的，自然没有resolution属性。以下是两种可行解决思路：

方案一：使用正确的宽线材质（推荐） #

1. 先确保导入LineMaterial（它属于Three.js的示例扩展组件，需单独引入）：

import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';

2. 替换材质为LineMaterial并初始化必要参数：

const lineGeometry = new LineGeometry().setPositions(positions);
// 必须调用此方法，否则宽线显示会异常
lineGeometry.computeLineDistances();

const lineMaterial = new LineMaterial({
  color: 0xff0000,
  linewidth: 8,
  // 先初始化resolution，后续再按需更新
  resolution: new THREE.Vector2(window.innerWidth, window.innerHeight)
});

const line = new Line2(lineGeometry, lineMaterial);

3. 此时就能正常执行教程里的resolution更新代码：

trackRef.current.material.resolution.copy(overlayRef.current.getViewportSize())

方案二：用Mesh模拟宽线条（无需依赖扩展组件） #

如果不想引入LineMaterial这类扩展组件，可以用TubeGeometry结合基础材质模拟宽线，适合直线或曲线场景：

// 将坐标数组转换为THREE.Vector3数组
const points = positions.reduce((acc, val, idx) => {
  if (idx % 3 === 0) acc.push(new THREE.Vector3(positions[idx], positions[idx+1], positions[idx+2]));
  return acc;
}, []);

// 参数依次为：路径、分段数、线宽、圆角分段数、是否闭合
const tubeGeometry = new THREE.TubeGeometry(new THREE.LineCurve3(...points), 64, 4, 8, false);
const tubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const lineMesh = new THREE.Mesh(tubeGeometry, tubeMaterial);

内容的提问来源于stack exchange，提问作者kayak