three.js模型外发光

three.js模型选择描边

先看一下three.js中鼠标是如果选取目标模型元素的-点击与交互。

光线投射Raycaster

    methods:{
    
    
        getSelectCube(event){
    
    
        	let raycaster = new THREE.Raycaster();
            let mouse = new THREE.Vector2();
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
            raycaster.setFromCamera( mouse, camera );
            let intersects = raycaster.intersectObjects(this.scene.children);
            for(let i=0;i<intersects.length;i++){
    
    
                intersects[i].object.material.color.set(0xff0000);
            }
        },
        
    },
    mounted(){
    
    
        window.addEventListener('mousemove',this.getSelectCube(e),false);
    }    

选择描边

import {
    
    EffectComposer} from ...
import {
    
    EffRenderPass} from ...
import {
    
    OutlinePass} from ...
import {
    
    TWEEN} from ...
import {
    
    ShaderPass} from ...
import {
    
    FXAAShader} from ...
import {
    
    GLTFLoader} from ...

data(){
    
    
    reutrn {
    
    
        composer:null,
        outlinePass:null,
        moveSelectedObj:null,
        selectedObjects : [],
    }
},
methods:{
    
    
	init(){
    
    
        //描边
        this.composer = new EffectComposer(this.renderer);
        let renderPass = new RenderPass(this.scene,this.camera);
        this.composer.addPass(renderPass);
        this.outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth,window.innerHeight),this.scene,this.camera);
        this.composer.addPass(this.outlinePass);
        this.outlinePass,visibleEdgeColor.set('#3042fc');
        this.outlinePass.edgeStrength = 4;
        this.outlinePass.edgeGlow = 0;
        this.outlinePass.edgeThickness = 1.6;
        this.outlinePass.pulsePeriod = 0;
        
        // 抗锯齿
        let effectFXAA = new ShaderPass(FXAAShader);
        effectFXAA.uniforms['resolution'].value.set(1/window.innerWidth,1/window.innerHeight);
        composer.addPass(FXAAShaderPass);
    },
    getSelectModel(event){
    
    
     	let raycaster = new THREE.Raycaster();
        let mouse = new THREE.Vector2();
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
        raycaster.setFromCamera( mouse, camera );
        let intersects = raycaster.intersectObjects(this.scene.children);
        for(let i=0;i<intersects.length;i++){
    
    
            intersects[i].object.material.color.set(0xff0000);
        }
        return intersects;
    },
    addSelectedObject(obj){
    
    
	    this.selectedObjects = [];
	    this.selectedObjects.push(obj);
    },
    mouseMoveEvent(e){
    
    
        let moveIntersects;
        this.outlinePass.edgeStrength = 4;
        this.outlinePass.edgeGlow = 0;
        this.outlinePass.edgeThickness = 1.6;
        this.outlinePass.pulsePeriod = 0;
        moveIntersects = this.getSelectModel(e);
        if(moveIntersects && moveIntersects.length>0){
    
    
    	    this.moveSelectedObj = moveIntersects[0].object;
    	    this.addSelectedObject(this.moveSelectedObj);
    	    this.outlinePass.selectedObjects = this.selectedObjects;
        }
    },
    animate(){
    
    
        this.controls.undate();
        TWEEN.update();
        requestAnimationFrame(this.animate);
        // this.renderer.render(this.scene, this.camera);
        this.composer.render();
    }
},
mounted(){
    
    
    this.init();
    this.animate();
}