Фоновое изображение обычной карты для веб-сайта с фиксированным источником света

body { margin: 0; overflow: hidden; }
.background-div { position: absolute; width: 50vw; height: 50vh; }
#background1 { top: 0; left: 0; }
#background2 { top: 0; left: 50vw; }
#background3 { top: 50vh; left: 0; }
#background4 { top: 50vh; left: 50vw; }

<div class = "background-div" id = "background1"></div>
<div class = "background-div" id = "background2"></div>
<div class = "background-div" id = "background3"></div>
<div class = "background-div" id = "background4"></div>

<script type = "importmap">
  {
"imports": {
  "three": "https://unpkg.com/[email protected]/build/three.module.js",
  "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
}
  }
</script>

<script type = "module">
import * as THREE from "three";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

function fourPlanes(container) {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
camera.position.z = 20;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enabled = true;

const light = new THREE.PointLight(0xFFFF00, 777, 100);
light.position.set(40, 0, 10);
scene.add(light);

function createTexturedPlane(textureURL, normalMapURL, position, scene) {
    const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load(textureURL);
    const normalMap = textureLoader.load(normalMapURL);
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(4, 4);
    normalMap.repeat.set(4, 4);

const material = new THREE.MeshStandardMaterial({
        map: texture,
        normalMap: normalMap,
    });

    const geometry = new THREE.PlaneGeometry(10, 10);
    const plane = new THREE.Mesh(geometry, material);
    plane.position.copy(position);

    scene.add(plane);
    
}
createTexturedPlane('https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/water.jpg', 'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/waternormals.jpg', new THREE.Vector3(0, 0, 0), scene);

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

window.addEventListener('resize', () => {
    camera.aspect = container.clientWidth / container.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(container.clientWidth, container.clientHeight);
});
}

const background1 = document.getElementById('background1');
const background2 = document.getElementById('background2');
const background3 = document.getElementById('background3');
const background4 = document.getElementById('background4');

fourPlanes(background1);
fourPlanes(background2);
fourPlanes(background3);
fourPlanes(background4);

</script>