本文介绍了如何在 Three.js 中为几何体添加轮廓线效果。通过使用 THREE.EdgesGeometry 和 THREE.LineSegments，我们可以轻松地在现有几何体的边缘绘制轮廓线，无需复杂的自定义着色器。此外，还讨论了如何使用 LineMaterial 和 LineSegments2 实现更粗的轮廓线效果。
在 Three.js 中，为几何体添加轮廓线可以增强视觉效果，使其更加清晰和突出。实现这一效果有多种方法，本文将介绍一种简单有效的方法，即使用 THREE.EdgesGeometry 和 THREE.LineSegments。
使用 EdgesGeometry 和 LineSegments 创建轮廓线
THREE.EdgesGeometry 可以从现有的几何体中提取边缘信息，而 THREE.LineSegments 可以根据这些边缘信息绘制线段。以下是一个简单的示例，展示了如何为一个立方体添加轮廓线：
// 创建立方体几何体和材质
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: '#ffc32a'});
// 创建立方体并添加到场景
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 创建立方体的边缘几何体
const edges = new THREE.EdgesGeometry(geometry);
// 创建线段材质
const lineMaterial = new THREE.LineBasicMaterial({color: '#000000'});
// 创建线段并添加到场景
const line = new THREE.LineSegments(edges, lineMaterial);
scene.add(line);这段代码首先创建了一个立方体，然后使用 THREE.EdgesGeometry 从立方体的几何体中提取边缘信息。接着，创建了一个黑色的 THREE.LineBasicMaterial 作为轮廓线的材质。最后，使用 THREE.LineSegments 将边缘几何体和材质结合起来，创建了轮廓线，并将其添加到场景中。
关于轮廓线粗细的注意事项
需要注意的是，使用 THREE.LineBasicMaterial 和 THREE.LineSegments 创建的轮廓线，其粗细始终为 1 像素。这是由于 GPU 的渲染方式所限制的。如果需要更粗的轮廓线，则需要使用 LineMaterial、LineSegments2 和 LineSegmentsGeometry。这些类位于 Three.js 的 examples 目录下，需要单独引入。
以下是如何使用 LineMaterial、LineSegments2 和 LineSegmentsGeometry 实现更粗轮廓线的示例：
import * as THREE from 'three';
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2.js';
import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js';
// 创建立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建边缘几何体
const edges = new THREE.EdgesGeometry(geometry);
// 创建线段几何体
const lineGeometry = new LineSegmentsGeometry().setPositions( edges.attributes.position.array );
// 创建线段材质
const lineMaterial = new LineMaterial({
color: 0x000000,
linewidth: 0.01, // 设置线宽
resolution: new THREE.Vector2( window.innerWidth, window.innerHeight )
});
// 创建线段
const line = new LineSegments2( lineGeometry, lineMaterial );
scene.add( line );
// 在渲染循环中更新材质的 resolution
function animate() {
requestAnimationFrame( animate );
lineMaterial.resolution.set( window.innerWidth, window.innerHeight );
renderer.render( scene, camera );
}在这个示例中，我们首先引入了 LineMaterial、LineSegments2 和 LineSegmentsGeometry。然后，使用 LineMaterial 创建了一个可以控制线宽的材质，并通过 linewidth 属性设置了轮廓线的粗细。最后，使用 LineSegments2 将边缘几何体和材质结合起来，创建了轮廓线。请注意，使用 LineMaterial 时，需要在渲染循环中更新 resolution 属性，以确保轮廓线在不同分辨率下显示正确。
总结
本文介绍了两种在 Three.js 中为几何体添加轮廓线的方法。第一种方法使用 THREE.EdgesGeometry 和 THREE.LineSegments，简单易用，但只能创建 1 像素粗细的轮廓线。第二种方法使用 LineMaterial、LineSegments2 和 LineSegmentsGeometry，可以创建更粗的轮廓线，但需要单独引入 examples 目录下的文件，并且需要注意更新 resolution 属性。根据实际需求选择合适的方法，可以为 Three.js 项目添加更丰富的视觉效果。
