public-fuse/src/core/box/HorizontalBox.js

import * as THREE from "three";
import TextLabel from "./object/TextLabel";
import ImgLabel from "./object/ImgLabel";
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';

export default class HorizontalBox extends THREE.Group {
  constructor(manager, data, index) {
    super()
    this.manager = manager
    this.name = 'horizontal_box'
    this.getStyle()
    this.load(data, index)
  }
  getStyle() {
    this.width = 2
    this.height = 2 * 710/500 
    this.color = 0xffffff
  }

  load(data, index) {
    //box
    const geometry = new THREE.PlaneGeometry(1,1)
    geometry.rotateX(-Math.PI / 2)

    const bm = new THREE.MeshBasicMaterial({
      color: this.color
    })

    const box = new THREE.Mesh(geometry, bm)
    box.scale.set(this.width, 1, this.height)

    this.add(box)
    this.position.x = (this.width + 0.125) * index


    const matLine = new LineMaterial( {
      color: 0x26559b,
      linewidth: 3, // in world units with size attenuation, pixels otherwise
      dashed: false,
      alphaToCoverage: true,
    });
    matLine.resolution = new THREE.Vector2(this.manager.scene.width, this.manager.scene.height)
    //content 
    data.forEach((i, j) => {
      //img
      let img
      this.manager.loader.load(i.imgUrl, (texture) => {
        texture.colorSpace = THREE.SRGBColorSpace
        img = new ImgLabel(texture, matLine)
        img.position.y += 1
        if(j === 0) {
          img.position.z -= 0.8
        } else {
          img.position.z += 0.5
        }
        this.add(img)
        this.manager.imgList.push(img)
        const textlabel = new TextLabel(i.imgInfo, true)
        this.add(textlabel)
        textlabel.position.copy(img.position)
        textlabel.position.z += textlabel.scale.z * 0.5 + 0.1
      })
    });
  }
}