I want to build an app where you can customize Shoe parts color,texture etc…
So I use raycasting to find individual mesh part on a model that i downloaded and with OutlinePass I highlight them.
My issue is the Performance with EffectComposer and OutlinePass.
When I change from renderer.render(scene,camera) to composer.render(),the performance noticiably drop and when I use the outlinePass by clicking on the meshes its even worse.
Tried anything I could find to fix it but nothing worked.
I tried everything Ideas why r116 may cause outline pass to affect performance? here and tried to decrease the amount of meshes for the Raycaster to intersect but nothing changed.
Any help appreciated!
import {OrbitControls} from ‘/three/examples/jsm/controls/OrbitControls.js’;
import {GLTFLoader} from ‘/three/examples/jsm/loaders/GLTFLoader.js’;
import * as THREE from ‘/three/build/three.module.js’;
import { EffectComposer } from ‘/three/examples/jsm/postprocessing/EffectComposer.js’;
import { RenderPass } from "/three/examples/jsm/postprocessing/RenderPass.js"
import { OutlinePass } from “/three/examples/jsm/postprocessing/OutlinePass.js”;
import { DRACOLoader } from “/three/examples/jsm/loaders/DRACOLoader.js”;
let conta= document.querySelector("#cont");
let scene = new THREE.Scene();
let camera= new THREE.PerspectiveCamera(80,conta.clientWidth/conta.clientHeight,0.1,1000);
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
let control = new OrbitControls(camera,renderer.domElement);
let light = new THREE.AmbientLight(0xffffff,10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(conta.clientWidth,conta.clientHeight);
scene.background= new THREE.Color(“0x00ff00”);
conta.appendChild(renderer.domElement);
let manager = new THREE.LoadingManager();
let shoeNames;
manager.onLoad =() =>{
** scene.traverse((sho)=>{**
** if(sho.type =“Object3D” && sho.name == “Plane050”){**
** console.log(sho);**
** shoeNames = sho;**
** }**
** })**
};
let dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("/three/examples/js/libs/draco");
let loader = new GLTFLoader(manager);
loader.setDRACOLoader(dracoLoader);
let composer = new EffectComposer(renderer);
let renderPass = new RenderPass(scene,camera);
composer.addPass(renderPass);
let outlinePass = new OutlinePass(new THREE.Vector2( conta.clientWidth, conta.clientHeight ), scene, camera);
outlinePass.renderToScreen = true;
composer.addPass(outlinePass);
scene.add(light);
let shoes;
** loader.load("…/shooes.gltf",(gltf)=>{**
** //gltf.scene.children[0].rotation.x=180;**
** shoes = gltf.scene;**
** scene.add(gltf.scene); **
** });**
** //sho.material = new THREE.MeshBasicMaterial({color:0x00ff00}); // Changing color of shoes**
** //Merge > Verticise > By Distance**
**camera.position.z =300; **
**camera.position.y =100; **
camera.position.x=-300;
console.log(scene.children);
function animate(){
** requestAnimationFrame(animate);**
** control.update();**
** composer.render();**
}
animate();
window.addEventListener(“resize”,()=>{
** camera.aspect = conta.clientWidth/conta.clientHeight;**
** camera.updateProjectionMatrix();**
** renderer.setSize(conta.clientWidth,conta.clientHeight);**
},false);
function mouseEvent(e){
** mouse.x=(e.clientX/window.innerWidth)2-1;*
** mouse.y=-(e.clientY/window.innerHeight)2+1;*
** raycaster.setFromCamera(mouse,camera);**
** let intersect = raycaster.intersectObjects(shoeNames.children);**
** if(intersect.length > 0){**
** let zero = intersect[0].object;**
** outlinePass.selectedObjects =[zero];**
** //let parent = zero.parent;**
** // parent.remove(zero); //WAY to remove parts of an object,THANKS MATE**
** }**
** else{**
** outlinePass.selectedObjects=[];**
** }**
}
window.addEventListener(“click”,mouseEvent);