feat(draw): update

src/core/box/HorizontalBox.js

@@ -43,7 +43,6 @@ export default class HorizontalBox extends THREE.Group {
     this.add(box);
     this.position.x = (this.width + 0.125) * index - 1.8;
 
-
     const matLine = new LineMaterial({
       color: 0xe44d54,
       linewidth: 3, // in world units with size attenuation, pixels otherwise
@@ -60,15 +59,39 @@ export default class HorizontalBox extends THREE.Group {
       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.repeat.x = ratio;
-        texture.offset.x = 0.5 * (1 - ratio);
-
+        // 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;

src/core/box/VerticalBox.js

@@ -51,10 +51,32 @@ export default class VerticalBox extends THREE.Group {
       this.manager.loader.load(i.imgUrl, (texture) => {
         let imgRatio = texture.image.width / texture.image.height;
         let planeRatio = 1.5 / 2;
-        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
+          );
+        }
+        // let ratio = planeRatio / imgRatio;
 
-        texture.repeat.x = ratio;
-        texture.offset.x = 0.5 * (1 - ratio);
+        // texture.repeat.x = ratio;
+        // texture.offset.x = 0.5 * (1 - ratio);
 
         texture.colorSpace = THREE.SRGBColorSpace;
         img = new ImgLabel(texture, matLine, false);