效果图
代码
- 引入资源文件,在初始化时创建后处理对象
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { OutlinePass } from "three/addons/postprocessing/OutlinePass.js";
import { GammaCorrectionShader } from "three/addons/shaders/GammaCorrectionShader.js";
import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js';
import { CSS3DRenderer, CSS3DObject,CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js';
function createComposer(){
composer=new EffectComposer(renderer);
const renderPass=new RenderPass(scene,camera);
composer.addPass(renderPass);
const v2=new THREE.Vector2(window.innerWidth,window.innerHeight);
outlinePass=new OutlinePass(v2,scene,camera);
outlinePass.visibleEdgeColor.set(0x00ffff);
outlinePass.edgeThickness = 4;
outlinePass.edgeStrength = 6;
outlinePass.pulsePeriod = 2;
outlinePass.edgeGlow = 1;
composer.addPass(outlinePass);
const pixelRatio = renderer.getPixelRatio();
const smaaPass = new SMAAPass(window.innerWidth * pixelRatio, window.innerHeight * pixelRatio);
composer.addPass(smaaPass);
const gammaPass = new ShaderPass(GammaCorrectionShader);
composer.addPass(gammaPass);
}
- 配合点击事件,实现点击模型后高亮该模型
document.addEventListener('mouseup', function (event) {
const intersects = calcIntersects(event)
let x2 = (event.clientX / window.innerWidth) * 2 - 1
let y2 = -(event.clientY / window.innerHeight) * 2 + 1
if(x == x2&&y==y2){
if (intersects.length > 0) {
const pos = intersects[0].point;
let containsModelName = needClickModelList.some(item =>intersects[0].object.name.indexOf(item)!=-1);
if(containsModelName){
outlinePass.selectedObjects = [intersects[0].object];
var coords = intersects[0].point;
coords.y = coords.y + 50
clearDialog()
createDialogHtml(coords,intersects[0].object.name)
}
}
}
})
- 循环渲染
function animate() {
requestAnimationFrame(animate)
composer.render()
controls.update()
}