Javascript 如何使three.js渲染器的大小适合网页元素？

我需要使渲染器的大小适合网页上元素的大小。执行

renderer.setSize（window.innerWidth，window.innerHeight）

设置渲染器的大小以适合整个窗口

init（）{
让map=document.getElementById（'map'）；
this.scene=新的三个.scene（）；
this.scene.background=新的三种颜色（0xF0）；
this.camera=新的3.perspective相机(
75,
//window.innerWidth/window.innerHeight，
1341/958，//目前已硬编码，但需要自动编码
0.1,
1000,
);
这个.camera.position.z=3；
this.renderer=new THREE.WebGLRenderer（）；
//this.renderer.setSize（window.innerWidth，window.innerHeight）；//它不应该是整个窗口
this.renderer.setSize（1341958）；//目前已硬编码，但需要自动编码
map.appendChild（this.renderer.domeElement）；}

您可以使用

getBoundingClientRect

获取包含渲染器的元素的维度（

）。下面是一个小演示，展示了如何将

缩放到周围

的尺寸：

var container=document.querySelector（“#container”）；
var canvas=document.querySelector（“#stage”）；
函数scaleToFit（容器、节点）{
var rect=container.getBoundingClientRect（）；
node.width=rect.width；
node.height=rect.height；
}
setTimeout（函数（）{scaleToFit（容器，画布）；}，1000）
#容器{
宽度：100%；
高度：500px；
}
#舞台{
背景色：#000；
}

map.style.height
和
map.style.width
应返回您需要的尺寸谢谢！我会尝试使用它，并告诉你它是否有效：）它有效！非常感谢。我的代码中的另一个问题是，我也在使用Vuetify.js，因此它会导致其他问题。@RaulS很高兴它有帮助：）