vue + threejs 实现场景环境贴图，模型高光显示效果

<template>
  <div class="modelsBox">
    <div class="modelsBox_wrapper"></div>
    <div class="opara-pannel">
      <div>
      </div>
      <div>
        三维坐标点信息
        <!-- <p>{{point3d}}</p> -->
      </div>
    </div>
  </div>
</template>

<script>
// import * as THREE from 'three';
import { PMREMGenerator } from 'three';
import { webglOBJ, labelTag, getPointRay, getFitScaleValue, deepCopyObject } from '@/utils/webGL/webGL.js';
import * as THREE from 'three';
import { OrbitControls } from './threeUtils/controls/OrbitControls.js';
import { GLTFLoader } from './threeUtils/loaders/GLTFLoader.js';
import { RGBELoader } from './threeUtils/loaders/RGBELoader.js';
export default {
  name: 'modelsBox',
  data () {
    return {
      zoom: 1,
      target: '',
      sence: null,
      camera: '',
      renderer: '',
      obj: {
        sence: '',
        camera: ''
      },
      labels: [
        { x: 381.0111567102036, y: 41.66598867957452, z: -248.63694417317873 },
        { x: 383.39332161333544, y: 41.37982005491592, z: -380.9167972387805 },
        { x: 384.19846417704997, y: 41.50664881726524, z: -466.0620455548741 }
      ]
    };
  },
  beforeDestroy () {
    document.removeEventListener('click', this.get3D);
  },
  mounted () {
    // this.int();
    this.pageInt();
  },
  methods: {
    pageInt () {
      let camera, scene, renderer;

      init();
      render();

      function init () {

        const container = document.createElement('div');
        document.body.appendChild(container);
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20);
        camera.position.set(- 1.8, 0.6, 2.7);
        scene = new THREE.Scene();

        new RGBELoader().load('https://threejs.org/examples/textures/equirectangular/royal_esplanade_1k.hdr', function (texture) {
            texture.mapping = THREE.EquirectangularReflectionMapping;
            scene.background = texture;
            scene.environment = texture;
            render();
            // model
            const loader = new GLTFLoader();
            loader.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', function (gltf) {
              gltf.scene.scale.x = 0.5;
              gltf.scene.scale.y = 0.5;
              gltf.scene.scale.z = 0.5;
              scene.add(gltf.scene);
              render();
            });

          });

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 1;
        renderer.outputEncoding = THREE.sRGBEncoding;
        container.appendChild(renderer.domElement);

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.addEventListener('change', render); // use if there is no animation loop
        controls.minDistance = 2;
        controls.maxDistance = 10;
        controls.target.set(0, 0, - 0.2);
        controls.update();
        window.addEventListener('resize', onWindowResize);
      }

      function onWindowResize () {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
        render();
      }

      function render () {
        renderer.render(scene, camera);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.modelsBox_wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  border: 1px solid #ccc;
  overflow: hidden;
}
.opara-pannel {
  position: absolute;
  right: 15px;
  top: 100px;
  width: 200px;
  height: 400px;
  background: rgba(0, 0, 0, 0.7);
  div,
  p {
    color: #fff;
  }
}
.modelsBox {
  position: relative;
  overflow: hidden;
}
div[id*="sign"] {
  width: 250px;
  height: 100px;
  padding: 10px 10px 10px 70px;
  background: rgba(0, 0, 0, 0.65);
  background: url("~assets/label-bg.png") center center no-repeat;
  .sign {
    div {
      color: #fff;
      text-align: left;
      padding: 0 5px;
    }
  }
}
</style>