使用 Three.js 实现几何体轮廓线效果

// 创建立方体几何体和材质
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);

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 );
}