使用 clientWidth/clientHeight Javascript 与 webgl returns 问题

Question

我正在使用 document.getElementById('myid').clientWidth（.clientHeight 表示高度）获取 div 元素的宽度和高度，以便在我想要的位置设置容器变量的宽度和高度我的Webgl图形要做。

将值添加到标签进行测试我能够获得元素的宽度和高度的正确值，然后将这些值添加到宽度和高度，我能够使一切正常工作。

当我直接将语句document.getElementById('myid').clientWidth添加到宽度变量时，问题就来了。当我这样做时，我得到了错误的结果。有帮助吗？

下面是部分代码：

var clientWidth = document.getElementById('webgl').clientWidth;
var clientHeight = document.getElementById('webgl').clientHeight;

var container = document.getElementById('webgl');
var width = clientWidth, height =clientHeight;

var renderer = new THREE.WebGLRenderer({alpha: (option.bgcolor === undefined)});
 renderer.setSize(width, height);
 renderer.setClearColor(option.bgcolor || 0, (option.bgcolor === undefined) ? 0 : 1);

 // camera and controls
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position.set(0, 0, 50);

Answer 1

这是因为令人遗憾的是，three.js 不尊重您的 width 和 height 设置，而是在幕后执行 magic： (

要解决此问题，请使用版本 r70+，它移除了一些的魔法。

此外，将您的呼叫更改为

renderer.setSize(width, height);

到

renderer.setSize(width, height, false);

这告诉 three.js 不要乱用 canvas 的 CSS。

这是 three.js 的一个持续问题。 Three.js 试图为您神奇地处理 devicePixelRatio 问题，但事实证明这几乎是不可能的。这是一些问题。

5627, 5908, 6027.

使用 clientWidth/clientHeight Javascript 与 webgl returns 问题

Using clientWidth/clientHeight Javascript with webgl returns problems

javascript

webgl