Make Responsive Canvas which is come from object

Questions
1

Hi,
here is my some code I want to make image size and position set on a different screen size to make it responsive but I cant achieve this thing I use switch case if else for each images but not get Succes they work after refresh the screen

const canvas = document.querySelector(“canvas”);

let scene, camera, renderer;

let rotateAroundGroup = true;
let currentZoomedImageIndex = 0;

scene = new THREE.Scene();
scene.background = null;

camera = new THREE.PerspectiveCamera(
80,
canvas.clientWidth / canvas.clientHeight,
0.5,
90
);
camera.position.set(0, 0, 10);

const light = new THREE.HemisphereLight(0xFFA910, “cornflowerblue”, 1);
scene.add(light);

const group = new THREE.Group();

renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.outputEncoding = THREE.sRGBEncoding;
canvas.appendChild(renderer.domElement);

let planeMeshes = ;

const textureLoader = new THREE.TextureLoader();

function createImageMesh(texture, position, size, index, content, heading, design) {
const material = new THREE.MeshPhongMaterial({
map: texture,
transparent: true,
// Set the diffuse color to white or adjust as needed
});

const geometry = new THREE.PlaneGeometry(size.width, size.height);
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(position.x, position.y, position.z);
mesh.userData.index = index; // Storing the image index as user data
mesh.userData.originalPosition = { …position }; // Store the original position for movement
mesh.userData.content = content; // Store the text content
mesh.userData.heading = heading;
mesh.userData.design = design;
group.add(mesh);
planeMeshes.push(mesh);
}

const images = [
{ url: “…/assets/images/laptop.png”, position: { x: 0, y: -1, z: 3 }, size: { width: 4, height: 4 }, content: “web development is good for our”, heading: “Web Development”, },
{ url: “…/assets/images/controler.png”, position: { x: 7, y: -4, z: 2.5 }, size: { width: 2, height: 2 }, content: “We can do Game development”, heading: “Game Development” },
{ url: “…/assets/images/reels.png”, position: { x: 7, y: 2, z: 2.5 }, size: { width: 3, height: 3 }, content: “We are reels maker and video editior”, heading: “Video Editor” },
{ url: “…/assets/images/arrow.png”, position: { x: -7, y: 4, z: 2.5 }, size: { width: 4, height: 4 }, content: “Our taarget is to achieve client satisfaction”, heading: “Target” },
{ url: “…/assets/images/mobile.png”, position: { x: -7, y: -4, z: 2.5 }, size: { width: 2.5, height: 3 }, content: “Here we can do MObile development also”, heading: “App Development” },
];

images.forEach((image, index) => {
textureLoader.load(
image.url,
function (texture) {
createImageMesh(texture, image.position, image.size, index, image.content, image.heading);
texture.encoding = THREE.sRGBEncoding;
}
);
});

2

Duplicate ?