如何更改来自three.js的自动生成的画布标签的宽度/高度样式？

Question

似乎即使我为画布设置了全局样式，由three.js生成的canvas标记也会强制使用其自己的样式，从而覆盖已定义的画布样式。有没有办法将其宽度/高度更改为100％？

我尝试使用container.width/.height设置setSize，但是目前恢复为window.innerWidth/Height

http://designs.playgami.com/Anonymous/7d1afa05-5a73-4a17-b5ee-9e84664dacc7

Answer 1

代码是从Three.js docs提取的，因为您没有提供自己的代码（可能会有所帮助）

由代码生成的canvas元素的宽度和高度在代码本身中设置。通常是window.innerWidth和window.innerHeight值。请参见下面的示例，该示例摘自Three.js docs

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

带有renderer.setSize的行是将画布的宽度和高度设置为与窗口相同的行，但是您可以通过输入自定义值或使用父元素的宽度来更改它可以在CSS中设置。

例如：

const sizeControlElem = document.querySelector('#containingElement');
WIDTH = sizeControlElem.getBoundingClientRect().width;
HEIGHT = sizeControlElem.getBoundingClientRect().height;

renderer.setSize(WIDTH, HEIGHT);

您可能还会运行一个调整大小功能，该函数可能会在每次调整窗口大小时重新调整画布的大小，这可能会覆盖您设置的任何样式，因此您也需要进行更新（如下所示）。

function handleWindowResize() {
    WIDTH = sizeControlElem.getBoundingClientRect().width;
    HEIGHT = sizeControlElem.getBoundingClientRect().height;

    renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
}

window.addEventListener('resize', handleWindowResize, false);