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;" > <meta name="viewport" content="width=device-width; user-scalable=no; initial-scale:1.0; minimum-scale=1.0; maximum-scale=1.0;" >

我有一個問題，即在為單擊事件進行光線投射后正在調整畫布的大小。

畫布的 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;
  }

它也不起作用。

桌面網絡工作正常，但只有移動版本有錯誤。

我從不重置畫布的大小，我不知道我必須做什么。

現在，我有這么多代碼（但沒有重新調整畫布大小的代碼。），所以我很困惑..

Three.js 中是否有任何特殊代碼來設置畫布的大小？

或者有什么辦法可以防止？？

感謝您的幫助。

Answer 1

看看默認的 ThreeJS 示例。 神奇的台詞如下。

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

你可以在這里看到它們是如何使用的

Answer 2

您可以像這樣設置 Three.js 畫布大小

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