three.js 点击交互事件 含解决点击的物体与看到的不一致问题（非全屏/多边形偏移）

在 three.js 中，可以通过添加事件监听器来实现点击交互事件。具体步骤如下：

1. 获取场景中的所有物体，并为每个物体添加一个点击事件监听器。

javascript 
scene.traverse(function(object) { 
  if (object instanceof THREE.Mesh) { 
    object.addEventListener('click', function() { 
      // 处理点击事件 
    }); 
  } 
}); 

2. 在点击事件处理函数中，可以获取到被点击的物体对象，并进行相应的操作。

function handleClick(event) { 
  var mouse = new THREE.Vector2(); 
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1; 
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; 
 
  var raycaster = new THREE.Raycaster(); 
  raycaster.setFromCamera(mouse, camera); 
 
  var intersects = raycaster.intersectObjects(scene.children, true); 
 
  if (intersects.length > 0) { 
    var clickedObject = intersects[0].object; 
    // 处理被点击的物体对象 
  } 
}

需要注意的是，有时候点击的物体与看到的物体不一致，这可能是由于非全屏或多边形偏移等问题导致的。解决方法如下：

1. 非全屏问题：在创建渲染器时，将 canvas 的宽高设置为窗口的宽高。

var renderer = new THREE.WebGLRenderer({ canvas: canvas }); 
renderer.setSize(window.innerWidth, window.innerHeight); 

2. 多边形偏移问题：在创建材质时，设置 polygonOffset 属性。

var material = new THREE.MeshBasicMaterial({ 
  color: 0xffffff, 
  polygonOffset: true, 
  polygonOffsetFactor: 1, 
  polygonOffsetUnits: 1 
}); 

通过以上方法，可以实现 three.js 中的点击交互事件，并解决点击的物体与看到的不一致问题。

示例

<template>
  <div class="hello">
    <div class="tip">
      <canvas id="three"></canvas>
    </div>
    
    <Mabtn @cocorbtn="cocorbtn" @caizhibtn="caizhibtn" @btnopen="btnopen"/>
  </div>
</template>

<script>
import Mabtn from "../components/mabtn.vue";
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// 添加轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

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"

import {setcolor} from '../../public/setColor'
var OBJ = ''
export default {
  name: 'HelloWorld',
  components:{
    Mabtn
  },
  data(){
    return{

      renderer:null,
      nameNode:null,
      composer:null,
      outlinePass:null,
      renderPass:null,
      scene:null,
      camera:null,
      gltfscene:null,
      bujian:'',
      faguang:false,
    }
  },
  mounted() {
    this.initThree()
    // this.render()
  },
  
  methods: {
    btnopen(){
      // document.querySelector('#three').style.height='100%'
      
    },
    cocorbtn(b){
      console.log(b);
      console.log(this.faguang);
      if (!this.faguang) {
        if (this.nameNode.children.length>0) { //点击颜色
          let img =  setcolor(b)
           // 更换纹理贴图
          var texture = new THREE.TextureLoader().load(img + '.png');
          OBJ.material.map = texture
          for (let i = 0; i < this.nameNode.children.length; i++) {
            this.nameNode.children[i].material.color.set(b)
          } 
        }else{
          this.nameNode.material.color.set(b)
        }
      }
     
    },
    caizhibtn(a){//点击部件
      console.log(a);
      this.bujian=a
      this.nameNode=this.gltfscene.getObjectByName(a)
      if (this.nameNode.children.length>0) { //点击颜色
        this.outlineObj([this.nameNode.children[0]])
        OBJ = this.nameNode.children[0]
        console.log(this.nameNode.children[0]);
      }else{
        this.outlineObj([this.nameNode])
        OBJ = this.nameNode
      }
      this.faguang=!this.faguang
    },
    
    initThree() {
      let that = this
      this.scene = new THREE.Scene() // 创建一个scene 
      this.scene.background = new THREE.Color('#eee') // 背景颜色

      const canvas = document.querySelector('#three')
      // 渲染器锯齿属性.antialias
      that.renderer = new THREE.WebGLRenderer({ canvas, antialias: true }) // 创建一个WebGLRenderer，将canvas和配置参数传入
   
      // 引入3D模型 gltf放置public目录 
      const gltfLoader = new GLTFLoader()
      gltfLoader.load('/ShoeOne/ShoeOne.gltf', (gltf) => {
        let model = gltf.scene
        // 递归遍历所有模型节点批量修改材质
        gltf.scene.traverse(function(obj) {
            if (obj.isMesh) {//判断是否是网格模型
                // console.log('模型节点',obj);
                // console.log('模型节点名字',obj.name);
                // console.log('gltf默认材质',obj.material); 
            }
        });
        console.log(gltf.scene)
        this.gltfscene = gltf.scene
        // 设置模型离中心点的位置
        // gltf.scene.scale.set(40,40,40)
        // gltf.scene.position.x = 0
        // gltf.scene.position.y = -80
        // gltf.scene.position.z = 0
        //  console.log(nameNode);
        //  for (let i = 0; i < nameNode.children.length; i++) {
        //   nameNode.children[i].material.color.set(0xff0000)
        //   nameNode.children[i].position.x = 0
        //   nameNode.children[i].position.y = -10
        //   nameNode.children[i].position.z = 0
        //  } 
        // const nameNode = gltf.scene.getObjectByName("内里");
        // nameNode.material.color.set(0xff0000);//改变Mesh材质颜色
       
        this.scene.add(model)
      })
      that.renderer.domElement.addEventListener('click', that.modelMouseClick, false) //设置点击方法
      that.renderer.setSize(window.innerWidth, window.innerHeight)

      const hemLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 1)
      hemLight.position.set(0, 48, 0)
      this.scene.add(hemLight)

      //平行光 (这里可以用点光源PointLight和环境光AmbientLight没有特定方向，整体改变场景的光照明暗)
      const dirLight = new THREE.DirectionalLight(0xffffff, 1)
      //光源等位置
      dirLight.position.set(-10, 8, -5)
  
      //使用PerspectiveCamera（透视摄像机）:透视相机用来模拟人眼所看到的景象，物体的大小会受远近距离的影响，它是3D场景的渲染中使用得最普遍的投影模式。
      this.camera = new THREE.PerspectiveCamera(
        50,
        window.innerWidth / window.innerHeight,
        1,
        1000
      )
      // camera.position.z = 10 // 正方位
      this.camera.position.set(3, 4, 3);

      const controls = new OrbitControls(this.camera, that.renderer.domElement)
      // 阻尼感
      controls.enableDamping = true
        // 动画循环函数
      function animate() {
        controls.update()
        that.renderer.render(that.scene, that.camera)
        requestAnimationFrame(animate)

        if (resizeRendererToDisplaySize(that.renderer)) {
          const canvas = that.renderer.domElement
          that.camera.aspect = canvas.clientWidth / canvas.clientHeight
          that.camera.updateProjectionMatrix()
        }
        if (that.composer) {
          that.composer.render()
        }
      }
      animate()
      // 物理像素分辨率与CSS像素分辨率
      function resizeRendererToDisplaySize(renderer) {
        const canvas = renderer.domElement
        var width = window.innerWidth
        var height = window.innerHeight
        var canvasPixelWidth = canvas.width / window.devicePixelRatio
        var canvasPixelHeight = canvas.height / window.devicePixelRatio

        const needResize =
          canvasPixelWidth !== width || canvasPixelHeight !== height
        if (needResize) {
          renderer.setSize(width, height, false)
          
        }
        return needResize
      }
    },
        // 窗口监听函数
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },
 
    
    // 模型的点击事件
    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 + 0.8;


      raycaster.setFromCamera(mouse, this.camera);

      const intersects = raycaster.intersectObjects(this.scene.children);

      // if (intersects[0].object) {
        if (this.nameNode==intersects[0].object) {
          console.log('jin1');
          this.faguang=!this.faguang
        }else{
          console.log('jin2');
          this.faguang=false
        }
      // }
     
      console.log(this.faguang,'001');
      this.nameNode= intersects[0].object
      // 根据它来判断点击的什么，length为0即没有点击到模型
      console.log(intersects.length ? intersects[0].object.name : intersects, 'intersects----->>>')
       // 获取选中最近的 Mesh 对象

       if (intersects.length != 0 && intersects[0].object instanceof THREE.Mesh) {
        this.outlineObj([intersects[0].object] )
      }
      // if(intersects.length){

      // }
    },
    //高亮显示模型（呼吸灯）
    outlineObj (selectedObjects) {
      console.log(selectedObjects);
      // let that = this
       // 创建一个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)
      console.log(this.faguang,'002');
      if (!this.faguang) {
        this.outlinePass.selectedObjects = selectedObjects
      }else{
        this.outlinePass.selectedObjects =[]
      }
      console.log('显示',this.faguang);
      this.outlinePass.edgeStrength = 15.0 // 边框的亮度
      this.outlinePass.edgeGlow = 2// 光晕[0,1]
      this.outlinePass.usePatternTexture = false // 是否使用父级的材质
      this.outlinePass.edgeThickness = 1.0 // 边框宽度
      this.outlinePass.downSampleRatio = 1 // 边框弯曲度
      this.outlinePass.pulsePeriod = 0 // 呼吸闪烁的速度
      this.outlinePass.visibleEdgeColor.set(parseInt(0x0000FF)) // 呼吸显示的颜色
      this.outlinePass.hiddenEdgeColor = new THREE.Color(0x0000FF) // 呼吸消失的颜色
      this.outlinePass.clear = true
      this.composer.addPass(this.outlinePass)
      // 自定义的着色器通道 作为参数
      let effectFXAA = new ShaderPass(FXAAShader)
      effectFXAA.uniforms.resolution.value.set(1 / window.innerWidth, 1 / window.innerHeight)
      effectFXAA.renderToScreen = true
      this.composer.addPass(effectFXAA)
      
    },

 
  }
}
</script>

<style scoped>
.tip{
  width: 100%;
  height: 80%;
  position: fixed;
  top: 0;
  left: 0;
}
#three {
  width: 100% !important;
  height: 100% !important;

}
</style>