three模型高亮外發光效果

頁面效果如下：

 

 

vue3+three完整代碼如下:

<template>
</template>
<script setup>
import * as THREE from 'three';
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 { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js"
import { FXAAShader } from "three/examples/jsm/shaders/FXAAShader.js"
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
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: 0xffffff } );
const cube = new THREE.Mesh( geometry, material );
const cube2 = cube.clone()
cube2.position.set(2,2,1)
scene.add( cube );
scene.add( cube2 );
console.log(scene, 'scene')
camera.position.z = 5;
// 軌道控制器
const controls = new OrbitControls( camera, renderer.domElement );
// 后處理效果代碼
    let composer = null
    let outlinePass = null
    let renderPass = null
        //高亮顯示模型（呼吸燈）
    function outlineObj (selectedObjects) {
      // 創建一個EffectComposer（效果組合器）對象，然后在該對象上添加后期處理通道。
      composer = new EffectComposer(renderer)
      // 新建一個場景通道  為了覆蓋到原理來的場景上
      renderPass = new RenderPass(scene, camera)
      composer.addPass(renderPass);
      // 物體邊緣發光通道
      outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera, selectedObjects)
      outlinePass.selectedObjects = selectedObjects
      outlinePass.edgeStrength = 10.0 // 邊框的亮度
      outlinePass.edgeGlow = 1// 光暈[0,1]
      outlinePass.usePatternTexture = false // 是否使用父級的材質
      outlinePass.edgeThickness = 1.0 // 邊框寬度
      outlinePass.downSampleRatio = 1 // 邊框彎曲度
      outlinePass.pulsePeriod = 5 // 呼吸閃爍的速度
      outlinePass.visibleEdgeColor.set(parseInt(0x00ff00)) // 呼吸顯示的顏色
      outlinePass.hiddenEdgeColor = new THREE.Color(0, 0, 0) // 呼吸消失的顏色
      outlinePass.clear = true
      composer.addPass(outlinePass)
      // 自定義的着色器通道 作為參數
      var effectFXAA = new ShaderPass(FXAAShader)
      effectFXAA.uniforms.resolution.value.set(1 / window.innerWidth, 1 / window.innerHeight)
      effectFXAA.renderToScreen = true
      composer.addPass(effectFXAA)
    }
    outlineObj([cube])
function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
    controls.update();
    if (composer) {
        composer.render()
      }
}
animate();
</script>