Javascript 在画布或div中嵌套Three.JS渲染器

我正在尝试将3d模型查看器嵌套在具有其他信息（如文本）的响应布局中。我使用的是window.innerWidth和window.innerHeight，但后来我切换到了.clientWidth和.clientHeight，因此渲染器大小将由css控制，但它不会渲染

我正在使用这个网站寻求帮助

threejs-基本
身体{
保证金：0；
溢出：隐藏；
}
帆布{
显示：内联块；
背景：红色；
宽度：40%；
身高：40%；
}
嗨

变量渲染器，
场景
摄像机，
myCanvas=document.getElementById（'myCanvas'）；
//渲染器
renderer=new THREE.WebGLRenderer（{canvas:myCanvas，antialas:true}）；
renderer.setClearColor（0x000000）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（canvas.clientWidth，window.clientHeight）；
//摄像机
摄像头=新的三个透视摄像头（50，canvas.clientWidth/window.clientHeight.013000）；
//场面
场景=新的三个。场景（）；
//灯光
var灯光=新的三个环境灯光（0xffffff，0.5）；
场景。添加（灯光）；
var light2=新的三点光源（0xffffff，0.5）；
场景。添加（light2）；
var geometry=新的3.BoxGeometry（100100）；
//几何材料
var material=new THREE.MeshLambertMaterial（{color:0xF3FFE2}）；
var mesh=新的三个网格（几何体、材质）；
网格位置z=-1000；
场景。添加（网格）；
//RenderLoop
render（）；
var-delta=0；
函数render（）{
//轮虫
网格旋转.x+=.0001
网格.旋转.y+=.001
网格旋转.z+=.001
//活动顶点
δ+=0.1；
顶点[0].x=-25+Math.sin（delta）*50；
geometry.verticesNeedUpdate=true；
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
};

我看到两个问题：

请不要对multilple元素使用相同的id。如果要使用相同的渲染创建多个画布，可以使用类和循环触发函数渲染每个画布

clientWith

用于使用

getElementById

或其他函数选择以映射html节点的节点，但window对象没有此方法，如果您的引用是window对象，则可以使用innerWidth和innerHeight，在本例中，我看到您的画布大小是视口的

40%

，然后您可以使用

window.innerHeight*0.40

我希望它能帮助你

threejs-基本
身体{
保证金：0；
溢出：隐藏；
}
帆布{
显示：内联块；
背景：红色；
宽度：40%；
身高：40%；
}
嗨

var myCanvas=document.getElementById（'myCanvas'）；
//渲染器
var renderer=new THREE.WebGLRenderer（{canvas:myCanvas，antialas:true}）；
renderer.setClearColor（0x000000）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth*0.40，window.innerHeight*0.40）；
//摄像机
var摄像机=新的三透视摄像机（50，（窗内宽度*0.40）/（窗内高度*0.40），.013000）；
//场面
var scene=new THREE.scene（）；
//灯光
var灯光=新的三个环境灯光（0xffffff，0.5）；
场景。添加（灯光）；
var light2=新的三点光源（0xffffff，0.5）；
场景。添加（light2）；
var geometry=新的3.BoxGeometry（100100）；
//几何材料
var material=new THREE.MeshLambertMaterial（{color:0xF3FFE2}）；
var mesh=新的三个网格（几何体、材质）；
网格位置z=-1000；
场景。添加（网格）；
//RenderLoop
render（）；
var-delta=0；
函数render（）{
//轮虫
网格旋转.x+=.0001
网格.旋转.y+=.001
网格旋转.z+=.001
//活动顶点
δ+=0.1；
顶点[0].x=-25+Math.sin（delta）*50；
geometry.verticesNeedUpdate=true；
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
};

你想要画布。clientWidth@BenWest还是不行吗？