Switching to 3D to 2D gives me a white/blank face filter, can't seem to figure out how to avoid that, using material
to hide the 2d Filter when I want the 3d filter to be shown and remove the material
property, and change it to material-resource for it to show the 2d Filter
const handlePrev = () => {
const prevIndex = (currentIndex - 1 + filters.length) % filters.length
setCurrentIndex(prevIndex)
const model = document.getElementById('model')
const faceMeshElement = document.querySelector('xrextras-face-mesh')
if (filters[prevIndex].type === '2d'){
// Hide 3D Model
model.setAttribute('visible', 'false')
// Change the 2D Model Filter
faceMeshElement.removeAttribute('material')
faceMeshElement.setAttribute('material-resource', filters[prevIndex].resource)
} else {
// Hide 2D Model
faceMeshElement.setAttribute('material', 'visible: false;')
// Show 3D Model
model.setAttribute('visible', 'true')
}
}