I want to change this vertical image slider to horizontal one - three.js

Question

This is the current vertical image slider URL.
current vertical image slider URL.
I want to change the slider direction to horizontal.
These are my codes.
right 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', (event) => { this.onMouseUp(event) }, 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, 0, 0],
[ 0, 0, 10]
];
PLANE_ROTATIONS = [
[0, 0, 0],
[0, 0, 0],
[Math.PI / 2, 0, Math.PI / 2],
[Math.PI / 2, 0, 0]
];
// PLANE_AXES = ['', 'xz', 'yz', 'xy'];
JPEG_SCALES = [0.8267, 1, 0.95, 0.5688];
JPEG_OFFSETS = [
new THREE.Vector3(0.4, 0, -0.3),
new THREE.Vector3(),
new THREE.Vector3(0, 0, -0.73),
new THREE.Vector3(0.9, 0, -0.98),
];
CAMERA_OFFSETS = [
this.JPEG_OFFSETS[0],
this.JPEG_OFFSETS[1],
new THREE.Vector3(-this.JPEG_OFFSETS[2].z, 0, this.JPEG_OFFSETS[2].x),
new THREE.Vector3(this.JPEG_OFFSETS[3].x, 0, -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();
Please help me.