Three.js厚线渲染指南：理解LineMaterial与分辨率设置

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'; // 用于渲染LineGeometry和LineMaterial

// 1. 定义线条位置
const positions = new Float32Array([
    -10, 0, 0,
    0, 10, 0,
    10, 0, 0
]);

// 2. 创建LineGeometry
const lineGeometry = new LineGeometry().setPositions(positions);

// 3. 创建LineMaterial
// 注意：LineMaterial的linewidth单位是像素
const lineMaterial = new LineMaterial({
    color: 0xff0000, // 红色
    linewidth: 8,    // 8像素宽
    // transparent: true, // 如果需要透明度
    // opacity: 0.8,
    // dashed: false,   // 如果需要虚线
    // dashSize: 2,
    // gapSize: 1,
});

// 4. 创建Line2对象
// Line2是LineGeometry和LineMaterial的组合
const line = new Line2(lineGeometry, lineMaterial);

// 将线条添加到场景中
// scene.add(line);

// 假设你已经有了Three.js的renderer实例
const renderer = new THREE.WebGLRenderer({ antialias: true });
// ... 配置和添加到DOM ...

// 获取渲染器当前尺寸
const resolutionVector = new THREE.Vector2();
renderer.getSize(resolutionVector); // 将渲染器尺寸写入resolutionVector

// 将尺寸复制给LineMaterial的resolution属性
lineMaterial.resolution.copy(resolutionVector);

// 或者，如果你是在一个React/Three-fiber组件中，并且有一个overlayRef
// lineMaterial.resolution.copy(overlayRef.current.getViewportSize());
// 这里的getViewportSize()应该返回一个THREE.Vector2，包含当前viewport的像素宽度和高度。

window.addEventListener('resize', () => {
    // 更新渲染器尺寸
    const width = window.innerWidth;
    const height = window.innerHeight;
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();

    // 更新LineMaterial的resolution
    const resolutionVector = new THREE.Vector2();
    renderer.getSize(resolutionVector);
    lineMaterial.resolution.copy(resolutionVector);
});

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
import { LineMaterial } from 'three/addons/lines/LineMaterial.js';
import { Line2 } from 'three/addons/lines/Line2.js';

// 场景、相机、渲染器初始化
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 设置相机位置
camera.position.z = 20;

// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用阻尼（惯性）
controls.dampingFactor = 0.25;

// 1. 定义线条位置
const positions = new Float32Array([
    -10, 0, 0,
    0, 10, 0,
    10, 0, 0,
    5, -5, 0,
    -5, -5, 0
]);

// 2. 创建LineGeometry
const lineGeometry = new LineGeometry().setPositions(positions);

// 3. 创建LineMaterial
const lineMaterial = new LineMaterial({
    color: 0x0000ff, // 蓝色
    linewidth: 5,    // 5像素宽
    dashed: true,    // 虚线
    dashSize: 2,
    gapSize: 1,
    alphaToCoverage: true, // 启用抗锯齿
});

// 4. 创建Line2对象
const line = new Line2(lineGeometry, lineMaterial);
scene.add(line);

// 初始设置LineMaterial的resolution
const resolutionVector = new THREE.Vector2();
renderer.getSize(resolutionVector);
lineMaterial.resolution.copy(resolutionVector);

// 动画循环
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // 仅在enableDamping或autoRotate时需要
    renderer.render(scene, camera);
}
animate();

// 窗口大小调整事件监听
window.addEventListener('resize', () => {
    const width = window.innerWidth;
    const height = window.innerHeight;

    // 更新相机和渲染器
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize(width, height);

    // 更新LineMaterial的resolution
    const currentResolution = new THREE.Vector2();
    renderer.getSize(currentResolution);
    lineMaterial.resolution.copy(currentResolution);
});