Apply CSS class to image in texture / Applying Post Processing 3DLUT to specific mesh

Questions
, ,
1

Hi, I’m trying to apply a filter (invert(100%) to image in my mesh using Texture. If I do the same in html, it works fine, but in threejs the render doesn’t apply the style to the image.

My question is: Is it possible to apply a CSS class to the image in threejs, using texture?

Example:
const image = new Image();
image.src = imageContent;
image.style.filter = “invert(100%)”;

const texture = new THREE.Texture();
const geometry = new THREE.PlaneGeometry(20, 20);

 image.onload = () => {

  texture.needsUpdate = true;
  texture.image = image;
  const material =  new THREE.MeshBasicMaterial({ map: texture});
  const mesh = new THREE.Mesh(geometry, material);

  this.scene.add(mesh);

};

I also read about post processing 3DLUT in Three.js Post Processing 3DLUT and there is an inverse example. I tried to apply the same solution to my example, but I couldn’t isolate my image, it applies to the whole scenario.

Question: is it possible to apply post processing 3DLUT to specific mesh(image) ?

Thank you

2

CSS doesn’t change the content of the targeted image.
Try Canvas_2D_Context with 3JS Canvas Texture.

1 Like
4

@ rrrr_rrrr Hello, thank you so much for the idea, the filter is working as expected. I just I need to fix the resolution.

thank you.

1 Like