Three. js canvas изменяет размеры после событий

Question

Я создаю мобильную сеть, используя три. js.

Также я использую метатег портовый тег, <meta name="viewport" content="width=device-width; user-scalable=no; initial-scale:1.0; minimum-scale=1.0; maximum-scale=1.0;" >

У меня проблема с холстом изменен после лучевой трансляции для события клика canvas style .....

Поэтому я добавил следующие коды к css,

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

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

, и это тоже не работает.

Desktop- Веб работает нормально, но ошибка есть только в мобильной версии.

Я никогда не сбрасываю размер холста, я не знаю, что мне делать.

Теперь у меня так много кодов (но нет кодов для изменения размера холста.), поэтому я очень запутался ..

Есть ли какой-то специальный код из трех. js для установки размера холста?

Или как-нибудь предотвратить это ??

Спасибо за помощь.

Answer 1

Посмотрите на пример по умолчанию Три JS. Волшебные линии следующие:

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);