vue项目中，Threejs 点击模型，高亮发光模型外轮廓

效果如图，点击哪块，对应显示边框线，带呼吸灯

1、引入依赖

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer"
import {RenderPass} from "three/examples/jsm/postprocessing/RenderPass"
import {OutlinePass} from "three/examples/jsm/postprocessing/OutlinePass"
import {ShaderPass} from "three/examples/jsm/postprocessing/ShaderPass"
import {FXAAShader} from "three/examples/jsm/shaders/FXAAShader"

2、定义数据

composer:null,
outlinePass:null,
renderPass:null,

3、vue文件中，
监听模型的点击事件this.renderer.domElement.addEventListener('click', this.modelMouseClick, false)，
渲染 this.composer.render()，
并根据点击的模块为模块添加光效this.outlineObj([intersects[0].object])

 // 最后的渲染render() {let animate = () => {//循环调用函数this.clearAnim = requestAnimationFrame(animate)//更新相机控件this.controls && this.controls.update()//渲染界面this.renderer.render(this.scene, this.camera)if(this.composer){this.composer.render()}}animate()//  为模型绑定点击事件this.renderer.domElement.addEventListener('click', this.modelMouseClick, false)},

// 模型的点击事件
modelMouseClick( event ) {let raycaster = new THREE.Raycaster();let mouse = new THREE.Vector2();// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;raycaster.setFromCamera(mouse, this.camera);const intersects = raycaster.intersectObjects(this.scene.children);// 根据它来判断点击的什么，length为0即没有点击到模型console.log(intersects.length ? intersects[0].object.name : intersects, 'intersects----->>>')if(intersects.length){this.outlineObj([intersects[0].object])}
},

4、添加高亮发光模型外轮廓效果

//高亮显示模型（呼吸灯）outlineObj (selectedObjects) {// 创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。this.composer = new EffectComposer(this.renderer)// 新建一个场景通道  为了覆盖到原理来的场景上this.renderPass = new RenderPass(this.scene, this.camera)this.composer.addPass(this.renderPass);// 物体边缘发光通道this.outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), this.scene, this.camera, selectedObjects)this.outlinePass.selectedObjects = selectedObjectsthis.outlinePass.edgeStrength = 10.0 // 边框的亮度this.outlinePass.edgeGlow = 1// 光晕[0,1]this.outlinePass.usePatternTexture = false // 是否使用父级的材质this.outlinePass.edgeThickness = 1.0 // 边框宽度this.outlinePass.downSampleRatio = 1 // 边框弯曲度this.outlinePass.pulsePeriod = 5 // 呼吸闪烁的速度this.outlinePass.visibleEdgeColor.set(parseInt(0x00ff00)) // 呼吸显示的颜色this.outlinePass.hiddenEdgeColor = new THREE.Color(0, 0, 0) // 呼吸消失的颜色this.outlinePass.clear = truethis.composer.addPass(this.outlinePass)// 自定义的着色器通道 作为参数let effectFXAA = new ShaderPass(FXAAShader)effectFXAA.uniforms.resolution.value.set(1 / window.innerWidth, 1 / window.innerHeight)effectFXAA.renderToScreen = truethis.composer.addPass(effectFXAA)},

此文引用于文章gis开发，亲测可用

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！