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

import * as THREE from "three";
import TextLabel from "./object/TextLabel";
import SimpleLabel from "./object/SimpleLabel";
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, total) {
    super();
    this.manager = manager;
    this.name = "horizontal_box";
    this.total = total;
    this.getStyle();
    this.load(data, index);
  }
  getStyle() {
    this.width = 2;
    this.height = (2 * 710) / 500;
    this.color = 0xffffff;
  }
  cover(texture, aspect) {
    var imageAspect = texture.image.width / texture.image.height;

    if (aspect < imageAspect) {
      texture.matrix.setUvTransform(0, 0, aspect / imageAspect, 1, 0, 0.5, 0.5);
    } else {
      texture.matrix.setUvTransform(0, 0, 1, imageAspect / aspect, 0, 0.5, 0.5);
    }
  }
  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 - 1.8;

    const matLine = new LineMaterial({
      color: 0xe44d54,
      linewidth: 4, // 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) => {
        let imgRatio = texture.image.width / texture.image.height;
        texture.matrixAutoUpdate = false;
        let planeRatio = 1.5 / 0.85;
        // let ratio = planeRatio / imgRatio;
        texture.matrixAutoUpdate = false;
        if (planeRatio < imgRatio) {
          texture.matrix.setUvTransform(
            0,
            0,
            planeRatio / imgRatio,
            1,
            0,
            0.5,
            0.5
          );
        } else {
          texture.matrix.setUvTransform(
            0,
            0,
            1,
            imgRatio / planeRatio,
            0,
            0.5,
            0.5
          );
        }
        // texture.wrapS = THREE.RepeatWrapping;
        // texture.wrapS = THREE.RepeatWrapping;
        // texture.wrapT = THREE.ClampToEdgeWrapping;
        // texture.repeat.x = ratio;
        // texture.offset.x = 0.5 * (1 - ratio);
        // console.log("texture", texture);
        texture.colorSpace = THREE.SRGBColorSpace;

        img = new ImgLabel(texture, matLine);

        img.userData = i.id;
        img.position.y += 1;
        if (j === 0) {
          img.position.z -= 0.8;
        } else {
          img.position.z += 0.43;
        }
        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;
      });
    });
    //页脚
    const f_txt_label = ` 第 ${index + 1} 页  共 ${this.total} 页`;
    const footlabel = new SimpleLabel(f_txt_label, true);
    footlabel.renderOrder = 100;
    footlabel.position.z += 1.26;

    this.add(footlabel);
  }
}