射线 raycaster

1. 射线穿透问题：把可能会碰撞的所有物体都放进去，选取第一个碰撞的物体做判断

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js"
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js"

    createRay () {
      addEventListener('click', (event) => {
        // 1. 创建
        this.raycaster = new THREE.Raycaster();
        this.mouse = new THREE.Vector2();
        //通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
        this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        this.mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
        this.raycaster.setFromCamera(this.mouse, this.camera);
        // 2. 计算
        const intersectsRight = this.raycaster.intersectObjects([this.rightDoor]);  
        const intersectsLeft = this.raycaster.intersectObjects([this.leftDoor]);
        // 3. 添加功能
        if (intersectsRight.length) {
          this.createComposer(this.rightDoor)
          if (this.rightDoorStatus) {
            this.closeDoor('right')
          } else {
            this.openDoor('right')
          }
        }
        if (intersectsLeft.length) {
          this.createComposer(this.leftDoor)
          if (this.leftDoorStatus) {
            this.closeDoor('left')
          } else {
            this.openDoor('left')
          }
        }
        this.renderer.render(this.scene, this.camera);
      })
    },

后处理

1. 引入 : `

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js"
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js"
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js"
import { GammaCorrectionShader } from 'three/examples/jsm/shaders/GammaCorrectionShader.js'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'

 createComposer (mesh) {
      const composer = new EffectComposer(this.renderer)
      const renderPass = new RenderPass(this.scene, this.camera) // 后处理通道
      composer.addPass(renderPass)
      // 解决发光描边后环境变暗,必须放在 composer.addPass(renderPass) 后
      const gammaCorrectionShader = new ShaderPass(GammaCorrectionShader);
      composer.addPass(gammaCorrectionShader);
      // end 
      const v2 = new THREE.Vector2(this.container.clientWidth, this.container.clientHeight)  // 与canva 画布尺寸保持一致
      const outlinePass = new OutlinePass(v2, this.scene, this.camera)
      outlinePass.selectedObjects = [mesh]// 发光描边得网格模型，可以写多个
      composer.addPass(outlinePass)
      this.composer = composer
    },