{
const renderer = new THREE.WebGLRenderer({ antialias: true });
const createCamera = () => {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 100000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
return camera;
};
const cameraTop = createCamera();
cameraTop.position.z = -0.1;
cameraTop.position.y = 1500;
cameraTop.lookAt(new THREE.Vector3(0, 0, 0));
const cameraFront = createCamera();
cameraFront.position.x = 800;
cameraFront.lookAt(new THREE.Vector3(0, 0, 0));
const controls = new THREE.OrbitControls(cameraTop, renderer.domElement);
invalidation.then(() => (controls.dispose(), renderer.dispose()));
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
renderer.render(scene, cameraTop);
let left = 0;
const bottom = 0;
renderer.setViewport(left, bottom, Math.floor(width / 2), height);
renderer.setScissor(left, bottom, Math.floor(width / 2), height);
renderer.setScissorTest(true);
renderer.setClearColor(new THREE.Color(1, 1, 1));
cameraTop.aspect = Math.floor(width / 2) / height;
cameraTop.updateProjectionMatrix();
renderer.render(scene, cameraTop);
left = Math.floor(width / 2);
renderer.setViewport(left, bottom, Math.floor(width / 2), height);
renderer.setScissor(left, bottom, Math.floor(width / 2), height);
renderer.setScissorTest(true);
renderer.setClearColor(new THREE.Color(1, 1, 1));
cameraFront.aspect = Math.floor(width / 2) / height;
cameraFront.updateProjectionMatrix();
renderer.render(scene, cameraFront);
return renderer.domElement
}