Three.js 画布在事件发生后调整大小

Question

我正在使用three.js 制作移动网络。

我也在使用元视图端口标签， <meta name="viewport" content="width=device-width; user-scalable=no; initial-scale:1.0; minimum-scale=1.0; maximum-scale=1.0;" >

我遇到了一个问题，即在点击事件的光线投射后，画布正在调整大小。

canvas 的 element.style 属性改变了：

<canvas width="1081" height="2029" style="width: 980px; height: 1081px;">

进入

<canvas width="1081" height="2029" style="width: 412px; height: 773px;">

<!--
and changing size is depends on phone's screen size.. for mine is 412 x 773.
-->

我不知道在哪里更改和设置画布style.....

所以我在css中添加了以下代码，

  .canvas{
    width: devicve-width !important;
    height: device-height !important;
  }

  canvas{
    width: devicve-width !important;
    height: device-height !important;
  }

它也不起作用。

桌面-web 工作正常，但只有移动版本有错误。

我从不重置画布的大小，我不知道该怎么办。

现在，我有这么多代码（但没有调整画布大小的代码。），所以我很困惑..

three.js中有什么特殊的代码可以设置画布的大小吗？

或者有什么办法可以预防？？

感谢您的帮助。

Answer 1

查看默认的 ThreeJS 示例。神奇的线条如下。

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

你可以看到它们是如何使用的here

Answer 2

你可以像这样设置 Three.js 的画布大小

renderer.setSize(window.innerWidth, window.innerHeight);