Javascript 如何使用three.js使用3d模型制作响应画布？

我正在制作一个网页，其中我创建了一个画布，用threejs显示一个3d对象（一个立方体）。我将这个画布添加到一个div中（如一些文档所示）。
问题是，当我将屏幕大小更改为较小时，画布和对象变小，效果很好，但当屏幕更改为较大时，画布会扩展并占据整个页面。
我想要的是保持指定宽度和高度的尺寸
提前谢谢。

特马
div{
宽度：50%；
左边距：20px；
右边距：100px；
边缘顶部：20px；
边缘底部：20px；
边框：2件纯蓝；
}
函数init（）{
宽度=500；
高度=500；
场景=新的三个。场景（）；
摄像机=新的三个透视摄像机（75，宽/高，0.11000）；
摄像机位置z=500；
renderer=new THREE.WebGLRenderer（）；
设置大小（宽度、高度）；
renderer.setClearColor（0xffffff）；
renderer.setPixelRatio（window.devicePixelRatio）；
contendor=document.getElementById（'container'）；
appendChild（renderer.doElement）；
var obj=新的三立方计量法（100100）；
var material=新的三个.MeshNormalMaterial（）；
主体=新的三个网格（obj，材料）；
场景。添加（主体）；
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
var animate=函数（）{
请求动画帧（动画）；
旋转体x+=0.01；
本体旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
};
init（）；
制作动画（）；

这并不奇怪，您正在使用整个窗口的宽度/高度而不是实际的容器div宽度/高度来调整渲染器的大小，那么您希望

尝试用以下内容替换

onWindowResize

：

function onWindowResize() {

    camera.aspect = contenedor.clientWidth / contenedor.clientHeight;

    camera.updateProjectionMatrix();

    renderer.setSize(contenedor.clientWidth, contenedor.clientHeight);
}

---

您可以使用javascript媒体查询来更改对象的位置或相机的位置，而不是更改画布的大小。请参阅下面的代码，它在我的案例中有所帮助

loader.load（'assets/check.glb'，handle_load）；
var网格；
函数句柄加载（gltf）{
控制台日志（gltf）；
mesh=gltf.scene；
console.log（mesh.children[0]）；
mesh.children[0].material=new THREE.MeshLambertMaterial（）；
场景。添加（网格）；
网格位置z=3；
网格位置x=1.8；
网格位置y=-0.4；
网格旋转x=0.3；
功能介质（x）{
如果（x.matches）{
网格位置z=1；
网格位置x=0；
网格位置y=-0.4；
}否则{
网格位置z=3；
网格位置x=1.8；
网格位置y=-0.4；
}
}
var x=window.matchMedia（（最大宽度：700px））
媒体（x）
x、 addListener（媒体）；
}

我不知道你在问什么——当屏幕变大时，画布也会变大，所以这不是你所说的“响应”吗？如果希望画布保持一定大小，则应设置

width:500px或<代码>最大宽度：500px在CSS中。这正是我所说的答案，是的，我还希望画布保持其大小。因为当我放大屏幕时，画布采用的是屏幕的大小，而不是容器的大小，甚至添加了最大宽度，但仍然存在溢出。我认为问题在于onWindowResize函数，因为我使用了屏幕上的测量值，但是我找不到如何分配画布的尺寸。您可以使用
contendor.clientWidth
或
contendor.clientHeight
wao！它起作用了，但你可以解释为什么会这样。非常感谢您从（函数媒体（x）{）开始查询