2020-11-23

vue使用OutlinePass问题。给加载后的模型添加辉光

首先需要下载three-outlinepass，网址：https://www.npmjs.com/package/three-outlinepass

然后引入import { RenderPass, EffectComposer, OutlinePass } from “three-outlinepass”

封装函数：

outlineObj(selectedObjects) {
var compose = new EffectComposer(this.renderer);
var renderPass = new RenderPass(this.scene, this.camera);
var outlinePass = new OutlinePass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
this.scene,
this.camera,
selectedObjects
);
outlinePass.renderToScreen = true;
outlinePass.selectedObjects = selectedObjects;
compose.addPass(renderPass);
compose.addPass(outlinePass);
// outlinePass.pulsePeriod = 2; //数值越大，律动越慢
outlinePass.visibleEdgeColor.set(0xffff00); // 高光颜色
outlinePass.hiddenEdgeColor.set(0x000000); // 阴影颜色
outlinePass.usePatternTexture = false; // 使用纹理覆盖？
outlinePass.edgeStrength = 10; // 高光边缘强度
outlinePass.edgeGlow = 1; // 边缘微光强度
outlinePass.edgeThickness = 5; // 高光厚度
animate();
function animate() {
requestAnimationFrame(animate);
compose.render();
}
console.log(compose);
},
调用：window.addEventListener(“click”,this.outlineObj(this.selectedObjects)); 在主函数init中
在加载模型的函数中遍历，判断哪些模型需要添加辉光效果
object.traverse(child => { //遍历object
if (child.name==‘deng’) {
this.selectedObjects.push(child);
}
});