Three.js 选项卡内的 canvas 未继承父元素的完整宽度和高度

Question

我在选项卡容器中使用 Three.js canvas，但由于某些未知原因，3D 视口未继承父元素的完整宽度和高度。

@描述

我有 2 个选项卡，第一个选项卡处于活动状态，第二个选项卡是我有 3D 视口的地方 (canvas)。

  <div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">
      <div id="canvas3D"></div>
    </div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
  </div>

jsfiddle example

Answer 1

(VW) unit on CSS code 我只是说父宽度是

#canvas3D {

宽度：计算（100vw - 60px）；高度：计算（100vh - 60px）；

}

我希望有人会帮助:)

Three.js 选项卡内的 canvas 未继承父元素的完整宽度和高度

Three.js the canvas inside the tabs are not inhered the full width and height of the parent element

tabs

resize

canvas

three.js