lo-th-Comfyui_three_js/js/index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charSet="utf-8"/>
        <meta name="language" content="english"/>
        <meta http-equiv="content-type" content="text/html"/>
        <meta name="author" content="lo-th"/>
        <meta name="designer" content="lo-th"/>
        <meta name="publisher" content="lo-th"/>
		<title>THREE DIRECT</title>
		<meta name="description" content="test three view"/>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" crossorigin href="../../../../extensions/Comfyui_three_js/css/styles.css">
		<link rel="stylesheet" crossorigin href="./css/styles.css">		
		<style>
		.threeWrapper {
			margin-top: 50px;
			max-width: 1000px;
			padding: 20px;
			transition: 1s all;
		}

		@media (max-width: 1000px){
			.threeWrapper{
				max-width: 700px;
			}	
		}

		@media (max-width: 700px){
			.threeWrapper{
				max-width: 500px;
			}
		}

		@media (max-width: 500px){
			.threeWrapper{
				max-width: 200px;
			}
		}
		</style>		
		
	</head>
	<body style="background-color:#000; margin:0; padding:0; overflow:hidden;">
		
		<script type="module">
			async function loadThreeCanvas({path1, path2}) {
				try {
					const module = await import(path1);
					return module.ThreeCanvas;
				} catch (error) {
					console.warn('Error import module first path:', error.message);
					const module = await import(path2);
					return module.ThreeCanvas;
				}
			}

			// Использование функции
			loadThreeCanvas({path1: '../../../../extensions/Comfyui_three_js/ThreeCanvas.js', path2:'./ThreeCanvas.js'})
			.then(ThreeCanvas => {
				const canvasNames = [
					{name:"image", color: "silver"},
					{name:"lines", color: "red"},
					{name:"depth", color: "yellow"},
					{name:"normal", color: "#8080ff"}
				];  

				const threeCanvas = new ThreeCanvas(null, null, {views3: true});
				threeCanvas.init(canvasNames);

				document.body.append(threeCanvas.panelWrapper, threeCanvas.threeWrapper);
			}).catch(error => {
				console.error('Ошибка загрузки ThreeCanvas:', error);
			});
		</script>
	</body>
</html>