three.js 射线拾取精灵图Sprite控制场景

效果：这里只是 鼠标点击时，改变了精灵图的材质颜色

代码：

 

<template>
  <div>
    <el-container>
      <el-main>
        <div class="box-card-left">
          <div id="threejs" style="border: 1px solid red"></div>
          <div class="box-right" style="text-align: left; padding: 10px">
            <img src="./zuobiao.png" alt="">
            <img src="./zuobiao1.jpg" alt="">
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// 效果制作器
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
// 渲染通道
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
// 发光描边OutlinePass
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";

export default {
  data() {
    return {
      name: "",
      scene: null,
      camera: null,
      renderer: null,
      effectComposer: null,
      mesh: null,
      geometry: null,
      group: null,
      material: null,
      texture: null,
      position: null,
      outlinePass: null,
      canvasWidth: 1000,
      canvasHeight: 800,
      color: [],
      meshArr: [],
      numbers: Array.from({ length: 255 }, (_, i) => i)
    };
  },
  created() {},
  mounted() {
    this.name = this.$route.query.name;
    this.init();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    // 随机颜色
    randomColor() {
      // 要生成min-max之间的随机数，公式为：Math.random()*(max-min+1)+min
      let i = Math.floor(Math.random() * 255);
      let j = Math.floor(Math.random() * 255);
      let k = Math.floor(Math.random() * 255);
      return new this.$three.Color(
        "rgb(" +
          i +
          ", " +
          j +
          ", " +
          k +
          ")"
      );
    },
    // 随机颜位置
    randomPosition() {
      // 要生成min-max之间的随机数，公式为：Math.random()*(max-min+1)+min
      let i = Math.floor(Math.random() * 230);
      let j = Math.floor(Math.random() * 230);
      let k = Math.floor(Math.random() * 230);
      // return new this.$three.Vector3(i, j, k);
      return {i, j, k};
    },
    init() {
      // 创建场景对象
      this.scene = new this.$three.Scene();
      // 创建环境光对象
      const ambientLight = new this.$three.AmbientLight(0xffffff);
      this.scene.add(ambientLight);
      // 创建坐标轴辅助对象
      const axesHelper = new this.$three.AxesHelper(500);
      this.scene.add(axesHelper);
      // 调用平面缓冲几何体方法
      this.planeGeometryFn();
      // 创建TextureLoader加载器对象
      const textureLoader = new this.$three.TextureLoader().load(require("../../assets/twelve/tree.png"));
      // 创建精灵材质对象
      const spriteMaterial = new this.$three.SpriteMaterial({
        transparent: true,
        map: textureLoader
      })
      // 创建组对象
      this.group = new this.$three.Group();
      // 创建精灵对象
      for(let i = 0, j = 18; i < j; i++) {
        let flag = i % 2 == 0 ? 1 : -1;
        // 创建精灵模型对象
        const sprite = new this.$three.Sprite(spriteMaterial);
        // 设置精灵图位置
        sprite.position.set(flag * this.randomPosition().i, 0, -flag * this.randomPosition().k);
        sprite.scale.set(150,150,1); // 设置精灵图缩放
        sprite.translateY(75); // 沿y轴正方向移动 75
        this.group.add(sprite);
      }
      // 场景中添加组对象
      this.scene.add(this.group);
      // 创建相机对象
      this.camera = new this.$three.PerspectiveCamera(60,1,0.01,2000);
      this.camera.position.set(500,500,600); // 设置相机位置
      this.camera.lookAt(0,0,0); // 设置相机指向
      // 创建渲染器对象
      this.renderer = new this.$three.WebGLRenderer();
      setTimeout(() =>{
        this.renderer.setSize(1000,800);
        this.renderer.render(this.scene, this.camera);
        window.document.getElementById("threejs").appendChild(this.renderer.domElement);
        this.outlinePassFn();
      },500)
      // 创建相机空间轨道控制器
      const controls = new OrbitControls(this.camera, this.renderer.domElement);
      controls.addEventListener("change", () => {
        this.renderer.render(this.scene, this.camera);
      })
    },
    // 创建平面缓冲几何体的方法
    planeGeometryFn() {
      // 创建平面缓冲几何体对象
      const planeGeometry = new this.$three.PlaneGeometry(800,800);
      // 创建网格材质对象
      const material = new this.$three.MeshBasicMaterial({
        color: 0x98CEF3,
        side: this.$three.DoubleSide
      });
      // 创建网格对象
      const mesh = new this.$three.Mesh(planeGeometry, material);
      mesh.rotateX(Math.PI / 2); // 模型旋转90度
      this.scene.add(mesh);
    },
    // 创建 射线拾取Sprite控制场景的方法
    spritControls() {
      document.getElementById("threejs").addEventListener("click", e => {
        // 1，先进行坐标转换
        let px = e.offsetX;
        let py = e.offsetY;
        let x = (px / 1000) * 2 - 1;
        let y = -(py / 800) * 2 + 1;
        // 创建射线投射器对象
        const raycaster = new this.$three.Raycaster();
        // 计算射线  setFromCamera
        raycaster.setFromCamera(new this.$three.Vector2(x, y), this.camera);
        // 射线交叉计算
        let intersect = raycaster.intersectObjects(this.group.children);
        if(intersect.length > 0) {
          intersect[0].object.material.color.copy(this.randomColor());
          this.renderer.render(this.scene, this.camera);
        }
      })
    },
    // 创建发光描边的方法
    outlinePassFn() {
      // 创建后处理对象
      this.effectComposer = new EffectComposer(this.renderer);
      // 创建渲染器通道对象
      const renderPass = new RenderPass(this.scene, this.camera);
      this.effectComposer.addPass(renderPass);
      // 创建发光描边通道对象
      this.outlinePass = new OutlinePass(new this.$three.Vector2(1000, 800), this.scene, this.camera);
      this.outlinePass.visibleEdgeColor.set(0xffddaa);
      this.outlinePass.edgeThickness = 5;
      this.outlinePass.pulsePriod = 2;
      this.effectComposer.addPass(this.outlinePass);
      
        this.spritControls();
    },
    renderFun() {
      if(this.effectComposer) {
        this.effectComposer.render();
      }
      window.requestAnimationFrame(this.renderFun);
    }
  },
};
</script>
//
<style lang="less" scoped>
.box-card-left {
  display: flex;
  align-items: flex-start;
  flex-direction: row;

  width: 100%;

  .box-right {
  img{
    width:500px;
  }
  }
}
</style>