How can I must down texture img next line

Questions
,
1

what I should use to down texture next side line down and other side line down
here my code

Annotation 2021-11-10 133621
Annotation 2021-11-10 133621587×513 83 KB

WIN_20211110_13_48_06_Pro
WIN_20211110_13_48_06_Pro1280×720 133 KB 

// three.js example - hiding walls based on camera position
import * as THREE from '../three.js/build/three.module.js';
import { OrbitControls } from '../three.js/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from '../three.js/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from '../three.js/examples/jsm/loaders/RGBELoader.js';
import { RoomEnvironment } from '../three.js/examples/jsm/environments/RoomEnvironment.js';
import { GUI } from '../three.js/examples/jsm/libs/dat.gui.module.js'

var renderer, scene, camera, controls;
var raycaster, mouse;
 const gui = new GUI()
let container;

init()
animate()


function init() {

    // scene
    scene = new THREE.Scene();

    // camera
    camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 30);
    scene.add(camera);

///GUI Cmera look ol.js
    container = document.createElement('div');
    document.body.appendChild(container);

    // renderer
    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, preserveDrawingBuffer: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    renderer.setClearColor(0x889988);
    renderer.physicallyCorrectLights = true;
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 2;
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.VSMShadowMap;
    renderer.outputEncoding = THREE.sRGBEncoding;

    renderer.domElement.style.touchAction = 'none';
    renderer.domElement.addEventListener('click', onClick, false);

    window.addEventListener('resize', function () {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }, false);

    document.body.appendChild(renderer.domElement);

    var strDownloadMime = "image/octet-stream";

    document.getElementById("shot").addEventListener('click', saveAsImage);


    function saveAsImage() {
        var imgData, imgNode;

        try {
            var strMime = "image/jpeg";
            imgData = renderer.domElement.toDataURL(strMime);

            saveFile(imgData.replace(strMime, strDownloadMime), "OmidWall.jpg");

        } catch (e) {
            console.log(e);
            return;
        }

    }

    var saveFile = function (strData, filename) {
        var link = document.createElement('a');
        if (typeof link.download === 'string') {
            document.body.appendChild(link); //Firefox requires the link to be in the body
            link.download = filename;
            link.href = strData;
            link.click();
            document.body.removeChild(link); //remove the link when done
        } else {
            location.replace(uri);
        }
    }

    //environment

    const pmremGenerator = new THREE.PMREMGenerator(renderer);
    pmremGenerator.compileEquirectangularShader();

    const rgbeLoader = new RGBELoader();
    rgbeLoader.load('modules/autoshop_01_4k.hdr', function (texture) {

        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
        scene.environment = envMap;

        //   const env= new RoomEnvironment();

        //   scene.environment = pmremGenerator.fromScene(envMap).texture;

        texture.dispose();
        pmremGenerator.dispose();


        MenuCLickListener();
    });

    function MenuCLickListener() {
        $(".obj").click(function () {
            changeGltfLoader(`modules/klassik/${$(this).attr('data-name')}.gltf`, 1);
            $.LoadingOverlay("show", {
                background:'#889988',
                image : `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><circle r="80" cx="500" cy="90"/><circle r="80" cx="500" cy="910"/><circle r="80" cx="90" cy="500"/><circle r="80" cx="910" cy="500"/><circle r="80" cx="212" cy="212"/><circle r="80" cx="788" cy="212"/><circle r="80" cx="212" cy="788"/><circle r="80" cx="788" cy="788"/></svg>`,
                imageColor:'red',
            });
            
            // Hide it after 3 seconds
            setTimeout(function(){
                $.LoadingOverlay("hide");
            }, 3000);
        });
    }

    var currentGLTFObject;
    function changeGltfLoader(path, scale) {

        if (currentGLTFObject != null) {
            console.log(currentGLTFObject);
            scene.remove(currentGLTFObject)
        }
        new GLTFLoader().load(path, function (gltf) {
            currentGLTFObject = gltf.scene;
            gltf.scene.scale.set(scale, scale, scale);
            gltf.scene.traverse((child) => {
                if (child instanceof THREE.Mesh) {


                }
            });

            scene.add(gltf.scene);
        })

    }
    changeGltfLoader('modules/klassik/kd.gltf', 1)

    // controls
    controls = new OrbitControls(camera, renderer.domElement);

    controls.mouseButtons = {
        LEFT: THREE.MOUSE.ROTATE,
        MIDDLE: THREE.MOUSE.DOLLY,
        // RIGHT: THREE.MOUSE.PAN
    }
    controls.target.set(15, 110, 0);

    controls.enabled = true;
    controls.enableZoom = false;
    controls.enablePan = true;
    controls.maxPolarAngle = Math.PI / 2;
    controls.enableDamping = true
    controls.screenSpacePanning = true

    //Light

    var ambientLight = new THREE.AmbientLight(0x9393c1, 0, 100);
    ambientLight.position.set(30, -10, 30);
    scene.add(ambientLight);

    const hemisphereLight = new THREE.HemisphereLight(0xe5e5da, 0x080820, 1);
    scene.add(hemisphereLight);

    const directionalLight = new THREE.DirectionalLight(0xa58e8e, 1);
    scene.add(directionalLight);

    //    class ColorGUIHelper {
    //     constructor(object, prop) {
    //       this.object = object;
    //       this.prop = prop;
    //     }
    //     get value() {
    //       return `#${this.object[this.prop].getHexString()}`;
    //     }
    //     set value(hexString) {
    //       this.object[this.prop].set(hexString);
    //     }
    //   }

    //  gui.addColor(new ColorGUIHelper(ambientLight, 'color'), 'value').name('ambientlight');
    // gui.add(ambientLight, 'intensity', 0, 10, 0.01);

    // gui.addColor(new ColorGUIHelper(directionalLight, 'color'), 'value').name('directionalLight');
    // gui.add(directionalLight, 'intensity', 0, 10, 0.01);

    // gui.addColor(new ColorGUIHelper(hemisphereLight, 'color'), 'value').name('hemisphereLight');
    // gui.add(hemisphereLight, 'intensity', 0, 10, 0.01);


    //TextureImgChange

    function TextureImgChange(img, offsetX, offsetY, repeatX, repeatY) {
        let TextureLoader = new THREE.TextureLoader()
        return TextureLoader.load(img,
            function (texture) {
                texture.wrapS =  texture.wrapT = THREE.RepeatWrapping;
                texture.repeat.set(repeatX, repeatY);
                texture.offset.set(offsetX, offsetY);
                texture.needsUpdate = true;
              

                // texture.magFilter= THREE.NearestFilter

                //  texture.rotation=Math.PI / 4 
                //  texture.center.x=0.5
                //  texture.center.y=0.5

              //  texture.mapping= THREE.RepeatWrapping;


            })

           
    }

  


    //if you whant see  GUI Texture look old.js in 108

    raycaster = new THREE.Raycaster();
    mouse = new THREE.Vector2();
    var materialSelected;
    var materialSelectedName

    function onClick(event) {

        event.preventDefault();

        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

        raycaster.setFromCamera(mouse, camera);

        var intersects = raycaster.intersectObjects(scene.children, true);

        if (intersects.length > 0) {
            let drag = false;
            let show = document.querySelector('.seleced');
            let showText = document.querySelector('.show-text');

            var clickedName = intersects[0].object.name;
            console.log('You clicked: ' + clickedName);


            $(document).dblclick(() => {
                drag = false
                $('.seleced').css("display", "block")
                $('.show-text').css("display", "none")

               
            });

            $(document).mousemove(() => {
                $('html,body').css('cursor', 'pointer');
            });

            $('.rem').click(() => {
                $('.show-text').css("display", 'block');
                $('.seleced').css("display", 'none')
            })

            materialSelected = intersects[0].object.material;
            materialSelectedName = intersects[0].object.name;


            MenuCLickTexture()
            let red

    
            function MenuCLickTexture() {
                $(".changeTexture").click(function () {
                     red = TextureImgChange(`modules/OMID/textures/${$(this).attr('data-name')}.jpg`, $(this).attr('data-offset-x'), $(this).attr('data-offset-y'), $(this).attr('data-repeat-x'),  $(this).attr('data-repeat-y'));
                
                   
                    if (materialSelectedName == "Classic_Hall_Wall" || materialSelectedName == "Classic_GR_Wall" || materialSelectedName == "Classic_BR_Wall" || materialSelectedName == "Classic_Kitchen_Wall") {
                       
                    materialSelected.map = red;

                    // gui.add(red.repeat, 'x', 0, 100, .01).name('texture.repeat.x');
                    // gui.add(red.repeat, 'y', 0, 100, .01).name('texture.repeat.y');
                    //  gui.add(red.offset, 'x', -2, 2, .01).name('texture.offset.x');
                    //  gui.add(red.offset, 'y', -2, 2, .01).name('texture.offset.y');
                    //  gui.add(red.center, 'x', -.5, 1.5, .01).name('texture.center.x');
                    //  gui.add(red.center, 'y', -.5, 1.5, .01).name('texture.center.y');
                    //  gui.add(red.mapping, 'y', -.5, 1.5, .01).name('texture.mapping.y');

                     
                        
                    } else {
                        materialSelected.map = null;
                    }
                });
            }
            
           

            //if you whant see other side look old.js
        }
    }

    
         
  
    setTimeout(function () {
        $('.select-mouse').addClass('d-none');
    }, 3000);
}

function animate() {
    requestAnimationFrame(animate);
    controls.update();

    renderer.render(scene, camera);
}
2

Please improve the description of your post since it is not clear what you are asking for.