設置物體輪廓發光

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 導入后期合成
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';// 場景
const scene = new THREE.Scene();// 模型
// 頂點著色器
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 片元著色器
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(5, 0, 0);
scene.add(cube);const torusKnotGeometry = new THREE.TorusKnotGeometry(1, 0.35, 100, 16);
const torusKnotMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff });
const torusKnot = new THREE.Mesh(torusKnotGeometry, torusKnotMaterial);
torusKnot.position.set(0, 0, 0);
scene.add(torusKnot);// 相機
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);// 輔助線
const axesHelper = new THREE.AxesHelper(5); // 長度
scene.add(axesHelper);// 初始化渲染器
const renderer = new THREE.WebGLRenderer({antialias: true // 鋸齒模糊
});
// renderer.setClearColor(0x444444, 1); // 設置背景顏色
renderer.setSize(window.innerWidth, window.innerHeight); //設置three.js渲染區域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
// renderer.render(scene, camera);// 相機圍繞目標進行軌道運動; 注意OrbitControls會影響 camera.lookAt(x,y,z)失效，需設置controls.target.set(x,y,z)才能生效
const controls = new OrbitControls(camera, renderer.domElement);
// 可設置控制器阻尼，讓控制器更有真實效果，必須在你的動畫循環里調用.update()
controls.enableDamping = true// 添加后期合成
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.edgeStrength = 10; // 描邊的寬度
outlinePass.edgeGlow = 1; // 光暈
outlinePass.edgeThickness = 2; // 光暈粗細度
outlinePass.pulsePeriod = 5; // 閃爍頻率（呼吸燈）
outlinePass.visibleEdgeColor = new THREE.Color(0xff3333); // 描邊顏色
outlinePass.hiddenEdgeColor = new THREE.Color(0x000000); // 光暈顏色
// new THREE.TextureLoader().load('./26ad6804f422468988c3de6fe003bd6a.jpeg', texture => {
//   texture.wrapS = THREE.RepeatWrapping;
//   texture.wrapT = THREE.RepeatWrapping;
//   outlinePass.patternTexture = texture;
//   outlinePass.usePatternTexture = true;
// });
composer.addPass(outlinePass);// 設置發光的物體
outlinePass.selectedObjects = [torusKnot]
window.addEventListener('click', (e) => {outlinePass.selectedObjects = [cube];
})// 瀏覽器動畫
const clock = new THREE.Clock()
function render(time) {controls.update() // 阻尼控制器更新// renderer.render(scene, camera);composer.render(); // 后期合成來渲染requestAnimationFrame(render); // 請求動畫幀
}
render()// 監聽畫面變化，更新渲染畫面
window.addEventListener('resize', () => {// 更新攝像頭camera.aspect = window.innerWidth / window.innerHeight;// 更新攝像機的投影矩陣camera.updateProjectionMatrix();// 更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);// 設置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio)
})
</script>

設置物體泛光

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 導入后期合成
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';// 場景
const scene = new THREE.Scene();// 模型
// 頂點著色器
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 片元著色器
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(5, 0, 0);
cube.layers.set(1) // 設置物體所在的層級，默認層級為0
scene.add(cube);const torusKnotGeometry = new THREE.TorusKnotGeometry(1, 0.35, 100, 16);
const torusKnotMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff });
const torusKnot = new THREE.Mesh(torusKnotGeometry, torusKnotMaterial);
torusKnot.position.set(0, 0, 0);
scene.add(torusKnot);// 相機
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);// 輔助線
const axesHelper = new THREE.AxesHelper(5); // 長度
scene.add(axesHelper);// 初始化渲染器
const renderer = new THREE.WebGLRenderer({antialias: true, // 鋸齒模糊
});
// renderer.setClearColor(0x444444, 1); // 設置背景顏色
renderer.setSize(window.innerWidth, window.innerHeight); //設置three.js渲染區域的尺寸(像素px)
renderer.autoClear = false; // 不自動清除顏色和深度緩沖區
document.body.appendChild(renderer.domElement);
// renderer.render(scene, camera);// 相機圍繞目標進行軌道運動; 注意OrbitControls會影響 camera.lookAt(x,y,z)失效，需設置controls.target.set(x,y,z)才能生效
const controls = new OrbitControls(camera, renderer.domElement);
// 可設置控制器阻尼，讓控制器更有真實效果，必須在你的動畫循環里調用.update()
controls.enableDamping = true// 添加后期合成
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);// // 描邊，突出物體輪廓
// const outlinePass = new OutlinePass(
//   new THREE.Vector2(window.innerWidth, window.innerHeight),
//   scene,
//   camera
// );
// outlinePass.edgeStrength = 10; // 描邊的寬度
// outlinePass.edgeGlow = 1; // 光暈
// outlinePass.edgeThickness = 2; // 光暈粗細度
// outlinePass.pulsePeriod = 5; // 閃爍頻率（呼吸燈）
// outlinePass.visibleEdgeColor = new THREE.Color(0xff3333); // 描邊顏色
// outlinePass.hiddenEdgeColor = new THREE.Color(0x000000); // 光暈顏色
// // new THREE.TextureLoader().load('./26ad6804f422468988c3de6fe003bd6a.jpeg', texture => {
// //   texture.wrapS = THREE.RepeatWrapping;
// //   texture.wrapT = THREE.RepeatWrapping;
// //   outlinePass.patternTexture = texture;
// //   outlinePass.usePatternTexture = true;
// // });
// composer.addPass(outlinePass);// // 設置發光的物體
// outlinePass.selectedObjects = [torusKnot]
// window.addEventListener('click', (e) => {
//   outlinePass.selectedObjects = [cube];
// })// 泛光（光照氛圍）
const unrealBloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight),0.5, // 強度0.5, // 半徑0.5 // > 0.5泛光
)
composer.addPass(unrealBloomPass);// 點擊泛光和不泛光控制
window.addEventListener('click', (e) => {// console.log(cube.layers.mask); // 2的次方，通過set設置if (cube.layers.mask === 1) {cube.layers.set(1);} else {cube.layers.set(0);}
})// 瀏覽器動畫
const clock = new THREE.Clock()
function render(time) {controls.update() // 阻尼控制器更新// 清除顏色和深度緩沖區renderer.clear();// 渲染層級 0 并應用后期處理camera.layers.set(0);composer.render();// 清除深度緩沖區，避免深度沖突renderer.clearDepth();// 渲染層級 1 不應用后期處理camera.layers.set(1);renderer.render(scene, camera);requestAnimationFrame(render); // 請求動畫幀
}
render()// 監聽畫面變化，更新渲染畫面
window.addEventListener('resize', () => {// 更新攝像頭camera.aspect = window.innerWidth / window.innerHeight;// 更新攝像機的投影矩陣camera.updateProjectionMatrix();// 更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);// 設置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio)
})
</script>