public-fuse/src/core/box/object/ImgLabelBox.js

import * as THREE from "three";
import { TriangleBlurShader } from "three/addons/shaders/TriangleBlurShader.js";
import TouchEdge from "./TouchEdge";

function makeTriangleBlurShader(iterations = 10) {
  // Remove texture, because texture is a reserved word in WebGL 2
  const { texture, ...uniforms } = TriangleBlurShader.uniforms;

  const TriangleBlurShader2 = {
    ...TriangleBlurShader,

    name: "TriangleBlurShader2",

    uniforms: {
      ...uniforms,

      // Replace texture with blurTexture for WebGL 2
      blurTexture: { value: null },
    },
  };

  // Replace texture with blurTexture for WebGL 2
  TriangleBlurShader2.fragmentShader =
    TriangleBlurShader2.fragmentShader.replace(
      "uniform sampler2D texture;",
      "uniform sampler2D blurTexture;"
    );
  TriangleBlurShader2.fragmentShader =
    TriangleBlurShader2.fragmentShader.replace(
      "texture2D( texture",
      "texture2D( blurTexture"
    );

  // Make iterations configurable.
  TriangleBlurShader2.fragmentShader =
    TriangleBlurShader2.fragmentShader.replace(
      "#define ITERATIONS 10.0",
      "#define ITERATIONS " + iterations + ".0"
    );

  console.log("shader:", TriangleBlurShader2.fragmentShader);

  return TriangleBlurShader2;
}

export default class ImgLabel extends THREE.Mesh {
  constructor(texture, matLine, isHorizontal = true) {
    let width, height, p;
    if (isHorizontal) {
      width = 1.5;
      height = 0.85;
      p = [
        [-0.75, 0, -0.425, 0.75, 0, -0.425],
        [-0.75, 0, -0.425, -0.75, 0, 0.425],
        [-0.75, 0, 0.425, 0.75, 0, 0.425],
        [0.75, 0, 0.425, 0.75, 0, -0.425],
      ];
    } else {
      width = 1.5;
      height = 2;
      p = [
        [-0.75, 0, -1, 0.75, 0, -1],
        [-0.75, 0, -1, -0.75, 0, 1],
        [-0.75, 0, 1, 0.75, 0, 1],
        [0.75, 0, 1, 0.75, 0, -1],
      ];
    }
    const g = new THREE.PlaneGeometry(width, height);
    g.rotateX(-Math.PI / 2);

    // const m = new THREE.MeshBasicMaterial({
    //   map: texture,
    //   transparent: true,
    // });

    // const shader = makeTriangleBlurShader(12);

    // const blurMaterial = new THREE.ShaderMaterial({
    //   vertexShader: shader.vertexShader,
    //   fragmentShader: shader.fragmentShader,
    //   uniforms: THREE.UniformsUtils.clone(shader.uniforms),
    // });
    // // console.log("blurMaterial", blurMaterial.uniforms);
    // blurMaterial.uniforms.blurTexture.value = texture;
    // blurMaterial.uniforms.delta.value = new THREE.Vector2(0.5, 0.9);

    const bg = new THREE.MeshBasicMaterial({
      color: 0xf2f2f2,
      transparent: false,
    });

    super(g, bg);

    let imgRatio = texture.image.width / texture.image.height;
    const imgHeight = width / imgRatio >= 2 ? 2 : width / imgRatio;
    const imageG = new THREE.PlaneGeometry(width, imgHeight);

    imageG.rotateX(-Math.PI / 2);

    const im = new THREE.MeshBasicMaterial({
      map: texture,
      transparent: false,
    });
    const imageMesh = new THREE.Mesh(imageG, im);

    imageMesh.renderOrder = 10;
    this.add(imageMesh);

    this.width = width;
    this.height = height;
    this.touchLines = new TouchEdge(p, matLine);

    this.touchLines.position.y += 0.5;
    this.add(this.touchLines);
    // this.touchLines.children.forEach((child) => (child.visible = true));
    this.name = "imglabel";
  }
}