绘制粗线的挑战与 LineMaterial
在 Three.js 中，传统的 THREE.LineBasicMaterial 绘制的线条通常只有一个像素宽，并且其宽度不会随 linewidth 属性的改变而变化（除非在某些特定的 WebGL 上下文中）。这是因为 WebGL 的 gl.lineWidth 默认限制为 1 像素，并且在许多设备上不支持更宽的线条。
为了解决这一限制，Three.js 提供了 LineMaterial 和 Line2（或 LineSegments2）组合，它们通过渲染一系列的四边形（quads）来模拟具有像素厚度的线条，从而实现跨浏览器和设备的稳定粗线渲染。
导入与实例化 LineMaterial
LineMaterial 并非 Three.js 核心库的一部分，它位于 examples/jsm/lines 模块中，需要单独导入。
import * as THREE from 'three';
import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
import { LineMaterial } from 'three/addons/lines/LineMaterial.js';
import { Line2 } from 'three/addons/lines/Line2.js'; // 或 LineSegments2实例化 LineMaterial 时，可以传入一个配置对象，设置颜色、线宽等属性：
const lineMaterial = new LineMaterial({
color: 0xff0000, // 红色
linewidth: 8, // 8像素宽
// dashed: true, // 如果需要虚线
// dashScale: 2,
// dashSize: 1,
// gapSize: 1,
// alphaToCoverage: true, // 启用抗锯齿
});理解与设置 material.resolution
LineMaterial 的一个核心特性是它依赖于屏幕分辨率来正确渲染线条的厚度。material.resolution 属性用于告知材质当前渲染区域的宽度和高度（通常是 Canvas 的尺寸或视口尺寸）。
为什么需要 resolution？LineMaterial 在内部将线条渲染为一系列的四边形，这些四边形的大小需要根据屏幕像素来计算，以确保 linewidth 属性能够准确地转换为屏幕上的像素宽度。如果没有设置 resolution，材质无法知道如何将内部的屏幕空间计算映射到实际的渲染区域，导致线条可能无法显示或显示异常。
如何设置 resolution？resolution 属性通常需要设置为渲染器所在 Canvas 元素的宽度和高度。这通常在渲染循环开始前或 Canvas/视口尺寸发生变化时进行设置。
// 假设你有一个 Three.js 渲染器 (renderer)
// 并且你的 Canvas 元素是 renderer.domElement
// 在初始化时或每次视口大小改变时调用
function updateLineMaterialResolution(renderer, lineMaterial) {
const width = renderer.domElement.clientWidth;
const height = renderer.domElement.clientHeight;
lineMaterial.resolution.set(width, height);
}
// 示例：在渲染循环中更新（如果视口大小可能变化）
// 或者在 resize 事件监听器中更新
// const renderer = new THREE.WebGLRenderer();
// const lineMaterial = new LineMaterial({...});
// updateLineMaterialResolution(renderer, lineMaterial); // 首次设置
// 假设在一个 resize 事件监听器中
window.addEventListener('resize', () => {
// ... 更新相机投影矩阵等 ...
updateLineMaterialResolution(renderer, lineMaterial);
});如果你是在一个自定义的 overlay 容器中渲染，并且该容器有自己的视口尺寸获取方法，你可以使用它来设置 resolution：
// 假设 overlayRef.current.getViewportSize() 返回一个 { width, height } 对象
// 或者一个 THREE.Vector2 对象
trackRef.current.material.resolution.copy(
overlayRef.current.getViewportSize()
);完整示例代码
结合 LineGeometry、LineMaterial 和 Line2 来绘制一条粗线：
import * as THREE from 'three';
import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
import { LineMaterial } from 'three/addons/lines/LineMaterial.js';
import { Line2 } from 'three/addons/lines/Line2.js';
// 1. 设置场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 2. 创建线条几何体 (LineGeometry)
const positions = [];
positions.push(-1, 0, 0); // 起点
positions.push(0, 1, 0); // 中点
positions.push(1, 0, 0); // 终点
const lineGeometry = new LineGeometry();
lineGeometry.setPositions(positions);
// 3. 创建线条材质 (LineMaterial)
const lineMaterial = new LineMaterial({
color: 0x0000ff, // 蓝色
linewidth: 5, // 5像素宽
alphaToCoverage: true, // 启用抗锯齿
});
// 4. 设置材质分辨率
// 这一步至关重要！在渲染器初始化后或视口大小改变时设置。
lineMaterial.resolution.set(window.innerWidth, window.innerHeight);
// 5. 创建 Line2 对象
const line = new Line2(lineGeometry, lineMaterial);
scene.add(line);
// 6. 处理窗口大小变化，更新渲染器和材质分辨率
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
lineMaterial.resolution.set(window.innerWidth, window.innerHeight); // 更新材质分辨率
});
// 7. 渲染循环
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();注意事项
- 性能开销： LineMaterial 通过渲染四边形来实现粗线，这意味着它比 LineBasicMaterial 渲染的顶点数量更多，可能会带来一定的性能开销。对于需要大量线条的场景，需要权衡性能。
- 抗锯齿： 建议将 alphaToCoverage 设置为 true 来改善线条的抗锯齿效果。
- 虚线： LineMaterial 也支持虚线模式，通过设置 dashed、dashScale、dashSize 和 gapSize 属性可以实现。
- LineSegments2： 如果你只需要渲染不连续的线段，可以使用 LineSegmentsGeometry 和 LineSegments2，它们的用法与 LineGeometry 和 Line2 类似。
总结
在 Three.js 中绘制具有可控像素厚度的线条，务必使用 LineMaterial 结合 LineGeometry 和 Line2（或 LineSegments2）。核心在于理解并正确设置 LineMaterial 的 resolution 属性，它需要被设置为渲染器当前视口的宽度和高度，以确保线条厚度在屏幕上得到准确的映射和渲染。通过遵循这些步骤，你可以有效地在 Three.js 场景中创建稳定且视觉效果良好的粗线。
