Javascript Three.js（GLSL）和#x2014；画布调整大小

我试图保持比例至少有一点时，窗口的大小调整到较小的大小在。现在很难在手机上看到台词和互动。你有解决这个问题的办法吗？也许根据窗口大小将缩放比例增加一倍是有意义的，但我对如何实现这一点有点茫然

JS的责任部分：

onWindowResize（）；
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（事件）{
container.style.height=window.innerHeight+“px”；
container.style.width=window.innerWidth+“px”；
画布宽度=container.offsetWidth；
画布高度=容器。视线外；
//将新大小值发送到着色器并调整窗口大小
.resolution.value.x=画布宽度；
converage.resolution.value.y=画布高度；
//var res=画布宽度/cols；
//行=画布高度/分辨率；
colsrows.value.x=cols；
colsrows.value.y=行；//行；
渲染器.setSize（画布宽度、画布高度）；
}

线条的厚度在

drawLine

中计算，并取决于以下参数：

浮动绘制线（vec2 uv、vec2 p1、vec2 p2、浮动r）
{
// [...]
返回1.0-平滑步长（0.0,0.01，d-r）；
}

将参数增加到edge1，以生成“较厚”的线条（例如0.1）：

浮动绘制线（vec2 uv、vec2 p1、vec2 p2、浮动r）
{
// [...]
返回1.0-平滑步长（0.0,0.1，d-r）；
}

---

您可以为该行添加其他统一变量：

均匀浮动厚度；
浮动抽绳（vec2 uv、vec2 p1、vec2 p2、浮动r）
{
// [...]
返回1.0-平滑步长（0.0，厚度，d-r）；
}

制服={
// [...]
厚度：{类型：“f”，值：0.1}，
};

非常感谢您的回答。这确实有助于线条的粗细，但我想我的问题不是很清楚。我主要想知道如何改变画布的缩放以适应更小的屏幕尺寸。现在，在移动设备上，所有东西的尺寸都非常小，以至于鼠标周围的凸起交互也非常小（除了线条）。我想知道，当调整大小时，是否有可能使整个画布的大小（或窗口宽度/高度）增加一倍，以便在较小的屏幕中使整个交互更加清晰。你认为这可以做到吗？@pkid对不起，我不明白。你想根据画布的大小调整

cols

和

rows

吗？也许这里的代码笔更清楚一点：我不希望内容缩放到如此小的尺寸，以至于在较小的屏幕中，行和交互都会丢失。也许解决方案是调整画布的大小，而不缩放内容，或者以比当前较小屏幕中的内容更大的方式缩放内容。希望我更清楚一点。@pkid您的意思是希望根据显示器的大小而不是显示器的分辨率进行缩放？或者你的意思是

uniforms.colsrows.value.x=画布宽度/cols

，

制服.colsrows.value.y=画布高度/行我的意思是，即使调整了窗口的大小，也不进行缩放。他们在这个链接上有类似的讨论，但我不确定如何在这个实例中实现它：