需要 Three.js 画布来占据 jQuery 模态窗口的所有宽度答案

【问题标题】：Need for Three.js canvas to take all the width of a jQuery modal window需要 Three.js 画布来占据 jQuery 模态窗口的所有宽度
【发布时间】：2017-10-05 19:42:22
【问题描述】：

我对放入 jQuery 模式窗口的 THREE.js 画布的空间有疑问。

我使用 THREE.js 画布完成了我的代码的第一个版本，它占据了所有全窗口（不使用 div，只进入正文）。这是在浏览器窗口中看到的这个版本的截图：

现在，我想将所有这些画布放入一个 jQuery 模态窗口。这是我得到的内容的捕获（还有 Firefox 检查器）：

正如您在第二个版本中看到的那样，显示的画布没有集成到所有模态窗口宽度中，我不明白为什么（蓝色区域对应于 THREE.js 画布） .此画布是使用以下代码创建的：

  // Main container
  var popID = 'mainWindow';
  mainContainer = document.getElementById(popID);
  // Initiate WebGLRenderer renderer
  renderer = new THREE.WebGLRenderer({antialias: true});
  // Width and Height
  popWidth = $('#' + popID).data('width'); // Get width
  popHeight = $('#' + popID).data('height'); // Get width
  renderer.setSize(popWidth, popHeight);
  renderer.sortObjects = true;
  // Append to mainContainer
  mainContainer.appendChild(renderer.domElement);

似乎右侧的菜单（DatGUI）阻止画布占据模态窗口的所有宽度。

模态窗口的DOM结构是用：

<div id="mainWindow" data-width="900" data-height="490" class="center popup_block" style="display: block; width: 1296px; height: 705.6px; top: -93.3px; left: 62px;"><a href="#" class="close"><img src="./close_pop.png" class="btn_close" title="Close Window" alt="Close"></a>
    <div id="global-ui">
    <div id="buttons-wrapper">
    <div id="buttons"><button id="startButtonId" class="btn btn-primary btn-xs" tabindex="13">Start</button><button id="resetButtonId" class="btn btn-default btn-xs" tabindex="14"></button><button type="submit" id="saveButtonId" class="btn btn-primary btn-xs"></button>
    </div>
    </div>
    <div class="dg main a" style="-moz-user-select: none; width: 350px;">
    ...

您可以在以下链接直接测试第二个版本：

[测试版][3]

进入页面后，您必须第一次单击图像，然后单击模态窗口右下角的开始按钮，右侧菜单正下方，使球体出现：球体出现在 Firefox、Opera 上，但在 Chrome 上的位置很糟糕。

如果有人可以帮助我获得一个填满模式窗口所有宽度的 THREE.js 画布，那就太好了。

问候。

【问题讨论】：

我不使用三个，所以不能明确回答，你的例子只是让我的机器陷入困境（它是一个很好的规格机器）所以我猜你只需要设置画布元素 rendener.domElement.className = "canvasStyle"; 并创建一种将画布绝对定位在左上角 0px 的样式，这将防止其他 DOM 元素干扰其布局。

标签： javascript jquery canvas three.js

【解决方案1】：

让它在我的机器上运行，所以我就是这样修复它的。

为画布创建新样式

.canvasElementClassName {
   position : absolute;
   top : 0px;
   left : 0px;
 }

那么对于代码，您只需要确保画布元素具有正确的样式即可。

renderer.domElement.className = "canvasElementClassName";

我认为，如果您提供 DataGUI 和浮动容器（位置：绝对或相对），我认为您的问题也可以解决，因为现在您正在与 dataGUI 元素共享画布容器，从而调整画布的大小以适应。

你可以这样做（我认为或类似的）

    // you need an element that has style
    // position : relative;
    // top : 0px;
    // right : 0px;
    // get that element
    var container = document.getElementById("GUIcontainer");
    // create the GUI with autoplace turned off
    var GUI = new dat.GUI({ autoPlace: false });
    // add the GUI to the container
    container.appendChild(gui.domElement);

【讨论】：