76 lines
2.1 KiB
HTML
76 lines
2.1 KiB
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: 0px;
|
|
max-width: 1024px;
|
|
padding: 20px;
|
|
transition: 1s all;
|
|
}
|
|
|
|
@media (max-width: 1024px){
|
|
.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:#111; 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: "#111111"},
|
|
{name:"lines", color: "red"},
|
|
{name:"depth", color: "yellow"},
|
|
{name:"normal", color: "#8080ff"}
|
|
];
|
|
|
|
const threeCanvas = new ThreeCanvas(null, null, {views3: false});
|
|
threeCanvas.init(canvasNames);
|
|
|
|
document.body.append(threeCanvas.panelWrapper, threeCanvas.threeWrapper);
|
|
}).catch(error => {
|
|
console.error('Ошибка загрузки ThreeCanvas:', error);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |