038：vue+threeJS 实现物体点击选中高亮

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

一、示例效果图

二、示例简介

这是一个基于 Vue2 和 Three.js 的示例，实现物体点击选中高亮。

• 关键技术点：
  使用 Raycaster 实现射线检测，判断点击是否与物体相交
  通过 MeshStandardMaterial 的 emissive 属性实现高亮效果
  使用 Map 存储物体原始材质，方便取消选中时恢复
  标准化设备坐标转换，将鼠标点击位置转换为 Three.js 可识别的坐标
  处理窗口大小变化，保持场景比例正确

三、配置说明

1）查看基础设置：https://dajianshi.blog.csdn.***/article/details/141936765
2）将示例源代码，粘贴到src/views/Home.vue中，npm run serve 运行即可。

四、示例源代码（共 219 行）