我想将此垂直图像滑块更改为水平

如何解决我想将此垂直图像滑块更改为水平

这是当前的垂直图像滑块URL。 current vertical image slider URL.

我想将滑块方向更改为水平。

这些是我的代码。

正确的view.js

import { View } from './view.js'

class SliderAnimator {

    // Ramon: Frame count of animation
    static MAX_COUNT = 50

    constructor(view) {

        this.view = view
        this.running = false
        this.view.plane.children[0].material.uniforms.hidden.value = false
    }

    update() {

        if (this.running) {
            this.stepCount++

            this.view.divider = this.from + (this.to - this.from) /
                SliderAnimator.MAX_COUNT * this.stepCount
            // this.view.plane.children[0].material.uniforms.divider.value = this.view.divider
            // this.view.plane.children[0].material.uniforms.hidden.value = false

            if (this.stepCount == SliderAnimator.MAX_COUNT) {
                this.running = false
                // this.view.plane.children[0].material.uniforms.hidden.value = true
            }
        }

    }

}


export class TopRightView extends View {

    static DIVIDER_THRESHOLD = 30

    async init() {

        await super.init()

        let textureLoader = new THREE.TextureLoader()

        let texture0 = textureLoader.setPath('./images/jpeg/').load(param.JPEG_FILES[this.id])
        let texture1 = textureLoader.setPath('./images/jpeg/').load(param.JPEG_FILES[4])

        this.plane.children[0].material = new THREE.ShaderMaterial({
            uniforms: {
                divider: { value: 0 },hidden: {value: true },zoomFactor: { value: 1.0 },tex0: { type: "t",value: texture0 },tex1: { type: "t",value: texture1 }
            },vertexShader: this.vertexShader(),fragmentShader: this.fragmentShader()
        })

        // this.divider = this.planeWidth / 2
        this.divider = 0
        this.plane.children[0].material.uniforms.divider.value = this.divider
        // this.plane.children[0].material.uniforms.divider.value = 1.3333
        this.dividerMoving = false
        this.snappable = false

        this.sliderAnimator = new SliderAnimator(this)

    }

    vertexShader() {

        return `
            varying vec2 vUv;
            varying vec3 vPosition;

            void main() {
                vUv = uv;
                vPosition = position;
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
            }   
        `

    }

    fragmentShader() {

        return `
            varying vec2 vUv;
            varying vec3 vPosition;

            uniform sampler2D tex0;
            uniform sampler2D tex1;
            uniform float divider;
            uniform float zoomFactor;
            uniform bool hidden;

            void main() {
                float dividerWidth;
                if (hidden) {
                    dividerWidth = 0.0;
                } else {
                    dividerWidth = 0.03 / zoomFactor;
                }

                if (vPosition.x > divider + dividerWidth) {
                    gl_FragColor = texture2D(tex1,vUv);
                } else if (vPosition.x < divider - dividerWidth) {
                    gl_FragColor = texture2D(tex0,vUv);
                } else {
                    gl_FragColor = vec4(0.5,0.5,1.0,1.0);
                }

            }
        `
    }

}

views.js

import { SVGPlane } from './svg-plane.js';


export class View {

    static DRAG_TRESHOLD = 3;

    constructor(id,containter,vector,elementControl) {

        this.id = id;
        this.width = window.innerWidth - 2 * param.cLeft;
        this.height = param.cHeight * 2 + param.cTop;
        this.container = containter;
        this.vector = vector;
        this.elementControl = elementControl;
        this.mouseDownPosition = new THREE.Vector2();
    }

    async init() {

        this.renderer = new THREE.WebGLRenderer({ antialias: true,alpha: true });
        this.renderer.setSize(this.width,this.height);
        this.container.appendChild(this.renderer.domElement);
        // this.renderer.setClearColor(param.BACK_COLORS[this.id],0);

        this.camera = new THREE.OrthographicCamera(
            param.orthoWidth / (-2),param.orthoWidth / 2,param.orthoHeight / 2,param.orthoHeight / (-2),0.05,1000
        );
        this.camera.position.fromArray(param.CAMERA_POSITIONS[this.id]);

        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color(param.BACK_COLORS[this.id]);

        this.controls = new THREE.OrbitControls(this.camera,this.renderer.domElement);
        this.controls.enableRotate = false;

        await this._initMeshes();

        this._calibrateCamera();

        this.animate();

        this.container.addEventListener('mousemove',(event) => { this.onMouseMove(event) },false);
        this.container.addEventListener('mousedown',(event) => { this.onMouseDown(event) },false);
        this.container.addEventListener('mouseup',(event) => { this.onMouseUp(event) },false);
        this.container.addEventListener('mouseout',false);

        this.renderer.domElement.addEventListener(
            'wheel',(event) => { this.onWheel(event) },false
        );

    }

    _calibrateCamera() {

        this.camera.left = -this.planeWidth / 2;
        this.camera.right = this.planeWidth / 2;
        this.camera.top = this.planeWidth / 2 * this.height / this.width;
        this.camera.bottom = -this.camera.top;

        this.camera.updateProjectionMatrix();
    }

    async _initMeshes() {

        this.plane = new THREE.Group();

        var imageMesh = await this._getImageMesh();
        imageMesh.name = "plane";
        this.plane.add(imageMesh);

        var helper = new THREE.GridHelper(400,800);
        helper.material.opacity = 0.75;
        helper.material.transparent = true;
        helper.material.depthTest = false;
        helper.position.y = 0.1;
        this.plane.add(helper);

        this.plane.rotation.fromArray(param.PLANE_ROTATIONS[this.id]);

        this.scene.add(this.plane);
    }

    async _getImageMesh() {

        if (param.SVG_MODE) {
            return await new SVGPlane().createSVGPlane(param.SVG_FILES[this.id]);

        } else {
            return new Promise((resolve,reject) => {
                new THREE.TextureLoader().setPath('./images/jpeg/').load(
                    param.JPEG_FILES[this.id],(t) => {
                        var s = param.JPEG_SCALES[this.id];

                        this.planeWidth = s * param.pLength;
                        this.planeHeight = s * param.pLength * t.image.height / t.image.width;
                        console.log(this.planeWidth,this.planeHeight);

                        var planeGeo = new THREE.BoxGeometry(
                            this.planeWidth,0.01,this.planeHeight
                        );
                        var planeMat = new THREE.MeshPhongMaterial({ map: t });
                        var planeMesh = new THREE.Mesh(planeGeo,planeMat);

                        planeMesh.position.copy(param.JPEG_OFFSETS[this.id]);

                        resolve(planeMesh);
                    });
            });
        }

    }

 
    animate() {
        window.requestAnimationFrame(() => { this.animate(); });
        this.renderer.clear();
        this.renderer.render(this.scene,this.camera);

    }

}

parameter.js

class Parameter {

    TOP_LEFT     = 0;
    TOP_RIGHT    = 1;
    BOTTOM_LEFT  = 2;
    BOTTOM_RIGHT = 3;

    TO_METER = 0.3048;

    PLANE_COLOR = 0xaaaaaa;
    BALL_COLOR  = 0x0000ff;
    LINE_COLOR  = 0xff0000;

    BACK_COLORS = [
        0x598d4b,0x598d4b,0xc6ced1,0xc6ced1
    ];

    MAP_SCALE = 100 / 1.5 * 100 / 53; // no meaning anymore

    SVG_MODE = false;

    JPEG_FILES = [
        '1-Top-Left-Quadrant.jpg','2-Top-Right-Quadrant.jpg','3-Bottom-Left-Quadrant.jpg','4-Bottom-Right-Quadrant.jpg','2-Top-Right-Quadrant-2.jpg'
    ];

    SVG_FILES = [
        '1-Top-Left-Quadrant.svg','2-Top-Right-Quadrant.svg','3-Bottom-Left-Quadrant.svg','4-Bottom-Right-Quadrant.svg'
    ];

    CAMERA_POSITIONS = [
        [ -5,5,5],[  0,10,0],[-10,10]
    ];

    PLANE_ROTATIONS = [
        [0,[0,[Math.PI / 2,Math.PI / 2],0]
    ];

    // PLANE_AXES = ['','xz','yz','xy'];

    JPEG_SCALES = [0.8267,1,0.95,0.5688];

    JPEG_OFFSETS = [
        new THREE.Vector3(0.4,-0.3),new THREE.Vector3(),new THREE.Vector3(0,-0.73),new THREE.Vector3(0.9,-0.98),];

    CAMERA_OFFSETS = [
        this.JPEG_OFFSETS[0],this.JPEG_OFFSETS[1],new THREE.Vector3(-this.JPEG_OFFSETS[2].z,this.JPEG_OFFSETS[2].x),new THREE.Vector3(this.JPEG_OFFSETS[3].x,-this.JPEG_OFFSETS[3].z)
    ]

    BALL_SIZE = 0.05;

    constructor() {

        if (!!Parameter.instance) {
            return Parameter.instance;
        }

        Parameter.instance = this;

        this._init();

        return this;

    }

    _init() {

        var controlBarHeight = 0;
        var gap = 2;

        this.cWidth = (window.innerWidth - gap * 3) / 2;
        this.cHeight = (window.innerHeight - controlBarHeight - gap * 3) / 2;
        this.cTop = gap;
        this.cLeft = gap;
        this.cRate = this.cWidth / this.cHeight;
        this.orthoHeight = 8;
        this.orthoWidth = this.orthoHeight * this.cRate;
        this.pLength = 8;
        this.hLength = 5;
    }

}


var param = new Parameter();

请帮助我。