Viewing 360 Images in Browser

Questions
1

A while ago a build a little java script to view images in the browser
e,g. the URL would be mywebsite.com is available for purchase - Sedo.com.

It was working fine at the time, I haven’t updated in a while and see some things have change, i’ve been able to fix most thing (getting it working again, colour) however my zoom, starting position and resizing the window no longer work.
Any help would be greatly appreciated

// main.js

import * as THREE from 'three';

//import Orbit Controls - Orbit controls allow the camera to orbit around a target.
import { OrbitControls } from 'https://unpkg.com/three@0.112/examples/jsm/controls/OrbitControls.js';


// Function to get URL parameters
function getUrlParameter(name) {
    name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

// Initialize Three.js scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 1;
camera.zoom = 0; //changed from 3 to 0

// const renderer = new THREE.WebGLRenderer();
const renderer = new THREE.WebGLRenderer( { antialias: true } );

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Get the image URL from the URL parameter, this allows you to reuse the same HTML file e.g http://yourwebsite.com/your_viewer.html?image=https://your-s3-bucket.s3.amazonaws.com/360image.jpg
const imageUrl = getUrlParameter('image');

// Load 360 image texture
const texture = new THREE.TextureLoader().load(imageUrl);

// This makes the pciture look better  
//texture.encoding = THREE.sRGBEncoding; //Old code
texture.colorSpace = THREE.SRGBColorSpace;


// If there is text on the image that its around the correct way
texture.wrapS = THREE.RepeatWrapping;
texture.repeat.x = - 1;

// Create a sphere geometry to map the 360 image onto
const geometry = new THREE.SphereGeometry(500, 60, 40);
const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// Add OrbitControls from the module
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableZoom = true;
controls.enabled = true;

controls.mouseButtons = {
    LEFT: THREE.MOUSE.ROTATE,
    MIDDLE: THREE.MOUSE.DOLLY,
    RIGHT: THREE.MOUSE.PAN
}

// Set camera position
camera.position.set(0, 0, .100);

// Handle window resize events
window.addEventListener('resize', function () {
    const newWidth = window.innerWidth;
    const newHeight = window.innerHeight;

    camera.aspect = newWidth / newHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(newWidth, newHeight);
});


// Render loop
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // Update controls
    renderer.render(scene, camera);
}

animate();