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();
}