​
整理一些发光的方法,使用的自己封装的组件进行加载，有需要可以看看这篇文章vue中使用three.js加载各种模型文件（obj,mtl,fbx…）(封装

1.点精灵材质加贴图进行发光（图片在最后，大家可以试试）

<script>
export default {
  methods: {
    // 初始化模型
    initLoader() {
      var geometry = new THREE.SphereGeometry(30, 32, 16);
      var material = new THREE.MeshLambertMaterial({ color: 0xffff00 });
      var mesh = new THREE.Mesh(geometry, material);
      this.$refs.draw.scene.add(mesh);
      var textureLoader = new THREE.TextureLoader();
      // 加载贴图
      var texture = textureLoader.load("/static/round.png");
      // 点精灵材质
      var spriteMaterial = new THREE.SpriteMaterial({
        map: texture,//贴图
        color: 0xffff00,
        blending: THREE.AdditiveBlending,//在使用此材质显示对象时要使用何种混合。加法
      });
      var sprite = new THREE.Sprite(spriteMaterial);
      // 发光范围
      sprite.scale.set(100, 100, 1.0);
      mesh.add(sprite);
    },
  },
};
</script>

显示出来的结果是这样

​​

2.着色器材质进行发光（GLSL着色器）

<script>
export default {
  methods: {
    // 初始化模型
    initLoader() {
      // 生成球体
      var sphereGeom = new THREE.SphereGeometry(100, 32, 16);
      // 基础网格材质
      var textureLoader = new THREE.TextureLoader();
      // 加载贴图
      var texture = textureLoader.load("/static/round.png");
      var moonMaterial = new THREE.MeshBasicMaterial({
        map: texture,
        color: 0xffffff,
      });
      //把球体添加到场景
      var moon = new THREE.Mesh(sphereGeom, moonMaterial);
      this.$refs.draw.scene.add(moon);
      // 着色器材质(Uniforms 是 GLSL 着色器中的全局变量。
      var customMaterial = new THREE.ShaderMaterial({
        uniforms: {
          c: { type: "f", value: 1.0 },
          p: { type: "f", value: 1.4 },
          glowColor: { type: "c", value: new THREE.Color(0xffff00) },
          viewVector: { type: "v3", value: { x: 0, y: 100, z: 400 } },
        },
        // 顶点着色器
        vertexShader: `
          uniform vec3 viewVector;
          uniform float c;
          uniform float p;
          varying float intensity;
          void main() {
            vec3 vNormal = normalize( normalMatrix * normal);
            vec3 vNormel = normalize( normalMatrix * viewVector);
            intensity = pow( c - dot(vNormal, vNormel), p );
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0);
          }
            `,
        // 片段着色器
        fragmentShader: `
          uniform vec3 glowColor;
          varying float intensity;
          void main() 
          {
          	vec3 glow = glowColor * intensity;
            gl_FragColor = vec4( glow, 1.0 );
          }
        `,
        side: THREE.FrontSide,
        transparent: true,
        blending: THREE.AdditiveBlending, //在使用此材质显示对象时要使用何种混合。加法
      });
      var moonGlow = new THREE.Mesh(sphereGeom.clone(), customMaterial.clone());
      moonGlow.name = "moonGlow";
      // 放大1.2倍
      moonGlow.scale.multiplyScalar(1.2);
      // 加入中
      this.$refs.draw.scene.add(moonGlow);
    },
  },
};
</script>

我们还需要在渲染中添加这个（这是为了让相机动的时候发光层总是固定视角）

// 执行渲染操作
animation() {
 //执行渲染操作
 this.renderer.render(this.scene, this.camera);
 requestAnimationFrame(this.animation);
 this.scene.children.forEach((item) => {
    if (item.name === "moonGlow") {
      item.material.uniforms.viewVector.value =
      new THREE.Vector3().subVectors(this.camera.position, item.position);
    }
 });
},

显示出来的结果是这样（这个贴图没啥用处，就是为了好看）

​

3.使用UnrealBloomPass（后期）高亮

<script>
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
export default {
  methods: {
    // 初始化模型
    initLoader() {
      var renderScene = new RenderPass(
        this.$refs.draw.scene,
        this.$refs.draw.camera
      );
      var bloomPass = new UnrealBloomPass(
        new THREE.Vector2(window.innerWidth, window.innerHeight),
        1.5,
        0.4,
        0.85
      );
      bloomPass.threshold = 0;
      bloomPass.strength = 1.5;
      bloomPass.radius = 0;
      this.composer = new EffectComposer(this.$refs.draw.renderer);
      this.composer.addPass(renderScene);
      this.composer.addPass(bloomPass);
        let box = new THREE.CylinderGeometry(5, 5, 5);
      let mail = new THREE.MeshBasicMaterial({
        color:0x00ff00
      });
      let mesh = new THREE.Mesh(box, mail);
      // 加入中
      this.$refs.draw.scene.add(mesh);
    },
  },
};
</script>

还需要在渲染的时候执行这一步

// 执行渲染操作
    animation() {
      //执行渲染操作
      this.renderer.render(this.scene, this.camera);
      requestAnimationFrame(this.animation);
      
      this.$parent.composer.render();
    },

显示出来的结果是这样

你可能需要使用的图片

就是这样，下班！！！