threejs outlinepass

// 引入 Three.js 和相关库
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

// 创建 EffectComposer 和 RenderPass
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

// 创建 OutlinePass
const outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
outlinePass.selectedObjects = [cube];
outlinePass.visibleEdgeColor.set('#ffffff');
outlinePass.hiddenEdgeColor.set('#ffffff');
composer.addPass(outlinePass);

// 添加 OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    composer.render();
}

animate();

解释说明

1. 引入库：首先我们引入了 Three.js 和相关的库，包括 OrbitControls 和 OutlinePass。
2. 创建场景、相机和渲染器：初始化了一个基本的 Three.js 场景，并设置了相机和渲染器。
3. 添加物体：创建了一个简单的绿色立方体并将其添加到场景中。
4. EffectComposer 和 RenderPass：使用 EffectComposer 来管理后处理效果，并添加了一个 RenderPass 来渲染场景。
5. OutlinePass：创建了 OutlinePass 并设置其属性（如轮廓颜色），然后将其添加到 EffectComposer 中。
6. OrbitControls：添加了 OrbitControls 以便可以旋转和缩放视图。
7. 渲染循环：定义了一个渲染循环来不断更新和渲染场景。

这个示例展示了如何使用 OutlinePass 在 Three.js 中为特定对象添加轮廓效果。