Three.js 给对象创建轮廓效果

需求：

1、选定某个对象后，给该对象一个整体轮廓效果。

需求插件：Three.js ，postprocessing，vue2

实现方案：

以前还是需要自己写的、现在可以直接用插件了，就是上面这个postprocessing插件，使用也蛮简单的，初始化好插件后、在需要使用的地方这样写就行

this.outlinePass.selectedObjects = [Now_Mesh];
// 可以用在蛮多地方，如鼠标移入，选中模型，提示选择等。

 

 

代码：

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 * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import TWEEN from "tween.js/src/Tween.js";
import { Mesh, WebGLRenderer } from "three";


export default {

methods: {

initComposer() {
      // 初始化轮廓渲染器
      this.composer = new EffectComposer(this.renderer);
      this.composer.addPass(new RenderPass(this.scene, this.camera));

      this.outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), this.scene, this.camera);
      this.composer.addPass(this.outlinePass);

      this.effectFXAA = new ShaderPass(FXAAShader);
      this.effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
      this.composer.addPass(this.effectFXAA);

      // 设置轮廓发光效果参数
      this.outlinePass.edgeStrength = 3.0; // 轮廓强度
      this.outlinePass.edgeGlow = 1.0; // 轮廓发光强度
      this.outlinePass.edgeThickness = 2.0; // 轮廓厚度
      this.outlinePass.pulsePeriod = 0; // 脉冲周期
      this.outlinePass.visibleEdgeColor.set('#e64712'); // 可见边缘颜色
      this.outlinePass.hiddenEdgeColor.set('#190a05'); // 隐藏边缘颜色

    },

init() {
    // 场景初始化
      this.scene = new THREE.Scene();
      //   this.scene.background = new THREE.Color("widte");
      //   this.scene.background = new THREE.TextureLoader().load( require("@/assets/background.png") );
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.renderer.setClearAlpha(0.01);
      document
        .getElementById("container")
        .appendChild(this.renderer.domElement);

      this.camera = new THREE.PerspectiveCamera(
        85,
        window.innerWidth / window.innerHeight,
        0.1,
        20000
      );
      this.camera.position.set(-84, 141, 172);
      this.scene.add(this.camera);

      this.orbitControls = new OrbitControls(
        this.camera,
        this.renderer.domElement
      );
      this.orbitControls.enableZoom = true;
      this.orbitControls.maxDistance = 1000; //场景推进
      this.orbitControls.minDistance = 1;
      this.orbitControls.addEventListener("change", this.render);
    },

    render() {
      // 场景渲染器
      this.renderer.render(this.scene, this.camera);
      this.labelRenderer.render(this.scene, this.camera);
      this.composer.render();
      // TWEEN.update();
      // this.update();
    },
    initialize() {
      // if (this.scene) this.removescene();
      this.scene = null;
      this.camera = null;
      this.orbitControls = null;
    },
    perform() {
      this.initialize();
      this.init();
      this.initComposer();
this.render();
    },

},
mounted(){
    this.perform()
}
}